:root{--bg:#0b1220;--card:#0f1a2e;--text:#e8eefc;--muted:#9fb0d0;--accent:#66b2ff;--danger:#ff5c7a;--warn:#ffcc66;--ok:#3ddc97;--border:rgba(255,255,255,.12);--glass:rgba(255,255,255,.06);--glow:rgba(102,178,255,.15)}

/* Animations */
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes glow{0%,100%{box-shadow:0 0 5px var(--glow)}50%{box-shadow:0 0 20px var(--glow),0 0 30px var(--glow)}}

.animate-fade-in{animation:fadeIn .5s ease-out both}
.pulse{animation:pulse 2s ease-in-out infinite}
.shimmer{background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);background-size:200% 100%;animation:shimmer 2s infinite}

*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:radial-gradient(ellipse 1400px 700px at 20% 10%,rgba(102,178,255,.2),transparent 60%),radial-gradient(ellipse 1000px 500px at 80% 20%,rgba(61,220,151,.15),transparent 55%),radial-gradient(ellipse 800px 400px at 50% 80%,rgba(180,130,255,.1),transparent 50%),var(--bg);color:var(--text);min-height:100vh;background-attachment:fixed}a{color:var(--accent);text-decoration:none;transition:color .2s}a:hover{color:#99ccff;text-decoration:underline}.container{max-width:960px;margin:0 auto;padding:20px}.header{margin:0 0 16px 0}.header-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{font-weight:700;letter-spacing:.2px;font-size:18px;text-decoration:none !important;transition:transform .2s}.brand:hover{transform:scale(1.02)}.card{background:linear-gradient(180deg,var(--glass),rgba(255,255,255,.02));border:1px solid var(--border);border-radius:16px;padding:20px;backdrop-filter:blur(12px);transition:transform .2s,box-shadow .2s}.card:hover{box-shadow:0 8px 32px rgba(0,0,0,.2)}.h1{margin:0 0 10px 0;font-size:22px}.h2{margin:14px 0 10px 0;font-size:16px;color:var(--muted)}.h3{margin:0 0 10px 0;font-size:14px;color:var(--muted)}.muted{color:var(--muted);margin:10px 0}.stack{display:flex;flex-direction:column;gap:12px}.field label{display:block;font-size:12px;color:var(--muted);margin:0 0 6px 0}.field input{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:rgba(0,0,0,.18);color:var(--text);transition:all .2s}.field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(102,178,255,.15)}.btn{display:inline-block;padding:10px 16px;border-radius:10px;border:1px solid rgba(102,178,255,.35);background:rgba(102,178,255,.12);color:var(--text);cursor:pointer;font-weight:600;transition:all .25s ease}.btn:hover{background:rgba(102,178,255,.25);transform:translateY(-1px);box-shadow:0 4px 12px rgba(102,178,255,.2);text-decoration:none}.btn:active{transform:translateY(0)}.btn-secondary{border-color:var(--border);background:rgba(255,255,255,.05)}.btn-secondary:hover{background:rgba(255,255,255,.12)}.btn-danger{border-color:rgba(255,92,122,.35);background:rgba(255,92,122,.12)}.btn-danger:hover{background:rgba(255,92,122,.2)}.alert{border-radius:12px;padding:14px 16px;margin:16px 0;border:1px solid var(--border);background:rgba(0,0,0,.15)}.alert-success{border-color:rgba(61,220,151,.35);background:rgba(61,220,151,.08)}.alert-warning{border-color:rgba(255,204,102,.35);background:rgba(255,204,102,.08)}.alert-danger{border-color:rgba(255,92,122,.35);background:rgba(255,92,122,.08)}.footer{margin-top:14px;color:var(--muted);font-size:13px}.qr{max-width:220px;background:#fff;border-radius:12px;padding:10px}.codes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}code{display:block;padding:8px 10px;border-radius:10px;background:rgba(0,0,0,.22);border:1px solid var(--border);color:var(--text);font-family:'JetBrains Mono',Consolas,monospace}ul{margin:8px 0 0 18px;padding:0}

.row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:720px){.grid{grid-template-columns:1fr}.row{flex-direction:column;align-items:flex-start}}

.table{width:100%;border-collapse:collapse;margin-top:8px}
.table th,.table td{padding:10px 8px;border-bottom:1px solid var(--border);vertical-align:top;text-align:left}
.actions{white-space:nowrap}
.actions a{margin-right:10px}
.link{background:none;border:none;color:var(--accent);cursor:pointer;padding:0;font:inherit}
.link.danger{color:var(--danger)}

.tag{display:inline-block;padding:2px 8px;border-radius:999px;border:1px solid var(--border);color:var(--muted);font-size:12px}
.tag.ok{border-color:rgba(61,220,151,.35);color:var(--ok)}
.tag.warn{border-color:rgba(255,204,102,.35);color:var(--warn)}

/* Form improvements */
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px;font-weight:500}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--border);background:rgba(0,0,0,.2);color:var(--text);font-size:14px;transition:border-color .2s}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--accent)}
.form-group small{display:block;margin-top:4px;font-size:12px;color:var(--muted)}
.form-error{color:var(--danger);font-size:12px;margin-top:4px}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.form-actions{display:flex;gap:10px;margin-top:20px}
.checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer}
.checkbox-label input[type="checkbox"]{width:auto}
.inline{display:inline}

/* Hero Section - Clock & Weather */
.hero-section{display:flex;justify-content:space-between;align-items:flex-start;padding:30px 0 24px;flex-wrap:wrap;gap:24px}
.hero-clock{text-align:left}
.clock-time{font-size:72px;font-weight:200;letter-spacing:-3px;line-height:1;background:linear-gradient(135deg,var(--text) 0%,var(--accent) 50%,var(--ok) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.clock-date{font-size:16px;color:var(--muted);margin-top:8px;text-transform:capitalize}
.clock-greeting{font-size:20px;margin-top:12px;color:var(--text);font-weight:500}

/* Dual Weather Cards */
.weather-cards{display:flex;gap:12px;flex-wrap:wrap}
.weather-card{background:linear-gradient(135deg,var(--glass),rgba(255,255,255,.03));border:1px solid var(--border);border-radius:16px;padding:16px 20px;backdrop-filter:blur(16px);min-width:160px;transition:all .3s ease}
.weather-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.2)}
.weather-card-home{border-color:rgba(102,178,255,.3)}
.weather-card-work{border-color:rgba(180,130,255,.3)}
.weather-location{font-size:12px;color:var(--muted);margin-bottom:8px;font-weight:500}
.weather-main{display:flex;align-items:center;gap:8px}
.weather-icon{font-size:32px}
.weather-temp{font-size:36px;font-weight:300}
.weather-desc{font-size:12px;color:var(--muted);margin-top:4px}
.weather-minmax{display:flex;gap:10px;margin-top:6px;font-size:13px}
.temp-min{color:var(--accent)}
.temp-max{color:var(--warn)}
.weather-unavailable{color:var(--muted);font-size:13px}

/* Sun Info Bar */
.sun-info{display:flex;gap:20px;flex-wrap:wrap;padding:12px 16px;background:var(--glass);border:1px solid var(--border);border-radius:12px;margin-bottom:20px;font-size:13px;color:var(--muted)}

/* Quick Links */
.quick-links-section{margin-bottom:24px}
.quick-links-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(85px,1fr));gap:10px}
.quick-link{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px 8px;background:var(--glass);border:1px solid var(--border);border-radius:14px;text-decoration:none;transition:all .25s ease;min-height:85px}
.quick-link:hover{background:rgba(255,255,255,.12);transform:translateY(-3px) scale(1.02);box-shadow:0 8px 24px rgba(0,0,0,.2);text-decoration:none}
.quick-link:active{transform:translateY(0) scale(.98)}
.quick-link-icon{font-size:26px;margin-bottom:6px;transition:transform .2s}
.quick-link:hover .quick-link-icon{transform:scale(1.1)}
.quick-link-title{font-size:11px;color:var(--text);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.quick-link-add{border-style:dashed;opacity:.5}
.quick-link-add:hover{opacity:1}
.empty-links{text-align:center;padding:40px;background:var(--glass);border:1px dashed var(--border);border-radius:16px}
.link-blue{border-color:rgba(102,178,255,.4);background:linear-gradient(135deg,rgba(102,178,255,.15),rgba(102,178,255,.05))}
.link-green{border-color:rgba(61,220,151,.4);background:linear-gradient(135deg,rgba(61,220,151,.15),rgba(61,220,151,.05))}
.link-red{border-color:rgba(255,92,122,.4);background:linear-gradient(135deg,rgba(255,92,122,.15),rgba(255,92,122,.05))}
.link-yellow{border-color:rgba(255,204,102,.4);background:linear-gradient(135deg,rgba(255,204,102,.15),rgba(255,204,102,.05))}
.link-purple{border-color:rgba(180,130,255,.4);background:linear-gradient(135deg,rgba(180,130,255,.15),rgba(180,130,255,.05))}
.link-orange{border-color:rgba(255,150,80,.4);background:linear-gradient(135deg,rgba(255,150,80,.15),rgba(255,150,80,.05))}

/* Pinned Notes */
.pinned-notes-section{margin-bottom:24px}
.section-title{font-size:15px;color:var(--muted);margin:0 0 12px 0;font-weight:500}
.pinned-notes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.pinned-note{display:block;padding:14px;background:var(--glass);border:1px solid var(--border);border-radius:12px;text-decoration:none;transition:all .2s;color:var(--text)}
.pinned-note:hover{background:rgba(255,255,255,.08);text-decoration:none}
.pinned-note strong{display:block;margin-bottom:6px;font-size:14px}
.pinned-note p{margin:0;font-size:13px;color:var(--muted);line-height:1.4}

/* Notes Grid */
.notes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin-top:16px}
.note-card{position:relative;padding:16px;background:var(--glass);border:1px solid var(--border);border-radius:14px;transition:all .2s}
.note-card:hover{background:rgba(255,255,255,.08)}
.note-card.pinned{border-color:rgba(255,204,102,.4)}
.pin-badge{position:absolute;top:10px;right:10px}
.note-title{margin:0 0 8px 0;font-size:15px;font-weight:600}
.note-content{font-size:14px;color:var(--muted);line-height:1.5;max-height:120px;overflow:hidden}
.note-meta{margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.note-actions{display:flex;gap:10px;margin-top:8px}
.note-actions a,.note-actions button{font-size:16px;opacity:.7;transition:opacity .2s}
.note-actions a:hover,.note-actions button:hover{opacity:1}
.note-yellow{border-color:rgba(255,204,102,.4);background:rgba(255,204,102,.08)}
.note-green{border-color:rgba(61,220,151,.4);background:rgba(61,220,151,.08)}
.note-blue{border-color:rgba(102,178,255,.4);background:rgba(102,178,255,.08)}
.note-pink{border-color:rgba(255,130,180,.4);background:rgba(255,130,180,.08)}
.note-orange{border-color:rgba(255,150,80,.4);background:rgba(255,150,80,.08)}

/* Links Index Grid */
.links-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:14px;margin-top:16px}
.link-card{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 12px;background:var(--glass);border:1px solid var(--border);border-radius:14px;text-decoration:none;transition:all .2s}
.link-card:hover{transform:translateY(-3px);background:rgba(255,255,255,.1);text-decoration:none}
.link-icon{font-size:32px;margin-bottom:8px}
.link-title{font-size:13px;color:var(--text);font-weight:500;text-align:center}
.link-url{font-size:11px;margin-top:4px;text-align:center}

/* Module Cards */
.modules-section{margin-bottom:24px}
.modules-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.module-card{position:relative;display:flex;flex-direction:column;padding:18px;background:linear-gradient(135deg,var(--glass),rgba(255,255,255,.02));border:1px solid var(--border);border-radius:16px;text-decoration:none;color:var(--text);transition:all .3s ease;overflow:hidden}
.module-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0;transition:opacity .3s}
.module-card:hover{background:rgba(255,255,255,.08);transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.25);text-decoration:none}
.module-card:hover::before{opacity:1}
.module-icon{font-size:36px;margin-bottom:12px;transition:transform .3s}
.module-card:hover .module-icon{transform:scale(1.1)}
.module-info{flex:1}
.module-title{display:block;font-size:17px;font-weight:600;margin-bottom:4px}
.module-count{font-size:13px;color:var(--muted)}
.module-alert{margin-top:10px;padding:6px 10px;background:rgba(255,204,102,.15);border:1px solid rgba(255,204,102,.3);border-radius:8px;font-size:12px;color:var(--warn)}
.module-badge{position:absolute;top:12px;right:12px;background:var(--ok);color:var(--bg);font-size:12px;font-weight:700;padding:4px 8px;border-radius:999px;min-width:24px;text-align:center}
.module-pantry:hover{border-color:rgba(255,150,80,.5)}
.module-pantry:hover::before{background:linear-gradient(90deg,transparent,rgba(255,150,80,.8),transparent)}
.module-freezer:hover{border-color:rgba(100,200,255,.5)}
.module-freezer:hover::before{background:linear-gradient(90deg,transparent,rgba(100,200,255,.8),transparent)}
.module-shopping:hover{border-color:rgba(61,220,151,.5)}
.module-shopping:hover::before{background:linear-gradient(90deg,transparent,rgba(61,220,151,.8),transparent)}
.module-notes:hover{border-color:rgba(255,204,102,.5)}
.module-notes:hover::before{background:linear-gradient(90deg,transparent,rgba(255,204,102,.8),transparent)}

/* Expiring Section */
.expiring-section{margin-bottom:24px}
.expiring-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.expiring-card{background:var(--glass);border:1px solid var(--border);border-radius:14px;padding:16px}
.expiring-card h3{margin:0 0 12px 0;font-size:14px}
.expiring-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
.expiring-item:last-child{border-bottom:none}
.expiring-date{font-size:13px;color:var(--muted);min-width:50px;font-weight:500}
.expiring-date.expired{color:var(--danger)}
.expiring-date.today{color:var(--warn)}
.expiring-name{font-size:14px}

/* Empty State */
.empty-state{padding:40px;text-align:center}

/* Navigation */
.nav-toggle{display:none;background:none;border:1px solid var(--border);color:var(--text);padding:8px 12px;border-radius:8px;font-size:18px;cursor:pointer}
.nav-menu{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px;padding:12px 0;border-top:1px solid var(--border)}
.nav-menu a{padding:8px 12px;border-radius:8px;font-size:14px;transition:all .2s;text-decoration:none}
.nav-menu a:hover{background:rgba(255,255,255,.08);text-decoration:none}
.nav-menu a.active{background:rgba(102,178,255,.15);color:var(--accent)}
.logout-btn{padding:8px 12px !important;border-radius:8px !important;font-size:14px !important}
.logout-btn:hover{background:rgba(255,92,122,.15)}

@media (max-width:700px){
    .nav-toggle{display:block}
    .nav-menu{display:none;flex-direction:column;align-items:stretch;gap:4px}
    .nav-menu.open{display:flex}
    .nav-menu a,.logout-btn{text-align:left;width:100%}
}

@media (max-width:600px){
    .hero-section{flex-direction:column;align-items:flex-start;padding:20px 0}
    .weather-cards{width:100%}
    .weather-card{flex:1;min-width:140px}
    .clock-time{font-size:52px}
    .clock-greeting{font-size:18px}
    .quick-links-grid{grid-template-columns:repeat(auto-fill,minmax(75px,1fr))}
    .modules-grid{grid-template-columns:1fr}
    .sun-info{justify-content:center}
}

/* Safe area for PWA */
@supports(padding: max(0px)){
    .container{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right));padding-bottom:max(20px,env(safe-area-inset-bottom))}
}

/* Scrollbar styling */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}

/* Focus styles for accessibility */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Selection */
::selection{background:rgba(102,178,255,.3);color:var(--text)}

/* ========================================
   NEW IMPROVED STYLES
   ======================================== */

/* Page Headers */
.page-header{display:flex;align-items:center;justify-content:space-between;padding:24px 0;flex-wrap:wrap;gap:16px;border-bottom:1px solid var(--border);margin-bottom:24px}
.page-header-content{display:flex;align-items:center;gap:16px}
.page-icon{font-size:42px;line-height:1}
.page-title{margin:0;font-size:28px;font-weight:600}
.page-subtitle{margin:4px 0 0;font-size:14px;color:var(--muted)}
.page-header-actions{display:flex;gap:10px;flex-wrap:wrap}

/* Stats Row */
.stats-row{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.stat-card{flex:1;min-width:120px;padding:16px 20px;background:var(--glass);border:1px solid var(--border);border-radius:12px;text-align:center}
.stat-value{display:block;font-size:32px;font-weight:600;line-height:1}
.stat-label{display:block;font-size:12px;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.5px}
.stat-card.stat-warning{border-color:rgba(255,204,102,.4);background:rgba(255,204,102,.08)}
.stat-card.stat-warning .stat-value{color:var(--warn)}
.stat-card.stat-success{border-color:rgba(61,220,151,.4);background:rgba(61,220,151,.08)}
.stat-card.stat-success .stat-value{color:var(--ok)}
.stat-card.stat-info{border-color:rgba(102,178,255,.4);background:rgba(102,178,255,.08)}
.stat-card.stat-info .stat-value{color:var(--accent)}

/* Enhanced Tables */
.table-responsive{overflow-x:auto;margin:0 -20px;padding:0 20px}
.table-hover tbody tr{transition:background .2s}
.table-hover tbody tr:hover{background:rgba(255,255,255,.04)}
.text-center{text-align:center}
.text-right{text-align:right}

/* Item Cells */
.item-cell{display:flex;flex-direction:column;gap:4px}
.item-name{font-size:15px}
.item-name.item-strikethrough{text-decoration:line-through;opacity:.6}
.item-meta{display:flex;gap:8px;flex-wrap:wrap}
.meta-tag{font-size:11px;color:var(--muted);background:rgba(255,255,255,.05);padding:2px 8px;border-radius:4px}
.item-notes{font-size:12px;color:var(--muted);font-style:italic}

/* Badges */
.quantity-badge{display:inline-block;padding:4px 10px;background:rgba(255,255,255,.08);border-radius:6px;font-size:13px}
.date-badge{display:inline-flex;flex-direction:column;align-items:center;gap:2px;padding:4px 10px;border-radius:6px;font-size:13px;background:rgba(255,255,255,.05)}
.date-badge small{font-size:9px;font-weight:700;letter-spacing:.5px}
.date-badge.date-expired{background:rgba(255,92,122,.15);color:var(--danger)}
.date-badge.date-warning{background:rgba(255,204,102,.15);color:var(--warn)}
.status-badge{display:inline-block;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:500}
.status-badge.status-ok{background:rgba(61,220,151,.15);color:var(--ok);border:1px solid rgba(61,220,151,.3)}
.status-badge.status-active{background:rgba(102,178,255,.15);color:var(--accent);border:1px solid rgba(102,178,255,.3)}
.status-badge.status-pending{background:rgba(255,204,102,.15);color:var(--warn);border:1px solid rgba(255,204,102,.3)}
.order-badge{display:inline-block;padding:4px 8px;background:rgba(255,255,255,.08);border-radius:4px;font-size:12px;font-family:monospace}

/* Priority */
.priority-badge{font-size:12px}

/* Action Buttons */
.action-buttons{display:flex;gap:6px;justify-content:flex-end}
.btn-action{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid var(--border);background:transparent;cursor:pointer;transition:all .2s;font-size:14px}
.btn-action:hover{background:rgba(255,255,255,.1);transform:scale(1.1)}
.btn-action.btn-action-success{border-color:rgba(61,220,151,.4)}
.btn-action.btn-action-success:hover{background:rgba(61,220,151,.2)}
.btn-action.btn-action-danger{border-color:rgba(255,92,122,.4)}
.btn-action.btn-action-danger:hover{background:rgba(255,92,122,.2)}
.btn-action.btn-action-warning{border-color:rgba(255,204,102,.4)}
.btn-action.btn-action-warning:hover{background:rgba(255,204,102,.2)}

/* Row States */
.row-consumed{opacity:.5}
.row-expired{background:rgba(255,92,122,.05)}

/* Empty States */
.empty-state{padding:60px 20px;text-align:center}
.empty-state .empty-icon{font-size:64px;margin-bottom:16px;opacity:.5}
.empty-state h3{margin:0 0 8px;font-size:20px}
.empty-state p{margin:0 0 20px;color:var(--muted)}
.empty-state-large{padding:80px 20px;text-align:center;background:var(--glass);border:1px dashed var(--border);border-radius:16px;margin-bottom:20px}
.empty-state-large .empty-icon{font-size:80px;margin-bottom:20px}
.empty-state-large h3{margin:0 0 12px;font-size:24px}
.empty-state-large p{margin:0 0 24px;color:var(--muted);font-size:15px}
.empty-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Pagination */
.pagination-wrapper{margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}

/* Button Improvements */
.btn-primary{background:linear-gradient(135deg,rgba(102,178,255,.25),rgba(102,178,255,.15));border-color:rgba(102,178,255,.5)}
.btn-primary:hover{background:linear-gradient(135deg,rgba(102,178,255,.35),rgba(102,178,255,.25))}
.btn-lg{padding:14px 24px;font-size:15px}
.btn-icon{margin-right:6px}

/* Form Card */
.form-card{max-width:700px}
.form-modern{display:flex;flex-direction:column;gap:0}
.form-section{padding:20px 0;border-bottom:1px solid var(--border)}
.form-section:first-child{padding-top:0}
.form-section:last-of-type{border-bottom:none}
.form-section-title{margin:0 0 16px;font-size:15px;color:var(--muted);font-weight:500}
.form-label{display:block;margin-bottom:8px;font-size:13px;color:var(--text);font-weight:500}
.form-input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--border);background:rgba(0,0,0,.25);color:var(--text);font-size:14px;transition:all .2s}
.form-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(102,178,255,.15)}
.form-input::placeholder{color:var(--muted);opacity:.7}
.form-input-lg{font-size:18px;padding:14px 16px}
.form-input-code{font-size:24px;text-align:center;letter-spacing:8px;font-family:monospace}
.form-input-emoji{font-size:24px}
.form-textarea{min-height:200px;resize:vertical;font-family:inherit;line-height:1.6}
.form-hint{display:block;margin-top:6px;font-size:12px;color:var(--muted)}
.form-error{color:var(--danger);font-size:12px;margin-top:6px}
.form-row-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:600px){.form-row-2{grid-template-columns:1fr}}
.form-actions{display:flex;gap:12px;margin-top:24px;padding-top:20px;border-top:1px solid var(--border)}

/* Color Picker */
.color-picker{display:flex;gap:8px;flex-wrap:wrap}
.color-option{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer}
.color-option input{position:absolute;opacity:0;pointer-events:none}
.color-swatch{font-size:24px;padding:8px;border-radius:8px;border:2px solid transparent;transition:all .2s}
.color-option input:checked + .color-swatch{border-color:var(--accent);box-shadow:0 0 0 2px rgba(102,178,255,.3)}
.color-label{font-size:11px;color:var(--muted)}
.color-picker-inline{display:flex;gap:6px}
.color-option-small{cursor:pointer}
.color-option-small input{position:absolute;opacity:0;pointer-events:none}
.color-dot{display:block;width:28px;height:28px;border-radius:50%;border:2px solid transparent;transition:all .2s}
.color-option-small input:checked + .color-dot{border-color:var(--text);transform:scale(1.15)}
.color-dot.color-default{background:linear-gradient(135deg,var(--glass),rgba(255,255,255,.15))}
.color-dot.color-blue{background:linear-gradient(135deg,rgba(102,178,255,.5),rgba(102,178,255,.3))}
.color-dot.color-green{background:linear-gradient(135deg,rgba(61,220,151,.5),rgba(61,220,151,.3))}
.color-dot.color-red{background:linear-gradient(135deg,rgba(255,92,122,.5),rgba(255,92,122,.3))}
.color-dot.color-yellow{background:linear-gradient(135deg,rgba(255,204,102,.5),rgba(255,204,102,.3))}
.color-dot.color-purple{background:linear-gradient(135deg,rgba(180,130,255,.5),rgba(180,130,255,.3))}
.color-dot.color-orange{background:linear-gradient(135deg,rgba(255,150,80,.5),rgba(255,150,80,.3))}

/* Checkbox Modern */
.checkbox-modern{display:flex;align-items:center;gap:12px;cursor:pointer;padding:12px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid var(--border);transition:all .2s}
.checkbox-modern:hover{background:rgba(255,255,255,.06)}
.checkbox-modern input{position:absolute;opacity:0}
.checkbox-box{width:22px;height:22px;border-radius:6px;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;transition:all .2s}
.checkbox-modern input:checked + .checkbox-box{background:var(--accent);border-color:var(--accent)}
.checkbox-modern input:checked + .checkbox-box::after{content:'✓';color:var(--bg);font-size:14px;font-weight:bold}
.checkbox-text{font-size:14px}

/* Notes Masonry */
.notes-container{margin-bottom:20px}
.notes-masonry{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.note-card{position:relative;padding:18px;background:var(--glass);border:1px solid var(--border);border-radius:14px;transition:all .3s}
.note-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.2)}
.note-card.note-pinned{border-color:rgba(255,204,102,.5)}
.note-pin{position:absolute;top:12px;right:12px;font-size:16px}
.note-title{margin:0 0 10px;font-size:16px;font-weight:600;padding-right:24px}
.note-content{font-size:14px;color:var(--muted);line-height:1.6;max-height:150px;overflow:hidden;word-break:break-word}
.note-footer{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.note-date{font-size:12px;color:var(--muted)}
.note-actions{display:flex;gap:8px}
.note-action-btn{background:none;border:none;cursor:pointer;font-size:16px;padding:4px;opacity:.6;transition:opacity .2s}
.note-action-btn:hover{opacity:1}
.note-action-danger:hover{filter:brightness(1.2)}

/* Links Visual Grid */
.links-visual-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px;margin-bottom:24px}
.link-visual-card{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px 12px;background:var(--glass);border:1px solid var(--border);border-radius:14px;text-decoration:none;transition:all .25s;min-height:100px}
.link-visual-card:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 12px 32px rgba(0,0,0,.25);text-decoration:none}
.link-visual-icon{font-size:32px;margin-bottom:8px;transition:transform .2s}
.link-visual-card:hover .link-visual-icon{transform:scale(1.15)}
.link-visual-title{font-size:13px;color:var(--text);font-weight:500;text-align:center;margin-bottom:4px}
.link-visual-url{font-size:10px;color:var(--muted);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.link-visual-card.link-add{border-style:dashed;opacity:.5}
.link-visual-card.link-add:hover{opacity:1}
.section-subtitle{margin:0 0 16px;font-size:14px;color:var(--muted)}

/* Link Table */
.link-table-icon{font-size:24px}
.link-color-indicator{display:inline-block;width:8px;height:8px;border-radius:50%;margin-left:8px;vertical-align:middle}
.link-url-cell{display:inline-flex;align-items:center;gap:4px;color:var(--muted);font-size:13px}
.link-url-cell:hover{color:var(--accent)}
.external-icon{font-size:11px;opacity:.5}

/* Link Preview */
.link-preview-container{display:flex;justify-content:center;padding:20px}
.link-preview{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 20px;background:var(--glass);border:1px solid var(--border);border-radius:14px;min-width:120px;min-height:110px;transition:all .3s}
.link-preview-icon{font-size:36px;margin-bottom:10px}
.link-preview-title{font-size:14px;font-weight:500}

/* Security Page */
.security-card{max-width:700px}
.security-header{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px}
.security-icon{font-size:36px}
.security-title{margin:0;font-size:20px;font-weight:600}
.security-desc{margin:4px 0 0;font-size:14px;color:var(--muted)}
.security-status{margin-bottom:24px}
.status-card{display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:12px;border:1px solid var(--border)}
.status-card.status-success{background:rgba(61,220,151,.08);border-color:rgba(61,220,151,.3)}
.status-card.status-warning{background:rgba(255,204,102,.08);border-color:rgba(255,204,102,.3)}
.status-card.status-danger{background:rgba(255,92,122,.08);border-color:rgba(255,92,122,.3)}
.status-icon{font-size:28px}
.status-text strong{display:block;font-size:15px;margin-bottom:2px}
.status-text span{font-size:13px;color:var(--muted)}
.security-action-box{padding:20px;background:rgba(255,255,255,.03);border-radius:12px;border:1px solid var(--border)}
.security-action-box p{margin:0 0 16px;color:var(--muted);font-size:14px;line-height:1.6}
.security-setup-box{padding:24px;background:rgba(255,255,255,.03);border-radius:12px;border:1px solid var(--border)}
.setup-title{margin:0 0 16px;font-size:16px}
.setup-steps{margin:0 0 24px 20px;padding:0;color:var(--muted);line-height:2}
.qr-container{display:flex;justify-content:center;margin:24px 0}
.qr-code{background:#fff;padding:16px;border-radius:12px;display:inline-block}
.qr-code svg{display:block;width:200px;height:200px}
.confirm-form{max-width:300px;margin:0 auto}
.confirm-form .form-group{margin-bottom:16px}
.security-recovery-box{padding:24px;background:rgba(255,255,255,.03);border-radius:12px;border:1px solid var(--border)}
.recovery-title{margin:0 0 12px;font-size:16px}
.recovery-warning{padding:12px 16px;background:rgba(255,204,102,.1);border:1px solid rgba(255,204,102,.3);border-radius:8px;font-size:13px;margin-bottom:20px;line-height:1.5}
.recovery-codes{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;margin-bottom:20px}
.recovery-code{padding:10px 14px;background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:8px;font-size:14px;text-align:center}
.recovery-actions{display:flex;gap:12px;flex-wrap:wrap}
.account-info{display:flex;flex-direction:column;gap:12px}
.info-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border)}
.info-row:last-child{border-bottom:none}
.info-label{color:var(--muted);font-size:14px}
.info-value{font-weight:500}

/* Mobile Responsive */
@media(max-width:600px){
    .page-header{padding:16px 0}
    .page-icon{font-size:32px}
    .page-title{font-size:22px}
    .stats-row{flex-direction:column}
    .stat-card{min-width:100%}
    .form-actions{flex-direction:column}
    .form-actions .btn{width:100%;text-align:center}
    .notes-masonry{grid-template-columns:1fr}
    .links-visual-grid{grid-template-columns:repeat(auto-fill,minmax(90px,1fr))}
    .security-header{flex-direction:column;text-align:center}
    .status-card{flex-direction:column;text-align:center}
    .recovery-actions{justify-content:center}
}

/* ========================================
   APP LAYOUT WITH SIDEBAR
   ======================================== */

.app-layout{display:flex;min-height:100vh}

/* Sidebar */
.sidebar{position:fixed;top:0;left:0;bottom:0;width:260px;background:linear-gradient(180deg,rgba(15,26,46,.98),rgba(11,18,32,.99));border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:100;transform:translateX(0);transition:transform .3s ease}

.sidebar-header{padding:20px;border-bottom:1px solid var(--border)}
.sidebar-header .brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:700;color:var(--text);text-decoration:none}
.sidebar-header .brand:hover{text-decoration:none}
.brand-icon{font-size:28px}
.brand-text{background:linear-gradient(135deg,var(--text),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.sidebar-nav{flex:1;overflow-y:auto;padding:16px 0}
.nav-section{margin-bottom:20px}
.nav-label{padding:8px 20px;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:600}
.nav-item{display:flex;align-items:center;gap:12px;padding:12px 20px;color:var(--muted);text-decoration:none;transition:all .2s;border-left:3px solid transparent;margin:2px 0}
.nav-item:hover{background:rgba(255,255,255,.05);color:var(--text);text-decoration:none}
.nav-item.active{background:rgba(102,178,255,.1);color:var(--accent);border-left-color:var(--accent)}
.nav-icon{font-size:18px;width:24px;text-align:center}
.nav-text{font-size:14px;font-weight:500}

.sidebar-footer{padding:16px 20px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px}
.user-info{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.user-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--ok));display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;text-transform:uppercase;flex-shrink:0}
.user-details{min-width:0}
.user-email{font-size:12px;color:var(--muted);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.logout-btn{background:none;border:none;font-size:20px;cursor:pointer;padding:8px;border-radius:8px;transition:background .2s}
.logout-btn:hover{background:rgba(255,92,122,.15)}

/* Main Content */
.main-content{flex:1;margin-left:260px;min-height:100vh;display:flex;flex-direction:column}
.content-wrapper{flex:1;padding:24px 32px;max-width:1400px;width:100%}

/* Mobile Header */
.mobile-header{display:none;position:sticky;top:0;z-index:50;padding:16px 20px;background:rgba(11,18,32,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);align-items:center;justify-content:space-between}
.mobile-header .brand{font-size:18px;font-weight:700;color:var(--text);text-decoration:none}
.menu-toggle{background:none;border:1px solid var(--border);color:var(--text);padding:8px 12px;border-radius:8px;font-size:18px;cursor:pointer}

/* Mobile Bottom Nav */
.mobile-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:rgba(15,26,46,.98);backdrop-filter:blur(10px);border-top:1px solid var(--border);padding:8px 0;padding-bottom:max(8px,env(safe-area-inset-bottom));z-index:100}
.mobile-nav{display:none;grid-template-columns:repeat(6,1fr)}
.mobile-nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;color:var(--muted);text-decoration:none;font-size:10px;transition:color .2s}
.mobile-nav-item:hover,.mobile-nav-item.active{color:var(--accent);text-decoration:none}
.mobile-nav-item .nav-icon{font-size:20px}
.mobile-nav-item .nav-text{font-size:10px}

/* Sidebar Overlay */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:99}

/* Toast Notifications */
.toast{position:fixed;top:20px;right:20px;padding:14px 20px;background:rgba(61,220,151,.15);border:1px solid rgba(61,220,151,.4);border-radius:12px;color:var(--ok);display:flex;align-items:center;gap:10px;z-index:1000;animation:slideIn .3s ease}
.toast-success{background:rgba(61,220,151,.15);border-color:rgba(61,220,151,.4);color:var(--ok)}
.toast-icon{font-size:18px}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
.animate-slide-in{animation:slideIn .3s ease}

/* Alert Box */
.alert{padding:16px 20px;border-radius:12px;margin-bottom:20px;border:1px solid var(--border)}
.alert h4{margin:0 0 8px;font-size:15px}
.alert ul{margin:8px 0 0;padding-left:20px}
.alert-danger{background:rgba(255,92,122,.1);border-color:rgba(255,92,122,.3)}

/* Responsive */
@media(max-width:1024px){
    .sidebar{transform:translateX(-100%)}
    .sidebar.mobile-open{transform:translateX(0)}
    .sidebar.mobile-open + .main-content .sidebar-overlay{display:block}
    .main-content{margin-left:0}
    .mobile-header{display:flex}
    .mobile-nav{display:grid}
    .content-wrapper{padding:20px 16px;padding-bottom:100px}
    .sidebar-overlay{display:none}
    .sidebar.mobile-open ~ .sidebar-overlay{display:block}
}

/* Utility Classes */
.text-white{color:var(--text)}
.text-secondary{color:var(--muted)}
.text-primary{color:var(--accent)}
.text-danger{color:var(--danger)}
.text-muted{color:var(--muted)}
.text-xs{font-size:12px}
.text-sm{font-size:14px}
.text-lg{font-size:18px}
.text-xl{font-size:20px}
.text-2xl{font-size:24px}
.text-center{text-align:center}
.font-bold{font-weight:700}
.font-mono{font-family:'JetBrains Mono',Consolas,monospace}

.flex{display:flex}
.flex-col{flex-direction:column}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.justify-end{justify-content:end}
.gap-2{gap:8px}
.gap-3{gap:12px}
.gap-4{gap:16px}

.grid{display:grid}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:768px){
    .md\:flex-row{flex-direction:row}
    .md\:items-center{align-items:center}
    .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
    .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(min-width:1024px){
    .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
    .lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
}

.p-4{padding:16px}
.p-6{padding:24px}
.mb-2{margin-bottom:8px}
.mb-4{margin-bottom:16px}
.mb-6{margin-bottom:24px}
.mt-4{margin-top:16px}
.mt-6{margin-top:24px}
.mt-8{margin-top:32px}
.mt-auto{margin-top:auto}
.pt-4{padding-top:16px}
.pb-4{padding-bottom:16px}
.mx-auto{margin-left:auto;margin-right:auto}
.max-w-2xl{max-width:672px}
.max-w-sm{max-width:384px}
.w-full{width:100%}

.space-y-6>*+*{margin-top:24px}

.border-t{border-top:1px solid var(--border)}
.border-b{border-bottom:1px solid var(--border)}
.border-white\/10{border-color:rgba(255,255,255,.1)}
.border-dashed{border-style:dashed}
.border-slate-700{border-color:rgba(255,255,255,.15)}

.rounded-xl{border-radius:12px}

.bg-slate-800{background:rgba(30,41,59,.5)}
.bg-slate-800\/30{background:rgba(30,41,59,.3)}
.bg-slate-700{background:rgba(51,65,85,.5)}
.bg-slate-900\/50{background:rgba(15,23,42,.5)}

.opacity-0{opacity:0}
.opacity-50{opacity:.5}
.group:hover .group-hover\:opacity-100{opacity:1}
.group:hover .group-hover\:scale-110{transform:scale(1.1)}

.transition-colors{transition:color .2s,background-color .2s,border-color .2s}
.transition-transform{transition:transform .2s}
.transition-opacity{transition:opacity .2s}
.duration-300{transition-duration:.3s}

.hover\:-translate-y-1:hover{transform:translateY(-4px)}
.hover\:bg-slate-800:hover{background:rgba(30,41,59,.5)}
.hover\:text-white:hover{color:var(--text)}
.hover\:text-red-400:hover{color:#f87171}

.relative{position:relative}
.absolute{position:absolute}
.inset-0{inset:0}
.top-2{top:8px}
.right-2{right:8px}
.z-0{z-index:0}
.z-10{z-index:10}

.inline{display:inline}
.inline-flex{display:inline-flex}
.col-span-full{grid-column:1/-1}
.aspect-square{aspect-ratio:1/1}

.whitespace-pre-wrap{white-space:pre-wrap}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leading-relaxed{line-height:1.625}

.cursor-pointer{cursor:pointer}
.pointer-events-none{pointer-events:none}

.py-20{padding-top:80px;padding-bottom:80px}

.rounded{border-radius:4px}

/* Form Checkbox */
.form-checkbox{appearance:none;width:20px;height:20px;border:2px solid var(--border);border-radius:4px;background:rgba(0,0,0,.2);cursor:pointer;transition:all .2s}
.form-checkbox:checked{background:var(--accent);border-color:var(--accent)}
.form-checkbox:checked::after{content:'✓';display:flex;align-items:center;justify-content:center;color:var(--bg);font-size:12px;font-weight:bold}
.form-checkbox:focus{box-shadow:0 0 0 3px rgba(102,178,255,.2)}

/* Primary Colors Adjustments */
.text-primary-300{color:#93c5fd}

/* ===========================================
   NEW STARTPAGE LAYOUT STYLES
   =========================================== */

.startpage{max-width:1200px;margin:0 auto;padding:0 16px}

/* Hero Compact */
.hero-compact{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;flex-wrap:wrap}
.hero-left{text-align:left}
.hero-right{flex:1;max-width:400px}
.clock-big{font-size:64px;font-weight:200;letter-spacing:-2px;line-height:1;background:linear-gradient(135deg,#fff 0%,var(--accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.clock-date{font-size:14px;color:var(--muted);margin-top:4px;text-transform:capitalize}
.greeting{font-size:18px;margin-bottom:12px;color:var(--text);font-weight:500}
.search-box{display:flex;gap:8px}
.search-input{flex:1;padding:12px 16px;border-radius:12px;border:1px solid var(--border);background:rgba(0,0,0,.2);color:var(--text);font-size:14px}
.search-input:focus{outline:none;border-color:var(--accent)}
.search-btn{padding:12px 20px;border-radius:12px;border:none;background:var(--accent);color:var(--bg);font-weight:600;cursor:pointer;transition:all .2s}
.search-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}

/* Weather Row */
.weather-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px}
.weather-card-new{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:14px;border:1px solid var(--border);background:var(--glass)}
.weather-card-new.home{border-color:rgba(102,178,255,.3);background:linear-gradient(135deg,rgba(102,178,255,.1),transparent)}
.weather-card-new.work{border-color:rgba(180,130,255,.3);background:linear-gradient(135deg,rgba(180,130,255,.1),transparent)}
.weather-icon-big{font-size:36px}
.weather-info{display:flex;flex-direction:column}
.weather-temp-big{font-size:28px;font-weight:600;line-height:1}
.weather-location-tag{font-size:11px;color:var(--muted);margin-top:2px}
.weather-details{margin-left:auto;text-align:right}
.temp-range{font-size:13px;color:var(--muted)}
.weather-desc-small{font-size:11px;color:var(--muted);display:block}

/* Sections */
.section{margin-bottom:28px}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:12px}
.section-title{margin:0;font-size:16px;font-weight:600;display:flex;align-items:center;gap:8px}
.section-action{font-size:13px;color:var(--accent)}
.section-badge{font-size:11px;padding:4px 10px;border-radius:999px;background:rgba(255,204,102,.15);color:var(--warn);font-weight:500}

/* Quick Links Compact */
.links-grid-compact{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:10px}
.quick-link-compact{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px 8px;background:var(--glass);border:1px solid var(--border);border-radius:12px;text-decoration:none;transition:all .2s}
.quick-link-compact:hover{background:rgba(255,255,255,.1);transform:translateY(-2px);text-decoration:none}
.quick-link-compact.add-new{border-style:dashed;opacity:.6}
.quick-link-compact.add-new:hover{opacity:1}
.link-icon-big{font-size:28px;margin-bottom:4px}
.link-label{font-size:11px;color:var(--text);text-align:center;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.empty-box{text-align:center;padding:32px;background:var(--glass);border:1px dashed var(--border);border-radius:14px}

/* Work Tools Grid */
.work-section{background:linear-gradient(135deg,rgba(0,82,147,.15),transparent);border-radius:16px;padding:20px;border:1px solid rgba(0,82,147,.3)}
.work-tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px}
.tool-card{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 10px;background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:12px;text-decoration:none;transition:all .2s}
.tool-card:hover{background:rgba(255,255,255,.1);transform:translateY(-2px);text-decoration:none}
.tool-card.swisscom:hover{border-color:rgba(0,82,147,.6)}
.tool-icon{font-size:26px;margin-bottom:6px}
.tool-name{font-size:12px;color:var(--text);text-align:center}

/* Military Section */
.military-section{background:linear-gradient(135deg,rgba(34,139,34,.12),transparent);border-radius:16px;padding:20px;border:1px solid rgba(34,139,34,.3)}
.military-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px}
.tool-card.military:hover{border-color:rgba(34,139,34,.6)}
.countdown-box{display:flex;align-items:center;gap:16px;margin-top:16px;padding:12px 16px;background:rgba(255,255,255,.05);border-radius:10px;border:1px solid rgba(255,204,102,.3);flex-wrap:wrap}
.countdown-label{font-size:12px;color:var(--muted)}
.countdown-date{font-weight:600;color:var(--text)}
.countdown-days{font-size:14px;color:var(--warn);font-weight:600}
.countdown-link{margin-left:auto;font-size:12px;color:var(--accent)}

/* Utilities Grid */
.utilities-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.utility-card{padding:16px;background:var(--glass);border:1px solid var(--border);border-radius:14px}
.utility-card.transport{border-color:rgba(102,178,255,.3)}
.utility-card.finance{border-color:rgba(61,220,151,.3)}
.utility-card.services{border-color:rgba(255,150,80,.3)}
.utility-card.govt{border-color:rgba(180,130,255,.3)}
.utility-header{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.utility-icon{font-size:22px}
.utility-title{font-size:14px;font-weight:600}
.utility-links{display:flex;flex-direction:column;gap:6px}
.utility-links a{font-size:13px;color:var(--accent);transition:color .2s}
.utility-links a:hover{color:var(--text)}

/* Dashboard Grid */
.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:28px}
.dashboard-card{background:var(--glass);border:1px solid var(--border);border-radius:16px;padding:20px}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.card-title{margin:0;font-size:16px;font-weight:600}
.card-action{font-size:13px;color:var(--accent)}

/* Quick Add Form */
.quick-add-form{display:flex;gap:8px;margin-bottom:16px}
.quick-add-input{flex:1;padding:10px 14px;border-radius:10px;border:1px solid var(--border);background:rgba(0,0,0,.2);color:var(--text);font-size:13px}
.quick-add-input:focus{outline:none;border-color:var(--accent)}
.quick-add-btn{width:40px;height:40px;border-radius:10px;border:none;background:var(--accent);color:var(--bg);font-size:20px;font-weight:bold;cursor:pointer;transition:all .2s}
.quick-add-btn:hover{filter:brightness(1.1)}

/* Tasks List */
.tasks-list{display:flex;flex-direction:column;gap:8px}
.task-item{display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(0,0,0,.15);border-radius:10px;border:1px solid transparent}
.task-item.overdue{border-left:3px solid var(--danger)}
.task-item.done{opacity:.6}
.task-item.done .task-title{text-decoration:line-through;color:var(--muted)}
.task-check-form{margin:0}
.task-check{width:22px;height:22px;border-radius:50%;border:2px solid var(--border);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--ok);transition:all .2s}
.task-check:hover{border-color:var(--ok)}
.task-check.checked{background:var(--ok);border-color:var(--ok);color:var(--bg)}
.task-title{flex:1;font-size:14px}
.priority-dot{width:8px;height:8px;border-radius:50%}
.priority-dot.high{background:var(--danger)}
.task-due{font-size:11px;color:var(--muted);padding:2px 8px;background:rgba(255,255,255,.05);border-radius:4px}
.empty-tasks{text-align:center;padding:24px;color:var(--muted)}
.empty-tasks span{font-size:32px;display:block;margin-bottom:8px}

/* Stats Grid */
.stats-grid-new{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.stat-box{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px 12px;background:var(--glass);border:1px solid var(--border);border-radius:14px;text-decoration:none;transition:all .2s;position:relative}
.stat-box:hover{background:rgba(255,255,255,.08);transform:translateY(-2px);text-decoration:none}
.stat-box.pantry:hover{border-color:rgba(255,150,80,.5)}
.stat-box.freezer:hover{border-color:rgba(102,178,255,.5)}
.stat-box.shopping:hover{border-color:rgba(61,220,151,.5)}
.stat-box.tasks:hover{border-color:rgba(255,204,102,.5)}
.stat-box.recipes:hover{border-color:rgba(255,130,180,.5)}
.stat-box.documents:hover{border-color:rgba(180,130,255,.5)}
.stat-icon{font-size:28px;margin-bottom:6px}
.stat-data{text-align:center}
.stat-number{display:block;font-size:26px;font-weight:600;line-height:1}
.stat-name{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.stat-alert{position:absolute;top:8px;right:8px;font-size:11px;font-weight:700;padding:2px 6px;border-radius:999px;background:var(--danger);color:#fff}
.stat-alert.warn{background:var(--warn);color:var(--bg)}

/* Alerts Section */
.alerts-section{background:linear-gradient(135deg,rgba(255,92,122,.1),transparent);border-radius:16px;padding:20px;border:1px solid rgba(255,92,122,.3)}
.alerts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.alert-box{padding:14px;background:rgba(0,0,0,.15);border-radius:12px}
.alert-box h4{margin:0 0 10px;font-size:14px}
.alert-item{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:13px}
.alert-item:last-child{border-bottom:none}
.alert-date{color:var(--danger);font-weight:500}

/* Notes Row */
.notes-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.note-preview{display:block;padding:14px;background:rgba(255,204,102,.08);border:1px solid rgba(255,204,102,.3);border-radius:12px;text-decoration:none;transition:all .2s}
.note-preview:hover{background:rgba(255,204,102,.15);text-decoration:none}
.note-preview strong{display:block;font-size:14px;color:var(--text);margin-bottom:6px}
.note-preview p{margin:0;font-size:12px;color:var(--muted);line-height:1.4}

/* Responsive */
@media (max-width:768px){
    .hero-compact{flex-direction:column;align-items:flex-start}
    .hero-right{max-width:100%;width:100%}
    .clock-big{font-size:48px}
    .weather-row{grid-template-columns:1fr}
    .dashboard-grid{grid-template-columns:1fr}
    .stats-grid-new{grid-template-columns:repeat(2,1fr)}
    .utilities-grid{grid-template-columns:1fr}
}

@media (max-width:480px){
    .links-grid-compact{grid-template-columns:repeat(4,1fr)}
    .work-tools-grid{grid-template-columns:repeat(4,1fr)}
    .military-grid{grid-template-columns:repeat(4,1fr)}
    .stats-grid-new{grid-template-columns:repeat(2,1fr)}
}