/* ── Reset & Base ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0d1117;--bg2:#161b22;--bg3:#1c2230;
  --border:rgba(255,255,255,0.08);
  --text:#e6edf3;--text-muted:#8b949e;
  --accent:#7c3aed;--accent2:#a78bfa;
  --green:#22c55e;--green-bg:rgba(34,197,94,0.12);--green-border:rgba(34,197,94,0.35);
  --yellow:#eab308;--yellow-bg:rgba(234,179,8,0.12);--yellow-border:rgba(234,179,8,0.35);
  --red:#ef4444;--red-bg:rgba(239,68,68,0.12);--red-border:rgba(239,68,68,0.4);
  --blue:#3b82f6;--blue-bg:rgba(59,130,246,0.12);--blue-border:rgba(59,130,246,0.35);
  --orange:#f97316;--orange-bg:rgba(249,115,22,0.12);--orange-border:rgba(249,115,22,0.4);
}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}
.screen{min-height:100vh}
.muted-small{font-size:12px;color:var(--text-muted)}
.text-muted{color:var(--text-muted);font-size:13px}

/* ── Auth ── */
.auth-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:radial-gradient(ellipse at top,#1a0533 0%,#0d1117 70%);position:relative;overflow:hidden}
.auth-glow{position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,0.15),transparent 70%);top:-100px;left:50%;transform:translateX(-50%);pointer-events:none}
.auth-card{background:var(--bg2);border:1px solid var(--border);border-radius:24px;padding:40px 36px;width:100%;max-width:420px;box-shadow:0 30px 80px rgba(0,0,0,0.6);position:relative;z-index:1}
.auth-logo{text-align:center;margin-bottom:32px}
.auth-logo-icon{font-size:48px;display:block;margin-bottom:12px;animation:ring 3s ease-in-out infinite}
@keyframes ring{0%,100%{transform:rotate(0)}10%{transform:rotate(-15deg)}20%{transform:rotate(15deg)}50%{transform:rotate(0)}}
.auth-logo-text{font-size:28px;font-weight:900;background:linear-gradient(90deg,#a78bfa,#60a5fa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.auth-tagline{font-size:13px;color:var(--text-muted);margin-top:4px}
.auth-tabs{display:flex;gap:0;margin-bottom:24px;background:var(--bg3);border-radius:12px;padding:4px}
.auth-tab{flex:1;padding:10px;border:none;background:none;color:var(--text-muted);font-size:14px;font-weight:600;border-radius:10px;cursor:pointer;transition:all .2s}
.auth-tab.active{background:var(--accent);color:#fff;box-shadow:0 0 20px rgba(124,58,237,0.4)}
.btn-auth-submit{width:100%;padding:14px;background:linear-gradient(135deg,#7c3aed,#4f46e5);border:none;color:#fff;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;margin-top:8px;transition:all .2s;box-shadow:0 0 20px rgba(124,58,237,0.4)}
.btn-auth-submit:hover{transform:translateY(-2px);box-shadow:0 0 30px rgba(124,58,237,0.6)}
.auth-divider{text-align:center;margin:20px 0;color:var(--text-muted);font-size:12px;position:relative}
.auth-divider::before,.auth-divider::after{content:'';position:absolute;top:50%;width:40%;height:1px;background:var(--border)}
.auth-divider::before{left:0}.auth-divider::after{right:0}
.auth-error{background:rgba(239,68,68,0.12);border:1px solid rgba(239,68,68,0.35);color:#fca5a5;padding:10px 14px;border-radius:10px;font-size:13px;margin-bottom:16px;text-align:center}
.auth-hint{font-size:11px;color:var(--text-muted);text-align:center;margin-top:10px;line-height:1.4}
.google-signin-wrap{width:100%;display:flex;justify-content:center}
.google-signin-wrap iframe{margin:0 auto!important}
.btn-google:disabled{opacity:0.6;cursor:not-allowed}
.btn-auth-submit:disabled{opacity:0.7;cursor:not-allowed;transform:none!important}
.btn-google{width:100%;padding:12px;background:var(--bg3);border:1px solid var(--border);color:var(--text);border-radius:12px;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:all .2s}
.btn-google:hover{border-color:var(--accent2);transform:translateY(-1px)}

/* ── Form shared ── */
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:12px;font-weight:600;color:var(--text-muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}
.form-group input,.form-group select,.form-group textarea{width:100%;background:var(--bg3);border:1px solid var(--border);color:var(--text);padding:11px 14px;border-radius:10px;font-size:14px;font-family:'Inter',sans-serif;outline:none;transition:border-color .2s}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--accent)}
.form-group textarea{resize:vertical;min-height:70px}
.form-group select option{background:#1c2230}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-actions{display:flex;gap:12px;margin-top:20px}
.btn-cancel{flex:1;background:var(--bg3);border:1px solid var(--border);color:var(--text-muted);padding:12px;border-radius:10px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s}
.btn-cancel:hover{border-color:var(--accent2);color:var(--accent2)}
.btn-save{flex:2;background:linear-gradient(135deg,#7c3aed,#4f46e5);border:none;color:#fff;padding:12px;border-radius:10px;cursor:pointer;font-size:14px;font-weight:600;transition:all .2s;box-shadow:0 0 20px rgba(124,58,237,0.3)}
.btn-save:hover{transform:translateY(-1px);box-shadow:0 0 30px rgba(124,58,237,0.5)}

/* ── Header ── */
.header{background:linear-gradient(135deg,#1a0533 0%,#0d1117 60%);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;backdrop-filter:blur(12px)}
.header-inner{max-width:1100px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{display:flex;align-items:center;gap:8px;flex-shrink:0}
.logo-icon{font-size:24px;animation:ring 3s ease-in-out infinite}
.logo-text{font-size:20px;font-weight:800;background:linear-gradient(90deg,#a78bfa,#60a5fa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.header-right{display:flex;align-items:center;gap:10px}
.today-badge{font-size:12px;color:var(--text-muted);background:var(--bg3);border:1px solid var(--border);padding:5px 10px;border-radius:20px;white-space:nowrap}
.search-box{display:flex;align-items:center;gap:8px;background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:6px 12px;transition:border-color .2s}
.search-box:focus-within{border-color:var(--accent)}
.search-box input{background:none;border:none;outline:none;color:var(--text);font-size:13px;width:140px;font-family:'Inter',sans-serif}
.bell-btn{position:relative;background:var(--bg3);border:1px solid var(--border);color:var(--text);width:40px;height:40px;border-radius:10px;cursor:pointer;font-size:17px;display:flex;align-items:center;justify-content:center;transition:all .2s}
.bell-btn:hover{border-color:var(--accent2);transform:scale(1.08)}
.bell-badge{position:absolute;top:-6px;right:-6px;background:#ef4444;color:#fff;font-size:10px;font-weight:700;min-width:18px;height:18px;border-radius:10px;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg);animation:pulse 1.5s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.user-avatar{width:36px;height:36px;background:linear-gradient(135deg,#7c3aed,#4f46e5);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;transition:transform .2s}
.user-avatar:hover{transform:scale(1.1)}

body.subscription-view-active #searchBox,
body.subscription-view-active #bellBtn,
body.subscription-view-active #userAvatar,
body.subscription-view-active #headerPlanBadge {
  display: none !important;
}

.plan-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;background:rgba(124,58,237,0.2);color:var(--accent2);border:1px solid var(--accent);padding:4px 10px;border-radius:20px;white-space:nowrap}
.plan-status-banner{max-width:600px;margin:0 auto 24px;padding:16px 20px;background:var(--bg2);border:1px solid var(--border);border-radius:16px;text-align:center}
.plan-status-banner p{font-size:14px;color:var(--text);margin-bottom:12px;font-weight:600}
.btn-continue-plan{width:100%;padding:12px 20px;background:linear-gradient(135deg,#7c3aed,#4f46e5);border:none;color:#fff;border-radius:12px;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s}
.btn-continue-plan:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 0 24px rgba(124,58,237,0.45)}
.btn-continue-plan:disabled{cursor:not-allowed;opacity:0.5}
.plan-btn.active{color:var(--accent2)!important}

/* -- Views -- */
.view{display:none;padding:20px;max-width:1100px;margin:0 auto;padding-bottom:100px}
.view.active{display:block}
.view-header{margin-bottom:20px}
.view-header h2{font-size:22px;font-weight:800;background:linear-gradient(90deg,#a78bfa,#60a5fa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* -- Summary Bar -- */
.summary-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.summary-card{display:flex;flex-direction:column;align-items:center;padding:16px 10px;border-radius:16px;border:1px solid;cursor:pointer;transition:transform .2s}
.summary-card:hover{transform:translateY(-3px)}
.summary-card.expired{background:var(--red-bg);border-color:var(--red-border)}
.summary-card.expiring{background:var(--yellow-bg);border-color:var(--yellow-border)}
.summary-card.active-doc{background:var(--green-bg);border-color:var(--green-border)}
.summary-card.renewed{background:var(--blue-bg);border-color:var(--blue-border)}
.summary-num{font-size:32px;font-weight:800;line-height:1}
.summary-card.expired .summary-num{color:var(--red)}
.summary-card.expiring .summary-num{color:var(--yellow)}
.summary-card.active-doc .summary-num{color:var(--green)}
.summary-card.renewed .summary-num{color:var(--blue)}
.summary-label{font-size:11px;color:var(--text-muted);margin-top:5px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;text-align:center}

/* -- Filter Bar -- */
.filter-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.filter-btn{background:var(--bg2);color:var(--text-muted);border:1px solid var(--border);padding:7px 16px;border-radius:20px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s}
.filter-btn:hover{border-color:var(--accent2);color:var(--accent2)}
.filter-btn.active{background:linear-gradient(135deg,rgba(124,58,237,.2),rgba(79,70,229,.2));border-color:var(--accent);color:var(--accent2)}

/* -- Bottom Nav -- */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:var(--bg2);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-around;padding:8px 0 12px;z-index:200;backdrop-filter:blur(12px)}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;color:var(--text-muted);cursor:pointer;padding:8px 16px;border-radius:12px;transition:all .2s;position:relative;font-family:'Inter',sans-serif}
.nav-item:hover,.nav-item.active{color:var(--accent2)}
.nav-icon{font-size:20px;line-height:1}
.nav-label{font-size:10px;font-weight:600;letter-spacing:.3px}
.nav-fab{background:linear-gradient(135deg,#7c3aed,#4f46e5);border-radius:50%;width:56px;height:56px;margin-top:-28px;box-shadow:0 0 24px rgba(124,58,237,0.6);border:none;display:flex;align-items:center;justify-content:center;transition:all .2s}
.nav-fab:hover{transform:scale(1.1);box-shadow:0 0 36px rgba(124,58,237,0.8)}
.fab-icon{font-size:28px;color:#fff;font-weight:300;line-height:1}
.nav-badge{position:absolute;top:4px;right:8px;background:#ef4444;color:#fff;font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg2)}

/* -- Reminder Card -- */
.main-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.reminder-card{background:var(--bg2);border-radius:18px;border:1px solid var(--border);padding:20px;position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s;animation:fadeUp .4s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.reminder-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,0.4)}
.reminder-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:18px 0 0 18px}
.reminder-card.expired::before{background:var(--red)}
.reminder-card.expiring::before{background:var(--yellow)}
.reminder-card.active-doc::before{background:var(--green)}
.reminder-card.renewed::before{background:var(--blue)}
.reminder-card.inprogress::before{background:var(--orange)}
.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.card-icon{font-size:30px;line-height:1}
.card-actions{display:flex;gap:6px}
.card-actions button{background:var(--bg3);border:1px solid var(--border);color:var(--text-muted);width:30px;height:30px;border-radius:8px;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;transition:all .2s}
.card-actions button:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.card-actions .btn-delete:hover{background:#ef4444;border-color:#ef4444}
.card-body{margin-top:12px}
.card-category{font-size:10px;text-transform:uppercase;letter-spacing:.8px;font-weight:600;color:var(--text-muted)}
.card-name{font-size:17px;font-weight:700;color:var(--text);margin-top:3px}
.card-meta{font-size:12px;color:var(--text-muted);margin-top:4px}
.card-number{font-size:11px;color:var(--text-muted);margin-top:2px;font-family:monospace}
.status-badge{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:5px 12px;border-radius:20px;font-size:12px;font-weight:600;border:1px solid}
.status-badge.expired{background:var(--red-bg);border-color:var(--red-border);color:var(--red)}
.status-badge.expiring{background:var(--yellow-bg);border-color:var(--yellow-border);color:var(--yellow)}
.status-badge.active-doc{background:var(--green-bg);border-color:var(--green-border);color:var(--green)}
.status-badge.renewed{background:var(--blue-bg);border-color:var(--blue-border);color:var(--blue)}
.status-badge.inprogress{background:var(--orange-bg);border-color:var(--orange-border);color:var(--orange)}
.progress-wrap{margin-top:12px}
.progress-label{display:flex;justify-content:space-between;font-size:11px;color:var(--text-muted);margin-bottom:5px}
.progress-track{height:5px;background:rgba(255,255,255,0.07);border-radius:10px;overflow:hidden}
.progress-fill{height:100%;border-radius:10px;transition:width 1s ease}
.reminder-card.expired .progress-fill{background:var(--red)}
.reminder-card.expiring .progress-fill{background:var(--yellow)}
.reminder-card.active-doc .progress-fill{background:var(--green)}
.reminder-card.renewed .progress-fill{background:var(--blue)}
.reminder-card.inprogress .progress-fill{background:var(--orange)}
.card-notes{margin-top:10px;font-size:12px;color:var(--text-muted);font-style:italic;background:var(--bg3);padding:7px 10px;border-radius:8px}
.reminder-pills{margin-top:12px;padding-top:12px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:6px}
.reminder-pill{font-size:11px;padding:3px 9px;border-radius:12px;background:var(--bg3);border:1px solid var(--border);color:var(--text-muted);display:flex;align-items:center;gap:4px}
.reminder-pill.sent{border-color:var(--green-border);color:var(--green)}
.btn-attach-card{margin-top:10px;width:100%;background:var(--bg3);border:1px solid var(--border);color:var(--text-muted);padding:7px;border-radius:10px;font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .2s}
.btn-attach-card:hover{border-color:var(--accent2);color:var(--text)}
.btn-renew-track{margin-top:8px;width:100%;background:linear-gradient(135deg,rgba(124,58,237,0.2),rgba(79,70,229,0.2));border:1px solid rgba(124,58,237,0.4);color:var(--accent2);padding:7px;border-radius:10px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s}
.btn-renew-track:hover{background:linear-gradient(135deg,rgba(124,58,237,0.4),rgba(79,70,229,0.4))}

/* -- Modal -- */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.75);backdrop-filter:blur(6px);z-index:300;align-items:center;justify-content:center;padding:16px}
.modal-overlay.open{display:flex}
.modal{background:var(--bg2);border:1px solid var(--border);border-radius:20px;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;padding:28px;animation:modalPop .3s cubic-bezier(.34,1.56,.64,1) both;box-shadow:0 30px 80px rgba(0,0,0,0.6)}
@keyframes modalPop{from{opacity:0;transform:scale(.85) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.modal-header h2{font-size:18px;font-weight:700;background:linear-gradient(90deg,#a78bfa,#60a5fa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.modal-close{background:var(--bg3);border:1px solid var(--border);color:var(--text-muted);width:32px;height:32px;border-radius:8px;cursor:pointer;font-size:15px;transition:all .2s}
.modal-close:hover{background:#ef4444;color:#fff;border-color:#ef4444}
.add-mode-tabs{display:flex;gap:0;margin-bottom:20px;background:var(--bg3);border-radius:12px;padding:4px}
.amt{flex:1;padding:9px;border:none;background:none;color:var(--text-muted);font-size:13px;font-weight:600;border-radius:10px;cursor:pointer;transition:all .2s;font-family:'Inter',sans-serif}
.amt.active{background:var(--accent);color:#fff;box-shadow:0 0 16px rgba(124,58,237,0.4)}

/* -- OCR -- */
.ocr-section{margin-bottom:16px}
.ocr-dropzone{border:2px dashed var(--border);border-radius:16px;padding:28px 20px;text-align:center;transition:all .2s;background:rgba(255,255,255,0.02)}
.ocr-dropzone.dragover{border-color:var(--accent);background:rgba(124,58,237,0.05)}
.ocr-icon{font-size:40px;margin-bottom:10px}
.ocr-buttons{display:flex;gap:10px;justify-content:center;margin-top:14px}
.btn-ocr{display:inline-block;background:var(--bg3);border:1px solid var(--border);color:var(--text);padding:8px 18px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}
.btn-ocr:hover{border-color:var(--accent2)}
.btn-ocr.cam{background:linear-gradient(135deg,rgba(124,58,237,0.2),rgba(79,70,229,0.2));border-color:rgba(124,58,237,0.4);color:var(--accent2)}
.ocr-preview{text-align:center;padding:16px}
.ocr-preview img{max-width:100%;max-height:160px;border-radius:10px;object-fit:contain}
.ocr-status{display:flex;align-items:center;gap:10px;justify-content:center;margin-top:12px;font-size:13px;color:var(--accent2)}
.ocr-spinner{width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* -- Renewal Popup -- */
.renewal-popup{text-align:center;max-width:360px}
.renewal-icon{font-size:48px;margin-bottom:16px;animation:spin 3s linear infinite}
.renewal-popup h3{font-size:18px;font-weight:700;margin-bottom:8px}
.renewal-actions{display:flex;gap:10px;margin-top:20px}
.rbtn{flex:1;padding:12px 8px;border-radius:12px;border:none;font-size:13px;font-weight:700;cursor:pointer;transition:all .2s;font-family:'Inter',sans-serif}
.rbtn.yes{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border)}
.rbtn.yes:hover{background:var(--green);color:#fff}
.rbtn.no{background:var(--red-bg);color:var(--red);border:1px solid var(--red-border)}
.rbtn.no:hover{background:var(--red);color:#fff}
.rbtn.progress{background:var(--orange-bg);color:var(--orange);border:1px solid var(--orange-border)}
.rbtn.progress:hover{background:var(--orange);color:#fff}

/* -- Alerts View -- */
.notif-banner{display:flex;align-items:center;gap:10px;background:rgba(124,58,237,0.12);border:1px solid rgba(124,58,237,0.35);border-radius:12px;padding:12px 16px;font-size:13px;color:var(--accent2);margin-bottom:16px;position:relative}
.notif-banner.granted{background:var(--green-bg);border-color:var(--green-border);color:var(--green)}
.notif-banner.denied{background:var(--red-bg);border-color:var(--red-border);color:var(--red)}
.notif-banner-close{margin-left:auto;background:none;border:none;color:inherit;cursor:pointer;font-size:14px;opacity:.7}
.notif-banner-close:hover{opacity:1}
.smart-legend{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px;padding:14px;background:var(--bg2);border-radius:12px;border:1px solid var(--border)}
.sl-item{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-muted)}
.sl-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.sl-dot.green{background:var(--green)}.sl-dot.yellow{background:var(--yellow)}.sl-dot.orange{background:var(--orange)}.sl-dot.red{background:var(--red)}
.sl-dot.pulse-red{background:var(--red);animation:pulse 1.5s ease-in-out infinite}
.notif-log{display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
.notif-entry{display:flex;gap:12px;padding:14px;background:var(--bg2);border-radius:12px;border:1px solid var(--border);animation:fadeUp .3s ease both}
.notif-entry-icon{font-size:22px;flex-shrink:0}
.notif-entry-content{flex:1}
.notif-entry-title{font-size:14px;font-weight:600;color:var(--text)}
.notif-entry-msg{font-size:12px;color:var(--text-muted);margin-top:3px}
.notif-entry-time{font-size:11px;color:var(--text-muted);margin-top:5px}

/* -- Attach Section (below notifications) -- */
.attach-section{background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:20px}
.attach-section h3{font-size:16px;font-weight:700;margin-bottom:6px}
.attach-section p{font-size:13px;color:var(--text-muted);margin-bottom:16px}
.attach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-bottom:14px}
.attach-item{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:10px;text-align:center;cursor:pointer;transition:all .2s}
.attach-item:hover{border-color:var(--accent2);transform:scale(1.02)}
.attach-item-icon{font-size:24px;margin-bottom:4px}
.attach-item-name{font-size:11px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btn-attach-new{width:100%;padding:12px;background:linear-gradient(135deg,rgba(124,58,237,0.2),rgba(79,70,229,0.2));border:1px solid rgba(124,58,237,0.4);color:var(--accent2);border-radius:12px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;font-family:'Inter',sans-serif}
.btn-attach-new:hover{background:linear-gradient(135deg,rgba(124,58,237,0.4),rgba(79,70,229,0.4))}

/* -- Archive -- */
.archive-filters{display:flex;gap:8px;margin-bottom:16px}
.arch-filter{background:var(--bg2);color:var(--text-muted);border:1px solid var(--border);padding:7px 16px;border-radius:20px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s;font-family:'Inter',sans-serif}
.arch-filter.active{background:linear-gradient(135deg,rgba(124,58,237,.2),rgba(79,70,229,.2));border-color:var(--accent);color:var(--accent2)}
.archive-list{display:flex;flex-direction:column;gap:12px}
.archive-card{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:16px;display:flex;gap:14px;align-items:flex-start;transition:all .2s;animation:fadeUp .3s ease both}
.archive-card:hover{border-color:var(--accent2);transform:translateX(4px)}
.archive-card-icon{font-size:28px;flex-shrink:0}
.archive-card-info{flex:1}
.archive-card-name{font-size:15px;font-weight:700;color:var(--text)}
.archive-card-meta{font-size:12px;color:var(--text-muted);margin-top:4px}
.archive-card-badge{display:inline-flex;padding:3px 10px;border-radius:12px;font-size:11px;font-weight:600;margin-top:8px;border:1px solid}
.archive-card-badge.renewed{background:var(--blue-bg);border-color:var(--blue-border);color:var(--blue)}
.archive-card-badge.expired{background:var(--red-bg);border-color:var(--red-border);color:var(--red)}
.archive-card-actions{display:flex;flex-direction:column;gap:6px}
.btn-restore{background:var(--bg3);border:1px solid var(--border);color:var(--text-muted);padding:6px 12px;border-radius:8px;font-size:12px;cursor:pointer;transition:all .2s;font-family:'Inter',sans-serif}
.btn-restore:hover{border-color:var(--green-border);color:var(--green)}
.archive-empty{text-align:center;padding:60px 20px;color:var(--text-muted)}
.archive-empty p{font-size:14px;margin-top:12px}

/* -- Categories -- */
.category-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 20px;
}
.cat-col {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cat-col h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  color: var(--accent2);
}
.cat-col-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Re-use reminder-card styles inside columns */
.cat-col .reminder-card {
  padding: 14px;
  font-size: 0.9em;
}
@media(max-width: 900px) {
  .category-columns {
    grid-template-columns: 1fr;
  }
}

/* -- Profile -- */
.profile-card{background:var(--bg2);border:1px solid var(--border);border-radius:20px;padding:28px;text-align:center;margin-bottom:16px}
.profile-avatar-lg{font-size:60px;margin-bottom:12px}
.profile-card h2{font-size:22px;font-weight:800}
.profile-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}
.ps-item{background:var(--bg3);border:1px solid var(--border);border-radius:12px;padding:14px 8px;text-align:center}
.ps-item span{display:block;font-size:24px;font-weight:800;color:var(--accent2)}
.ps-item small{font-size:11px;color:var(--text-muted)}
.profile-menu{display:flex;flex-direction:column;gap:8px}
.pm-item{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:16px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}
.pm-item:hover{border-color:var(--accent2);color:var(--accent2);transform:translateX(4px)}
.pm-item.logout{color:var(--red);border-color:var(--red-border)}
.pm-item.logout:hover{background:var(--red-bg)}

/* -- Toast -- */
.toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(80px);background:linear-gradient(135deg,#7c3aed,#4f46e5);color:#fff;padding:12px 24px;border-radius:12px;font-size:13px;font-weight:500;z-index:999;box-shadow:0 8px 30px rgba(124,58,237,0.5);transition:transform .35s cubic-bezier(.34,1.56,.64,1);pointer-events:none}
.toast.show{transform:translateX(-50%) translateY(0)}
.inline-alert{position:fixed;bottom:90px;right:20px;max-width:320px;background:var(--bg2);border:1px solid rgba(124,58,237,0.5);border-radius:14px;padding:14px 16px;display:flex;align-items:flex-start;gap:10px;z-index:500;box-shadow:0 8px 32px rgba(0,0,0,0.5);animation:fadeUp .4s ease both}
.inline-alert span:first-child{font-size:20px;flex-shrink:0}
.inline-alert-body{flex:1}
.inline-alert-body strong{display:block;font-size:13px;color:var(--text);margin-bottom:3px}
.inline-alert-body span{font-size:12px;color:var(--text-muted);line-height:1.5}
.inline-alert>button{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:14px;padding:2px;flex-shrink:0}
.empty-state{text-align:center;padding:60px 20px;color:var(--text-muted)}
.empty-icon{font-size:56px;margin-bottom:14px}
.empty-state h3{font-size:18px;color:var(--text);margin-bottom:8px}

/* -- Upload Modal -- */
.upload-drop-zone{border:2px dashed var(--border);border-radius:14px;padding:28px;text-align:center;transition:all .2s;background:rgba(255,255,255,0.02)}
.upload-drop-zone.dragover{border-color:var(--accent);background:rgba(124,58,237,0.05)}
.upload-icon{font-size:36px;margin-bottom:10px}
.upload-hint{font-size:11px;color:var(--text-muted);margin-top:8px}
.btn-upload-file{display:inline-block;background:var(--bg3);border:1px solid var(--border);color:var(--text);padding:8px 18px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}
.btn-upload-file:hover{border-color:var(--accent2)}
.btn-upload-file.cam{background:linear-gradient(135deg,rgba(124,58,237,0.2),rgba(79,70,229,0.2));border-color:rgba(124,58,237,0.4);color:var(--accent2)}
.doc-attached-list{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.attached-item{display:flex;align-items:center;gap:10px;padding:10px;background:var(--bg3);border-radius:10px;border:1px solid var(--border)}
.ai-name{flex:1;font-size:12px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-remove{background:none;border:none;color:#ef4444;cursor:pointer;font-size:14px;opacity:.7}
.ai-remove:hover{opacity:1}

/* -- Doc Viewer -- */
.doc-viewer-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:600;display:flex;align-items:center;justify-content:center;padding:20px}
.doc-viewer{background:var(--bg2);border-radius:18px;width:100%;max-width:700px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border)}
.doc-viewer-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.doc-viewer-body{flex:1;overflow:auto;padding:16px;display:flex;align-items:center;justify-content:center;min-height:300px}
.btn-dv-download{background:var(--bg3);border:1px solid var(--border);color:var(--text);padding:6px 14px;border-radius:8px;font-size:13px;text-decoration:none;transition:all .2s}

/* -- Log Drawer -- */
.log-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:400;backdrop-filter:blur(4px)}
.log-overlay.open{display:block}
.log-drawer{position:fixed;top:0;right:-420px;width:400px;max-width:95vw;height:100vh;background:var(--bg2);border-left:1px solid var(--border);z-index:401;display:flex;flex-direction:column;transition:right .35s cubic-bezier(.4,0,.2,1);box-shadow:-8px 0 40px rgba(0,0,0,0.5)}
.log-drawer.open{right:0}
.log-header{display:flex;align-items:center;justify-content:space-between;padding:20px;border-bottom:1px solid var(--border);background:linear-gradient(135deg,rgba(124,58,237,0.15),transparent)}
.log-header h3{font-size:16px;font-weight:700;background:linear-gradient(90deg,#a78bfa,#60a5fa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.log-close{background:var(--bg3);border:1px solid var(--border);color:var(--text-muted);width:30px;height:30px;border-radius:8px;cursor:pointer;font-size:14px;transition:all .2s}
.log-close:hover{background:#ef4444;color:#fff;border-color:#ef4444}
.log-status-row{padding:12px 20px;font-size:13px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.log-list{flex:1;overflow-y:auto;padding:10px 0}
.log-list::-webkit-scrollbar{width:4px}
.log-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.log-empty{text-align:center;padding:40px 20px;color:var(--text-muted);font-size:14px}
.log-entry{display:flex;gap:12px;padding:12px 20px;border-bottom:1px solid var(--border);transition:background .2s}
.log-entry:hover{background:var(--bg3)}
.log-entry-icon{font-size:22px;flex-shrink:0}
.log-entry-content{flex:1}
.log-entry-title{font-size:13px;font-weight:600;color:var(--text)}
.log-entry-msg{font-size:12px;color:var(--text-muted);margin-top:2px}
.log-entry-time{font-size:11px;color:var(--text-muted);margin-top:4px}
.log-footer{padding:14px 20px;border-top:1px solid var(--border);display:flex;gap:10px}
.btn-clear-log{flex:1;background:var(--bg3);border:1px solid var(--border);color:var(--text-muted);padding:10px;border-radius:10px;cursor:pointer;font-size:13px;font-weight:500;transition:all .2s;font-family:'Inter',sans-serif}
.btn-clear-log:hover{border-color:#ef4444;color:#ef4444}
.btn-test-notif{flex:1;background:linear-gradient(135deg,#7c3aed,#4f46e5);border:none;color:#fff;padding:10px;border-radius:10px;cursor:pointer;font-size:13px;font-weight:600;transition:all .2s;font-family:'Inter',sans-serif}
.btn-test-notif:hover{opacity:.85}

/* -- Responsive -- */
@media(max-width:600px){.header-inner{flex-wrap:wrap}.search-box input{width:100px}.summary-bar{grid-template-columns:repeat(2,1fr)}.main-grid{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}}

/* -- Calendar Modal -- */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-top: 15px;
}
.cal-day-header {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.cal-day {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px;
  font-size: 13px;
  position: relative;
}
.cal-day.empty {
  background: transparent;
  border-color: transparent;
}
.cal-day.today {
  border-color: var(--accent);
  background: rgba(124,58,237,0.1);
}
.cal-dot-container {
  display: flex;
  gap: 3px;
  margin-top: auto;
  flex-wrap: wrap;
  justify-content: center;
}
.cal-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.cal-dot.system { background: #3b82f6; }
.cal-dot.expired { background: var(--red); }
.cal-dot.expiring { background: var(--yellow); }
.cal-dot.active-doc { background: var(--green); }
.cal-dot.inprogress { background: var(--orange); }
.cal-dot.renewed { background: #3b82f6; }

.cal-modal-wide { max-width: 720px; width: 95%; }
.cal-sync-bar {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.cal-sync-status { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; line-height: 1.5; }
.cal-sync-status b { color: var(--accent2); }
.cal-sync-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cal-sync-btn {
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s;
}
.cal-sync-btn:hover { border-color: var(--accent); color: var(--accent2); }
.cal-sync-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.cal-sync-btn { display: inline-flex; align-items: center; justify-content: center; }
.cal-ics-fallback { margin-top: 12px; font-size: 12px; color: var(--text-muted); }
.cal-ics-fallback summary { cursor: pointer; font-weight: 600; color: var(--accent2); }
.cal-dot.google { background: #3b82f6; }
.cal-day-event.google { border-left-color: #3b82f6; }
.cal-day { cursor: pointer; }
.cal-day:hover { border-color: var(--accent); }
.cal-day.selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(124,58,237,0.35); }
.cal-day-detail {
  margin-top: 16px;
  padding: 14px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 12px;
  max-height: 160px;
  overflow-y: auto;
}
.cal-day-detail h4 { font-size: 13px; margin-bottom: 10px; color: var(--accent2); }
.cal-day-event {
  font-size: 12px;
  padding: 8px 10px;
  background: var(--bg2);
  border-radius: 8px;
  margin-bottom: 6px;
  border-left: 3px solid var(--accent);
}
.cal-day-event.system { border-left-color: #3b82f6; }
.cal-legend { margin-top: 16px; justify-content: center; background: transparent; border: none; padding: 0; flex-wrap: wrap; }
.sl-dot.purple { background: var(--accent); }
.sl-dot.blue { background: #3b82f6; }
.cal-dot.expired { background: var(--red); }
.cal-dot.expiring { background: var(--yellow); }
.cal-dot.active-doc { background: var(--green); }
.cal-dot.renewed { background: var(--blue); }
.cal-dot.inprogress { background: var(--orange); }
.cal-month-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.cal-nav-btn {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  transition: all .2s;
}
.cal-nav-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* -- Sidebar Drawer -- */
.sidebar-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: none;
  opacity: 0;
  transition: opacity .3s ease;
}
.sidebar-overlay.show {
  display: block;
  opacity: 1;
}

.sidebar {
  position: fixed;
  top: 0; left: -280px; bottom: 0;
  width: 280px;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  z-index: 1001;
  transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 20px;
  display: flex;
  flex-direction: column;
  box-shadow: 20px 0 50px rgba(0,0,0,0.5);
}
.sidebar.open {
  transform: translateX(280px);
}

.sb-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 12px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all .2s;
  margin-bottom: 8px;
  font-weight: 500;
  font-size: 14px;
}
.sb-nav-item span {
  font-size: 18px;
}
.sb-nav-item:hover {
  background: var(--bg3);
  color: var(--text);
  transform: translateX(5px);
}
.sb-nav-item.active {
  background: linear-gradient(135deg, rgba(124,58,237,0.1), rgba(79,70,229,0.1));
  color: var(--accent2);
  border: 1px solid var(--accent);
}

/* -- Floating Action Button (Gmail Style) -- */
.fab-floating {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--accent), #4f46e5);
  color: white;
  border: none;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(124, 58, 237, 0.4);
  cursor: pointer;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.fab-floating span {
  font-size: 32px;
  line-height: 1;
}
.fab-floating:hover {
  transform: translateY(-8px) scale(1.08);
  box-shadow: 0 20px 40px rgba(124, 58, 237, 0.6);
}
.fab-floating:active {
  transform: scale(0.95);
}