:root { --bg: #000000; --surface: #1c1c1e; --border: #333333; --text: #ffffff; --text-muted: #8e8e93; --primary: #0a84ff; --radius: 20px; }
[data-theme="light"] { --bg: #f2f2f7; --surface: #ffffff; --border: #e5e5ea; --text: #000000; --text-muted: #8e8e93; --primary: #007aff; }

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; outline:none; }
body { font-family: system-ui, sans-serif; background: var(--bg); color: var(--text); overflow: hidden; user-select: none; -webkit-user-select: none; }
a { text-decoration: none; color: inherit; }

::-webkit-scrollbar { width: 0; height: 0; display: none; }
* { scrollbar-width: none; }

.app-bg-fixed { position: fixed; inset: 0; z-index: -1; }
.app-body { width: 100vw; height: 100vh; display: flex; flex-direction: column; }
.btn { padding: 12px 18px; border-radius: 12px; border: none; font-weight: 600; font-size:15px; cursor: pointer; transition: transform 0.1s; display:inline-flex; align-items:center; justify-content:center;}
.btn:active { transform: scale(0.95); } .btn-primary { background: var(--primary); color: #fff; } .btn-secondary { background: var(--border); color: var(--text); } .btn-danger { background: #ff453a; color: #fff; } .btn-full { width: 100%; }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; background: rgba(128,128,128,0.2); color: var(--text); border: none; font-size: 20px; display:flex; align-items:center; justify-content:center; cursor:pointer; backdrop-filter:blur(5px);}

.form-group { margin-bottom: 12px; } .form-group label { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 600; color: var(--text-muted); text-transform:uppercase;}
.form-group input:not([type="checkbox"]):not([type="color"]), .form-group select, .form-group textarea { width: 100%; padding: 10px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-size:15px; }
.form-row { display: flex; gap: 12px; } .form-row .form-group { flex: 1; }

/* VISIBLE CHECKBOXES */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    text-transform: none !important;
    cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
    appearance: none; -webkit-appearance: none; width: 26px; height: 26px;
    background: rgba(255,255,255,0.1); border: 2px solid var(--border);
    border-radius: 8px; cursor: pointer; flex-shrink: 0; margin: 0;
    display: grid; place-content: center; transition: 0.2s all;
}
[data-theme="light"] .checkbox-label input[type="checkbox"] { background: rgba(0,0,0,0.05); }
.checkbox-label input[type="checkbox"]:checked { background: var(--primary); border-color: var(--primary); }
.checkbox-label input[type="checkbox"]:checked::before { content: "✓"; color: #fff; font-size: 18px; font-weight: 800; line-height: 1; }

.center-body { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px; overflow-y:auto; }
.card { background: var(--surface); padding: 20px; border-radius: var(--radius); border: 1px solid var(--border); box-shadow:0 10px 30px rgba(0,0,0,0.5);}
.alert { padding:12px; border-radius:10px; margin-bottom:15px; font-weight:600; font-size:14px;} .alert-error { background: rgba(255,69,58,0.15); color: #ff453a; border: 1px solid #ff453a; } .alert-success { background: rgba(48,209,88,0.15); color: #30d158; border: 1px solid #30d158; }

.top-bar { position: absolute; top:0; left:0; right:0; height: 70px; padding: 0 30px; display:flex; align-items:center; justify-content:space-between; z-index:50; pointer-events:none; backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,0.05);}
.top-bar .icon-btn, .top-bar .topbar-icons { pointer-events:auto; }
.topbar-icons { display:flex; gap:12px; }
.time-block { display:flex; align-items:baseline; gap:15px; }

/* WEICHERE UHRZEIT */
.time-small { font-size:32px; font-weight:500; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,0.8); }
.clock-time { font-weight: 500; color: #fff; line-height:1; letter-spacing:-1px; text-shadow: 0 4px 15px rgba(0,0,0,0.6); }

.date-small { font-size:18px; font-weight:500; color:#ddd; text-shadow:0 2px 10px rgba(0,0,0,0.8); }
.date-full { font-weight: 500; color: #fff; line-height:1.2; text-shadow: 0 4px 15px rgba(0,0,0,0.6); }

.swiper { width: 100vw; height: 100vh; }
.page-container { width: 100%; height: 100%; padding: 85px 30px 30px; position:relative; display:flex; flex-direction:column; }
.swiper-pagination-bullet { background: #fff; opacity:0.3; width:10px; height:10px; } .swiper-pagination-bullet-active { opacity:1; }

.grid-stack { width:100%; flex:1; overflow:hidden;}
.dash-item { position: relative; border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transform: translateZ(0); width:100%; height:100%; }
.dash-item:not(.is-transparent) { background: var(--item-color, var(--surface)); box-shadow:0 8px 20px rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.05); }
.bg-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.4); z-index:1; }
.item-content-wrapper { position:relative; z-index:2; flex: 1; display: flex; flex-direction: column; padding: 15px; width:100%; height:100%; overflow: hidden; }

.align-center { align-items: center; justify-content: center; text-align: center; }
.align-top-left { align-items: flex-start; justify-content: flex-start; text-align: left; }
.align-bottom-left { align-items: flex-start; justify-content: flex-end; text-align: left; }

.text-small { font-size: 14px; } .text-normal { font-size: 18px; } .text-large { font-size: 26px; } .text-xlarge { font-size: 38px; }

.icon-small .dash-icon-img { width:32px; height:32px; } .icon-small .dash-emoji { font-size:32px; }
.icon-normal .dash-icon-img { width:54px; height:54px; } .icon-normal .dash-emoji { font-size:54px; }
.icon-large .dash-icon-img { width:80px; height:80px; } .icon-large .dash-emoji { font-size:80px; }
.icon-xlarge .dash-icon-img { width:120px; height:120px; } .icon-xlarge .dash-emoji { font-size:120px; }




.weather-text { color:#fff; text-shadow: 0 2px 5px rgba(0,0,0,0.8); font-family:monospace; white-space:pre-wrap; }
.note-content { width:100%; height:100%; font-weight:600; color: #fff; line-height:1.4; overflow-y:auto;}
.widget-iframe { width:100%; height:100%; border:none; pointer-events:auto; border-radius:12px; }

/* EDIT MODE */
.edit-only { display: none !important; } body.edit-mode .edit-only { display: flex !important; }
body.edit-mode .dash-link, body.edit-mode .widget-iframe { pointer-events: none; }
body.edit-mode .dash-item { border: 3px dashed var(--primary); animation: pulse 2s infinite; }
@keyframes pulse { 0% {box-shadow:0 0 0 0 rgba(10,132,255,0.4);} 70% {box-shadow:0 0 0 10px rgba(10,132,255,0);} 100% {box-shadow:0 0 0 0 rgba(10,132,255,0);} }

/* GRIDSTACK RESIZE */
.grid-stack-item .ui-resizable-se { display: none !important; }
body.edit-mode .grid-stack-item .ui-resizable-se {
    display: block !important; background: var(--primary) !important;
    width: 45px !important; height: 45px !important; bottom: -5px !important; right: -5px !important;
    border-radius: 50% 0 16px 0; opacity: 1 !important; transform: none !important; z-index: 100;
    box-shadow: -2px -2px 10px rgba(0,0,0,0.5); cursor: nwse-resize;
}
body.edit-mode .grid-stack-item .ui-resizable-se::before { content: '⤡'; position: absolute; bottom: 10px; right: 12px; color: #fff; font-size: 22px; font-weight: bold; }

.item-edit-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.5); z-index:10; align-items:center; justify-content:center; border-radius:var(--radius);}
.item-edit-btn { background:var(--surface); color:var(--text); border:none; width:50px; height:50px; border-radius:50%; font-size:24px; cursor:pointer; box-shadow:0 10px 20px rgba(0,0,0,0.5);}

.add-btn-page { position:absolute; bottom:30px; left:30px; z-index:20; padding:15px 25px; font-size:16px; border-radius:15px; box-shadow:0 10px 20px rgba(0,0,0,0.4); }

/* COMPACT MODALS */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 400; display: flex; align-items: center; justify-content: center; padding:15px; }
.modal-backdrop[hidden] { display: none; }
.modal { width: 100%; max-width: 600px; max-height: 95vh; display:flex; flex-direction:column; padding:0; overflow:hidden;}
.modal-header { padding: 15px 20px; display: flex; justify-content: space-between; align-items:center; border-bottom: 1px solid var(--border); background:var(--surface); }
.modal-header h2 { font-size: 18px; }
.modal-body { padding: 15px 20px; overflow-y:auto; flex:1; -webkit-overflow-scrolling: touch; }

/* TABS */
.settings-tabs { display:flex; background:var(--bg); border-bottom:1px solid var(--border); }
.tab-btn { flex:1; background:transparent; color:var(--text-muted); border:none; padding:12px; font-size:15px; font-weight:bold; cursor:pointer; }
.tab-btn.active { color:var(--primary); border-bottom:3px solid var(--primary); }
.tab-content { display:none; } .tab-content.active { display:block; }

/* GALLERY */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 10px; margin-top: 5px; }
.gallery-img { width: 100%; height: 60px; object-fit: cover; border-radius: 8px; cursor: pointer; border: 3px solid transparent; transition:0.2s; background:var(--bg); }
.gallery-img:hover, .gallery-img.selected { border-color: var(--primary); transform:scale(1.05); }
/* --- NEW ALIGNMENT SYSTEM --- */
.dash-click-overlay { position: absolute; inset: 0; z-index: 5; text-decoration: none; cursor: pointer; }
body.edit-mode .dash-click-overlay { display: none; }

.dash-icon-text-group { display: flex; gap: 12px; pointer-events: none; z-index: 2; position: relative; }
.dash-icon-wrap { display: flex; flex-shrink: 0; justify-content: center; align-items: center; }
.dash-icon-img { object-fit: contain; } .dash-emoji { line-height: 1; }
.dash-label { font-weight: 700; color: #fff; text-shadow: 0 2px 5px rgba(0,0,0,0.8); }

/* Inner Group Alignments */
.icon-align-center { flex-direction: column; align-items: center; text-align: center; }
.icon-align-top { flex-direction: column; align-items: center; text-align: center; }
.icon-align-bottom { flex-direction: column-reverse; align-items: center; text-align: center; }
.icon-align-left { flex-direction: row; align-items: center; text-align: left; }
.icon-align-right { flex-direction: row-reverse; align-items: center; text-align: right; }

/* Menü Abstand */
.tab-content { padding-top: 20px; }