#authScreen,body{min-height:100vh}.auth-btn,.auth-tab,.btn,.pill,.smenu-item,.user-chip{cursor:pointer}body.dark select.inp,select.inp{background-repeat:no-repeat;background-position:right 12px center}.empty,.toast{text-align:center}*{box-sizing:border-box;margin:0;padding:0}body{font-family:'DM Sans',sans-serif;background:#f7f7f4;color:#111;min-width:320px}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:4px}button,input,select,textarea{font-family:inherit}.mono{font-family:'DM Mono',monospace}#authScreen{display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(135deg,#f7f7f4 0,#eef0f5 100%)}.auth-btn-google,.auth-logo{align-items:center;display:flex}.auth-card{background:#fff;border-radius:20px;padding:36px 32px;width:100%;max-width:380px;box-shadow:0 4px 40px rgba(0,0,0,.1)}.auth-logo{width:44px;height:44px;background:#111;border-radius:12px;justify-content:center;margin-bottom:16px}.auth-title{font-size:22px;font-weight:700;letter-spacing:-.4px;margin-bottom:4px}.auth-sub{font-size:13px;color:#94a3b8;margin-bottom:24px}.auth-tabs{display:flex;gap:4px;background:#f4f4f0;border-radius:10px;padding:4px;margin-bottom:20px}.auth-tab{flex:1;padding:8px;border:none;background:0 0;border-radius:8px;font-size:13px;font-weight:500;color:#888;transition:.15s}.auth-tab.active{background:#fff;color:#111;box-shadow:0 1px 6px rgba(0,0,0,.08)}.auth-input:focus,.inp:focus{box-shadow:0 0 0 3px rgba(17,17,17,.06)}.auth-field{margin-bottom:12px}.auth-field label{display:block;font-size:12px;font-weight:600;color:#555;margin-bottom:5px}.auth-input{width:100%;padding:11px 14px;border:1.5px solid #e8e8e3;border-radius:10px;font-size:13.5px;outline:0;transition:border .15s;background:#fafaf8}.auth-btn,.btn,.pill,.smenu-item,.user-chip{transition:.15s}.auth-input:focus{border-color:#111;background:#fff}.auth-btn{width:100%;padding:12px;border:none;border-radius:10px;font-size:14px;font-weight:600}.auth-btn-primary{background:#111;color:#fff;margin-bottom:10px}.auth-btn-primary:hover,.btn-dark:hover{background:#333}.auth-btn-primary:disabled{background:#888;cursor:not-allowed}.auth-btn-google{background:#fff;color:#333;border:1.5px solid #e8e8e3;justify-content:center;gap:10px}.auth-btn-google:hover{background:#f4f4f0;border-color:#c8c8c0}.auth-divider{display:flex;align-items:center;gap:10px;margin:14px 0;font-size:12px;color:#cbd5e1}.auth-divider::after,.auth-divider::before{content:'';flex:1;height:1px;background:#e8e8e3}.auth-error{background:#fef2f2;color:#ef4444;border-radius:8px;padding:10px 12px;font-size:12.5px;margin-bottom:12px;display:none}.auth-error.show{display:block}.auth-loading{display:none;align-items:center;justify-content:center;gap:8px;font-size:13px;color:#94a3b8;margin-top:12px}.auth-loading.show,.modal-bg.open,.user-avatar,.user-chip{display:flex}.spin{animation:.8s linear infinite spin;width:16px;height:16px;border:2px solid #e8e8e3;border-top-color:#111;border-radius:50%}@keyframes spin{to{transform:rotate(360deg)}}.user-chip{align-items:center;gap:7px;padding:5px 10px;border-radius:20px;background:#f4f4f0;border:1.5px solid #e8e8e3;font-size:12px;font-weight:500;color:#333}.sidebar-logo,.user-avatar{align-items:center;font-weight:700}.user-chip:hover{background:#ebebeb;border-color:#d0d0cb}.user-avatar{width:22px;height:22px;border-radius:50%;background:#111;color:#fff;justify-content:center;font-size:10px;flex-shrink:0}.sidebar,header{background:#fff;top:0}body.dark .filter-trigger-btn,body.dark .fmodal-pill,body.dark .io-btn,body.dark .user-chip{background:var(--surface2);border-color:var(--border);color:var(--text2)}body.dark .user-chip:hover{border-color:var(--accent);background:rgba(0,255,135,.06)}header{border-bottom:1px solid #e8e8e3;position:sticky;z-index:50}.sidebar{position:fixed;left:0;bottom:0;width:240px;border-right:1px solid #e8e8e3;z-index:100;flex-direction:column;padding:24px 0;display:none;font-family:'DM Sans',sans-serif}.bnav,.btn,.filter-trigger-btn,.io-btn{font-family:inherit}.sidebar-logo{display:flex;gap:12px;padding:0 24px;margin-bottom:32px;font-size:20px;letter-spacing:-.5px}.header-inner,main{max-width:960px;margin:0 auto}.sidebar-logo-icon{width:34px;height:34px;background:#111;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.sidebar-menu{display:flex;flex-direction:column;gap:6px;padding:0 16px}.smenu-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;color:#555;font-size:14px;font-weight:500;background:0 0;border:none;width:100%;text-align:left}.io-btn svg,.smenu-item svg{color:#94a3b8;transition:.15s;flex-shrink:0}.smenu-item:hover{background:#fafaf8;color:#111}.bnav.active-nav,.card-title,.cat-item-name,.detail-title,.io-btn:hover svg,.smenu-item:hover svg{color:#111}@media(min-width:768px){body{padding-left:240px}.sidebar{display:flex}.bot-nav,.head-logo{display:none}main{padding-bottom:40px}}#syncStatus,.header-inner{display:flex;align-items:center}.header-inner{padding:0 20px;height:62px;justify-content:space-between;gap:12px}main{padding:24px 20px 96px}.sync-dot{width:7px;height:7px;border-radius:50%;background:#10b981;display:inline-block;margin-right:3px}.sync-dot.syncing{background:#f97316;animation:.8s ease-in-out infinite pulse}.sync-dot.error,.toast.warn{background:#ef4444}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}#syncStatus{font-size:11px;color:#94a3b8;gap:4px}.btn,.fmodal-pill{display:inline-flex;align-items:center}body.dark #forgotForm button[onclick*=showForgotForm],body.dark #loginForm button[onclick*=showForgotForm],body.dark #syncStatus,body.dark .auth-divider,body.dark .auth-sub,body.dark .auth-tab,body.dark .bnav,body.dark .smenu-item svg{color:var(--text3)}.btn{border:none;gap:6px}.btn-dark{background:#111;color:#fff;border-radius:8px;padding:9px 16px;font-size:13px;font-weight:500}.btn-danger,.btn-light{border-radius:8px;padding:9px 14px;font-size:13px;font-weight:500}.btn-light{background:#f4f4f0;color:#444}.btn-light:hover{background:#ebebeb}.btn-danger{background:#fef2f2;color:#ef4444}.btn-danger:hover{background:#fee2e2}.pill{border-radius:20px;font-size:12px;font-weight:500;padding:5px 13px;border:1.5px solid transparent;white-space:nowrap;flex-shrink:0;display:inline-flex;align-items:center;gap:5px}.pill-active,.pp.active{background:#111;color:#fff;border-color:#111}.pill-inactive{background:#fff;color:#555;border-color:#e8e8e3}.pill-inactive:hover{background:#f4f4f0;border-color:#d0d0cb}.inp{background:#fff;border:1px solid #e8e8e3;border-radius:10px;padding:10px 14px;font-size:13.5px;width:100%;outline:0;color:#111;transition:border .15s}.card,.stat-card{border:1px solid #e8e8e3;padding:16px 18px;cursor:pointer;background:#fff}.inp:focus{border-color:#111}select.inp{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E");padding-right:34px;cursor:pointer;position:relative;z-index:10}
select.inp option{color:#111;background:#fff}
select.inp option:disabled{color:#94a3b8}
select.inp:disabled{
  opacity:0.6;
  cursor:not-allowed;
  background-color:#f4f4f0;
}.card{border-radius:12px;transition:.18s;position:relative;overflow:hidden}.modal-bg,.toast{position:fixed}.card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:12px 0 0 12px;background:var(--cat-color,#e8e8e3)}.card:hover{border-color:#c8c8c0;box-shadow:0 4px 20px rgba(0,0,0,.07);transform:translateY(-2px)}.stat-card{border-radius:12px;transition:.15s}.stat-card:hover{border-color:#c8c8c0;box-shadow:0 2px 12px rgba(0,0,0,.05)}.stat-card.active-stat{border:3px solid #000;}.stat-card.active-stat .stat-lbl{color:#ccc}.stat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:20px}.ideas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}.detail-grid,.io-grid{grid-template-columns:1fr 1fr}.filter-section{background:#fff;border:1px solid #e8e8e3;border-radius:12px;padding:14px 16px;margin-bottom:18px}.filter-trigger-btn,.fmodal-pill,.theme-toggle{background:#fafaf8;cursor:pointer}.fmodal-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;padding-bottom:4px}.fmodal-pill{gap:6px;padding:8px 14px;border-radius:10px;font-size:13px;font-weight:500;border:1.5px solid #e8e8e3;color:#444;transition:.15s}.count-badge,.filter-trigger-btn{align-items:center;display:inline-flex}.count-badge{padding:2px 7px;border-radius:99px;font-size:11px;font-weight:700;justify-content:center;line-height:1;min-width:20px}.filter-trigger-btn,.toast{font-size:13px;white-space:nowrap}.fmodal-pill:hover,.theme-toggle:hover{border-color:#c8c8c0;background:#f0f0ec}.filter-trigger-btn.has-filter,.fmodal-pill.fpill-active{border-color:#111;background:#111;color:#fff}.filter-trigger-btn{gap:7px;padding:8px 14px;border-radius:10px;border:1.5px solid #e8e8e3;font-weight:500;color:#444;transition:.15s}.cat-chip,.section-label{font-weight:600;font-size:11px}.filter-trigger-btn:hover{border-color:#c8c8c0;background:#f0f0ec;color:#111}.filter-trigger-btn .ftb-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;background:rgba(255,255,255,.2);border-radius:99px;font-size:10px;font-weight:700;padding:0 4px}.filter-trigger-btn:not(.has-filter) .ftb-badge{background:#e8e8e3;color:#666}.theme-toggle{width:36px;height:36px;border-radius:9px;border:1.5px solid #e8e8e3;display:flex;align-items:center;justify-content:center;transition:.2s;flex-shrink:0}.modal-bg,.tag-row{align-items:center}body.dark{--bg:#060d0a;--surface:#0a1410;--surface2:#0d1c14;--border:#0d2a1a;--border2:#102e1a;--text:#c8d8ec;--text2:#6abf8a;--text3:#3d5a7a;--accent:#00ff87;--accent2:#00c96a;--glow:rgba(0, 255, 135, .12);--glowmd:rgba(0, 255, 135, .22);background:var(--bg);color:var(--text)}body.dark::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse 80% 40% at 50% -10%,rgba(0,160,80,.18) 0,transparent 70%),radial-gradient(ellipse 40% 30% at 100% 60%,rgba(0,255,135,.06) 0,transparent 60%)}body.dark #authScreen{background:linear-gradient(135deg,#060d0a 0,#0a1410 100%)}body.dark .auth-card{background:var(--surface);border:1px solid var(--border2);box-shadow:0 4px 40px rgba(0,0,0,.4)}body.dark .auth-input,body.dark .inp{background:var(--surface2);border-color:var(--border);color:var(--text)}body.dark .auth-input:focus{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px rgba(0,255,135,.1)}body.dark .auth-tabs{background:var(--surface2)}body.dark .auth-tab.active{background:var(--surface);color:var(--text);box-shadow:0 1px 6px rgba(0,0,0,.3)}body.dark .active-tag,body.dark .auth-btn-primary,body.dark .btn-dark{background:var(--accent);color:#000}body.dark .auth-btn-primary:hover,body.dark .btn-dark:hover{background:#4fa;box-shadow:0 0 16px rgba(0,255,135,.4)}body.dark .auth-btn-google{background:var(--surface2);color:var(--text2);border-color:var(--border)}body.dark .auth-btn-google:hover{background:rgba(0,255,135,.06);border-color:var(--accent)}body.dark .auth-divider::after,body.dark .auth-divider::before{background:var(--border)}body.dark .auth-field label,body.dark .mono,body.dark .smenu-item{color:var(--text2)}body.dark .card,body.dark .card-title,body.dark .cat-item-name,body.dark .detail-title,body.dark .sidebar-logo{color:var(--text)}body.dark .spin{border-color:var(--border2);border-top-color:var(--accent)}body.dark ::-webkit-scrollbar-thumb{background:#0a2a1a}body.dark header{background:rgba(6,13,10,.95);border-bottom-color:var(--border);backdrop-filter:blur(12px)}body.dark .sidebar{background:var(--bg);border-right-color:var(--border)}body.dark .sidebar-logo-icon{background:var(--accent)}body.dark .sidebar-logo-icon svg{stroke:#000}body.dark .smenu-item:hover{background:rgba(0,255,135,.06);color:var(--accent)}body.dark .bnav.active-nav,body.dark .io-btn:hover svg,body.dark .smenu-item:hover svg{color:var(--accent)}body.dark main{position:relative;z-index:1}body.dark .profile-bar{background:rgba(6,13,10,.9);border-bottom-color:var(--border)}body.dark .bot-nav{background:rgba(6,13,10,.95);border-top-color:var(--border);backdrop-filter:blur(12px)}body.dark .capture-box,body.dark .card,body.dark .filter-section,body.dark .stat-card{background:var(--surface);border-color:var(--border)}body.dark .bnav:hover{color:var(--accent);background:rgba(0,255,135,.05)}body.dark .pp.inactive:hover{background:rgba(0,255,135,.08);color:var(--accent)}body.dark .pp.active{background:var(--accent);color:#000;border-color:var(--accent)}body.dark .card:hover{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 8px 32px rgba(0,255,135,.1);transform:translateY(-2px)}body.dark .stat-card:hover{border-color:var(--border2);box-shadow:0 0 16px var(--glow)}body.dark .stat-card.active-stat{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 20px var(--glow)}body.dark #ideaCount strong,body.dark .stat-card.active-stat .stat-val{color:#000;font-weight:700}body.dark .stat-card.active-stat .stat-lbl{color:#000;opacity:.8}body.dark .stat-val{color:var(--accent)}body.dark #clock,body.dark .stat-lbl{color:var(--text3)}body.dark .capture-box:focus-within{border-color:var(--accent2);box-shadow:0 0 0 1px var(--accent2),0 4px 20px var(--glow)}body.dark .inp::placeholder{color:var(--text3)}body.dark .inp:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,255,135,.1)}body.dark select.inp{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2300c96a' stroke-width='2'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E");background-size:12px 12px;color-scheme:dark}body.dark select.inp option{background:#0a1410;color:#c8d8ec}body.dark .btn-light{background:var(--surface2);color:var(--text2);border:1px solid var(--border)}body.dark .btn-light:hover{background:rgba(0,255,135,.08);color:var(--accent);border-color:var(--accent2)}body.dark .btn-danger{background:rgba(239,68,68,.1);color:#ff6b6b;border:none}body.dark .btn-danger:hover{background:rgba(239,68,68,.2)}body.dark .card-date,body.dark .card-num,body.dark .cat-item-count,body.dark .idea-count-lbl,body.dark .io-btn svg,body.dark .section-label{color:var(--text3)}body.dark .divider{border-top-color:var(--border)}body.dark .modal{background:var(--surface);border:1px solid var(--border2);box-shadow:0 0 0 1px var(--border),0 32px 80px rgba(0,0,0,.6)}body.dark .smodal{background:var(--surface);border-top:1px solid var(--border2)}body.dark .smodal-handle{background:var(--border2)}body.dark .modal-bg{background:rgba(0,0,0,.7);backdrop-filter:blur(8px)}body.dark .detail-box{background:var(--surface2);border:1px solid var(--border)}body.dark .cat-chip{opacity:.9}body.dark .danger-zone{background:rgba(239,68,68,.06);border-color:rgba(239,68,68,.2)}body.dark .io-btn:hover{border-color:var(--accent);color:var(--accent);background:rgba(0,255,135,.06)}

/* Dark mode for Simpan button (black variant) */
body.dark .io-btn[style*="background:#111"]{
  background:var(--accent);
  color:#000;
  border-color:var(--accent);
}
body.dark .io-btn[style*="background:#111"]:hover{
  background:#4fa;
  box-shadow:0 0 12px rgba(0,255,135,.3);
}body.dark .toast{background:var(--surface2);border:1px solid var(--border2);color:var(--accent);box-shadow:0 0 20px var(--glow)}body.dark .toast.warn{background:rgba(239,68,68,.15);color:#ff6b6b;border-color:rgba(239,68,68,.3)}body.dark .toast.success{background:rgba(0,255,135,.1);color:var(--accent);border-color:var(--accent2)}body.dark .active-tag button{color:#000}body.dark .filter-trigger-btn:hover,body.dark .fmodal-pill:hover{border-color:var(--border2);background:rgba(0,255,135,.06);color:var(--text)}body.dark .filter-trigger-btn.has-filter,body.dark .fmodal-pill.fpill-active{background:var(--accent);border-color:var(--accent);color:#000}body.dark .filter-trigger-btn .ftb-badge{background:rgba(0,0,0,.3);color:#fff}body.dark .filter-trigger-btn:not(.has-filter) .ftb-badge{background:var(--border2);color:var(--text3)}body.dark .cat-item,body.dark .theme-toggle{background:var(--surface2);border-color:var(--border)}body.dark .theme-toggle:hover{border-color:var(--accent);background:rgba(0,255,135,.08);box-shadow:0 0 12px var(--glow)}body.dark .color-swatch{border-color:var(--border2)}body.dark .pp.inactive{background:var(--surface2);color:var(--text2);border-color:transparent}.modal-bg{inset:0;background:rgba(0,0,0,.35);backdrop-filter:blur(6px);z-index:100;display:none;justify-content:center;padding:16px;pointer-events:none}
.modal-bg.open{display:flex;pointer-events:auto}
.modal,.smodal{background:#fff;width:100%;max-width:480px;overflow-y:auto;pointer-events:auto}.modal{border-radius:16px;padding:26px;box-shadow:0 20px 60px rgba(0,0,0,.15);max-height:90vh}.modal-bg.sheet{align-items:flex-end;padding-bottom:62px}.smodal{border-radius:20px 20px 0 0;box-shadow:0 -8px 40px rgba(0,0,0,.12);padding:8px 0 0;max-height:70vh}.smodal-handle{width:36px;height:4px;background:#e8e8e3;border-radius:99px;margin:0 auto 20px}.smodal-body{padding:0 22px 32px}.modal-bg.sheet .smodal{animation:.22s slideUp}@keyframes slideUp{from{transform:translateY(30px);opacity:.7}to{transform:none;opacity:1}}.danger-zone{border:1px solid #fecaca;border-radius:10px;padding:14px;margin-top:14px;background:#fff8f8}.toast{bottom:80px;left:50%;transform:translateX(-50%) translateY(10px);background:#111;color:#fff;padding:10px 20px;border-radius:10px;z-index:200;opacity:0;transition:.25s;pointer-events:none;max-width:90vw}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.toast.success{background:#10b981}.dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex-shrink:0}.section-label{color:#94a3b8;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}.empty{padding:56px 20px;color:#999;grid-column:1/-1}.empty-title{font-size:15px;color:#6b7280;margin-bottom:8px;font-weight:500}.bnav,.cat-item-count,.tag-row{color:#94a3b8}.cat-chip{padding:3px 8px;border-radius:6px;white-space:nowrap}.active-tag,.bnav span,.io-btn,.pp{font-weight:500}.divider{border:none;border-top:1px solid #e8e8e3;margin:14px 0}.tag-row{display:flex;gap:5px;font-size:11px;white-space:nowrap}.cat-item,.profile-bar-inner{display:flex;align-items:center}.cat-item{gap:10px;padding:8px 12px;border:1px solid #e8e8e3;border-radius:8px;margin-bottom:8px;background:#fff}.color-swatch{width:22px;height:22px;border-radius:6px;flex-shrink:0;cursor:pointer;border:2px solid #e8e8e3;transition:transform .12s}.bnav,.pp{transition:.15s}.color-swatch:hover{transform:scale(1.1)}input[type=color]{opacity:0;position:absolute;width:0;height:0}.profile-bar{background:#fff;border-bottom:1px solid #e8e8e3;padding:0 16px}.profile-bar-inner{max-width:960px;margin:0 auto;height:42px;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.profile-bar-inner::-webkit-scrollbar{display:none}.pp{display:inline-flex;align-items:center;gap:5px;padding:4px 14px;border-radius:20px;font-size:12.5px;cursor:pointer;border:1.5px solid transparent;white-space:nowrap;flex-shrink:0;background:0 0}.pp.inactive{background:#f4f4f0;color:#555;border-color:transparent}.pp.inactive:hover{background:#e5e5e0}

/* Bottom Navigation - Mobile Only */
.bot-nav{
  bottom:0;
  left:0;
  right:0;
  background:#fff;
  border-top:1px solid #e8e8e3;
  z-index:90;
  display:none;
  align-items:stretch;
  height:62px;
  padding-bottom:env(safe-area-inset-bottom);
  position:fixed;
}

/* Show bot-nav only on mobile */
@media(max-width:767px){
  .bot-nav{
    display:flex;
  }
}

.active-tag button,.bnav{background:0 0;cursor:pointer}.bot-nav-inner{max-width:1100px;margin:0 auto;display:flex;width:100%;align-items:stretch}.bnav{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:none;padding:6px 4px;position:relative}.bnav:hover{color:#111;background:#fafaf8}.bnav svg{width:19px;height:19px;flex-shrink:0}.bnav span{font-size:9.5px;line-height:1}

/* ── Capture Box: 1 Row Desktop, 2 Rows Mobile ── */
.capture-box{
  background:#fff;
  border:1px solid #e8e8e3;
  border-radius:14px;
  padding:16px;
  margin-bottom:18px;
  transition:box-shadow .2s;
  position:relative;
  z-index:5;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.capture-box:focus-within{
  border-color:#c8c8c0;
  box-shadow:0 2px 16px rgba(0,0,0,.06);
}

/* Desktop: 1 Row */
@media(min-width:768px){
  .capture-box{
    flex-direction:row;
    align-items:center;
  }
  
  .capture-box > .inp{
    flex:1;
    min-width:0;
  }
  
  .capture-actions{
    display:flex;
    gap:10px;
    align-items:center;
    flex-shrink:0;
  }
  
  .capture-actions .inp{
    width:160px;
  }
  
  .capture-actions .btn{
    white-space:nowrap;
    padding:10px 20px;
  }
}

/* Mobile: 2 Rows */
@media(max-width:767px){
  .capture-box{
    padding:12px;
  }
  
  .capture-box > .inp{
    width:100%;
  }
  
  .capture-actions{
    display:flex;
    gap:8px;
    align-items:center;
  }
  
  .capture-actions .inp{
    flex:1;
    min-width:0;
  }
  
  .capture-actions .btn{
    flex-shrink:0;
    padding:10px 16px;
  }
  
  .capture-actions .btn .btn-text{
    display:none;
  }
  
  .capture-actions .btn{
    width:44px;
    height:44px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
  }

  .capture-actions .btn svg{
    margin:0;
    width:18px;
    height:18px;
    padding:0;
  }
}
   
  
  
  .capture-btn svg{
    width:14px;
    height:14px;
  }


.io-grid{display:grid;gap:8px;margin-top:8px}.io-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:12px;border-radius:10px;border:1.5px solid #e8e8e3;background:#fafaf8;cursor:pointer;transition:.15s;color:#333;font-size:11.5px}.io-btn:hover{border-color:#111;background:#f0f0ec;color:#111}.io-btn svg{width:20px;height:20px}.idea-count-lbl{font-size:13px;color:#6b7280;font-weight:500}.active-filters-bar{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}.active-tag{display:inline-flex;align-items:center;gap:5px;background:#111;color:#fff;font-size:11px;padding:3px 10px;border-radius:99px}.active-tag button{border:none;color:#fff;opacity:.6;padding:0;line-height:1;font-size:13px;display:flex;align-items:center}.active-tag button:hover{opacity:1}.detail-grid{display:grid;gap:10px;margin-bottom:16px}.detail-box{background:#fafaf8;border-radius:10px;padding:12px 14px}.card-date,.card-num{color:#cbd5e1}body.dark .card-status-tag{background:var(--surface2);color:var(--text2)}body.dark .detail-status-btn[data-active=false]{background:var(--surface2);color:var(--text2);border-color:var(--border)}@media(max-width:720px){.stat-grid{display:grid;grid-template-columns:repeat(3,1fr)}.ideas-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}}@media(max-width:520px){main{padding:16px 12px 90px}.header-inner{padding:0 14px}.stat-grid{gap:8px}.ideas-grid{grid-template-columns:1fr;gap:10px}}@media(max-width:400px){.detail-grid{grid-template-columns:1fr}}@keyframes fadeInUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.card-appear{animation:.2s both fadeInUp}

/* ── AI Components ── */
.btn-ai{background:linear-gradient(135deg,#00ff87,#10b981);color:#000;border-radius:10px;padding:11px 18px;font-size:13.5px;font-weight:600;border:none;gap:8px}
.btn-ai:hover{background:linear-gradient(135deg,#00c96a,#059669);box-shadow:0 4px 20px rgba(0,255,135,.35)}
.btn-ai:disabled{opacity:.6;cursor:not-allowed}
.ai-suggestion{background:#ecfdf5;color:#059669;border:1.5px solid #a7f3d0;border-radius:20px;padding:5px 12px;font-size:12px;font-weight:500;cursor:pointer;transition:.15s;font-family:inherit}
.ai-suggestion:hover{background:#d1fae5;border-color:#10b981}
.ai-result-item{background:#fafaf8;border:1.5px solid #e8e8e3;border-radius:10px;padding:10px 14px;transition:.15s;font-size:10px}
.ai-result-item:hover{border-color:#c8c8c0}
.ai-spinner{width:24px;height:24px;border:2.5px solid #e8e8e3;border-top-color:#00ff87;border-radius:50%;animation:.7s linear infinite spin;margin:0 auto}

/* Mobile AI modal — bottom sheet */
@media(max-width:767px){
  #modalAI{
    align-items:flex-end;
    padding:0;
  }
  .modal-ai{
    max-height:calc(100dvh - 56px);
    height:auto;
    border-radius:20px 20px 0 0;
    padding:20px 18px calc(20px + env(safe-area-inset-bottom));
    width:100%;
    max-width:100%;
  }
  .modal-ai::before{
    content:'';
    display:block;
    width:36px;
    height:4px;
    background:#e8e8e3;
    border-radius:99px;
    margin:0 auto 18px;
  }
  #modalAI.open{
    animation:.22s slideUp;
  }
  /* Textarea lebih compact di mobile */
  .modal-ai #aiPromptInput{
    min-height:72px;
    font-size:14px;
  }
  /* Row kategori: stack vertikal agar tidak jepit */
  .modal-ai .ai-cat-row{
    flex-wrap:wrap;
    gap:6px;
  }
  .modal-ai #aiTargetCat{
    width:100%;
    min-width:0;
  }
  .ai-result-item{
    font-size:11px;
  }
  .ai-result-item label span{
    font-size:11px;
  }
}

body.dark .ai-suggestion{background:rgba(0,255,135,.1);color:var(--accent);border-color:rgba(0,255,135,.3)}
body.dark .ai-suggestion:hover{background:rgba(0,255,135,.2);border-color:var(--accent)}
body.dark .ai-result-item{background:var(--surface2);border-color:var(--border)}
body.dark .ai-result-item:hover{border-color:var(--accent)}
body.dark .ai-spinner{border-color:var(--border2);border-top-color:var(--accent)}
body.dark .btn-ai:hover{box-shadow:0 4px 20px rgba(0,255,135,.4)}

/* ── Chat Components ── */
.head-chat{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
  flex-shrink:0;
  padding:12px 16px;
  background:#fff;
  border-bottom:1px solid #e8e8e3;
  margin:-26px -26px 0 -26px;
}
.chat-ico{
  width:28px;
  height:28px;
  background:#10b981;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
#chatMessages{
  background:#fafafa;
  padding:12px;
  margin:0;
  overflow-y:auto;
  height:100%;
  display:block;
  flex-direction:row;
  padding-top:40px;
}

/* Mobile: less padding for more space */
@media(max-width:767px){
  #chatMessages{
    padding:8px;
  }
}
#chatMessages::-webkit-scrollbar{
  width:6px;
}
#chatMessages::-webkit-scrollbar-thumb{
  background:#d1d5db;
  border-radius:4px;
}

/* Mobile chat improvements */
@media(max-width:767px){
  .modal-chat{
    max-height:100vh;
    height:100vh;
    border-radius:0;
    max-width:100%;
    padding:0;
  }
  .modal-bg.chat-modal-bg{
    padding:0;
  }
  .head-chat{
    position:sticky;
    top:0;
    z-index:10;
    background:#fff;
    padding:12px 12px;
    margin:0;
  }
  .chat-msg-user,
  .chat-msg-ai{
    margin-bottom:20px;
    display:flex;
  }
}
.typing-dots{display:flex;gap:4px;align-items:center}
.typing-dots span{width:6px;height:6px;border-radius:50%;background:#94a3b8;animation:1.4s ease-in-out infinite typingDot}
.typing-dots span:nth-child(2){animation-delay:.2s}
.typing-dots span:nth-child(3){animation-delay:.4s}
@keyframes typingDot{0%,60%,100%{opacity:.3;transform:scale(.8)}30%{opacity:1;transform:scale(1)}}

/* Chat bubble styling */
.chat-msg-user,
.chat-msg-ai{
  display:flex;
  gap:8px;
  margin-bottom:16px;
}
.chat-msg-user{
  flex-direction:row-reverse;
}
.chat-bubble-user{
  background:#eff6ff;
  border:1px solid #bfdbfe;
  line-height:1.6;
  border-radius:12px;
  padding:10px 14px;
  font-size:13px;
}
.chat-bubble-ai{
  background:#fff;
  border:1px solid #e5e7eb;
  line-height:1.6;
  border-radius:12px;
  padding:10px 14px;
  font-size:13px;
}
.chat-avatar-user,
.chat-avatar-ai{
  width:32px;
  height:32px;
  border-radius:50%;
  background:#10b981;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  flex-shrink:0;
}

/* Mobile: smaller avatar */
@media(max-width:767px){
  .chat-avatar-user,
  .chat-avatar-ai{
    width:28px;
    height:28px;
    font-size:12px;
  }
}
.chat-empty-title{
  color:#333;
}
.chat-bubble-ai::-webkit-scrollbar-thumb,
.chat-bubble-user::-webkit-scrollbar-thumb{
  background:#d1d5db;
  border-radius:4px;
}

/* Dark mode chat */
body.dark #chatMessages{background:var(--surface2)}
body.dark #chatMessages::-webkit-scrollbar-thumb{background:#0a2a1a}
body.dark .head-chat{
  background:var(--surface);
  border-bottom-color:var(--border);
}
body.dark .chat-bubble-user{
  background:rgba(59,130,246,.12);
  border-color:rgba(59,130,246,.3);
  color:var(--text);
}
body.dark .chat-bubble-ai{
  background:var(--surface);
  border-color:var(--border);
  color:var(--text);
}
body.dark .chat-empty-title{
  color:var(--text);
}
body.dark .chat-time{
  color:var(--text3);
}

/* ── Chat Markdown Styling ── */
#chatMessages strong{font-weight:600;color:#111}
#chatMessages em{font-style:italic;opacity:.9}
#chatMessages code{padding:2px 6px;border-radius:4px;font-family:'DM Mono',monospace;font-size:12px;}
#chatMessages h1,#chatMessages h2,#chatMessages h3{line-height:1.3;margin:20px 0 10px;font-weight:600}
#chatMessages h1:first-child,#chatMessages h2:first-child,#chatMessages h3:first-child{margin-top:0}
#chatMessages h1{font-size:20px}
#chatMessages h2{font-size:18px}
#chatMessages h3{font-size:16px}
#chatMessages p{margin:10px 0;line-height:1.7}
#chatMessages p:first-child{margin-top:0}
#chatMessages p:last-child{margin-bottom:0}
#chatMessages ul,#chatMessages ol{margin:10px 0;padding-left:24px;line-height:1.7}
#chatMessages ul:first-child,#chatMessages ol:first-child{margin-top:0}
#chatMessages ul:last-child,#chatMessages ol:last-child{margin-bottom:0}
#chatMessages li{margin:6px 0;line-height:1.7}
#chatMessages li:first-child{margin-top:0}
#chatMessages li:last-child{margin-bottom:0}
#chatMessages ul li{list-style-type:disc}
#chatMessages ol li{list-style-type:decimal}
#chatMessages ul ul,#chatMessages ol ul{margin:4px 0}
#chatMessages ul ol,#chatMessages ol ol{margin:4px 0}
/* Additional dark-mode fixes to improve contrast for stats, hover and active states */
body.dark .bnav.active-nav,
body.dark .card-title,
body.dark .cat-item-name,
body.dark .detail-title{
  color:var(--text) !important;
}

body.dark .io-btn:hover svg,
body.dark .smenu-item:hover svg,
body.dark .bnav:hover svg{
  color:var(--accent) !important;
}

/* Stat card text contrast */
body.dark .stat-val{color:var(--accent) !important}
body.dark .stat-lbl{color:var(--text3) !important}
body.dark .stat-card{background:var(--surface) !important;border-color:var(--border) !important}

/* Active stat should remain highlighted but readable */
body.dark .stat-card.active-stat{border-color:var(--accent) !important}

/* Ensure elements that used hard-coded dark colors get overridden in dark mode */
body.dark .bnav.active-nav,.bnav:hover{color:var(--accent) !important}

#chatMessages table{border-radius:8px;overflow:hidden;margin:12px 0}
#chatMessages table:first-child{margin-top:0}
#chatMessages table:last-child{margin-bottom:0}
#chatMessages hr{border:none;border-top:1px solid #e8e8e3;margin:12px 0}
#chatMessages input[type="checkbox"]{accent-color:#3b82f6;cursor:default}
#chatMessages blockquote{border-left:3px solid #e8e8e3;padding-left:12px;margin:10px 0;color:#666}
#chatMessages blockquote:first-child{margin-top:0}
#chatMessages blockquote:last-child{margin-bottom:0}
body.dark #chatMessages {background:var(--surface)}
body.dark #chatMessages strong{color:var(--accent)}
body.dark #chatMessages h1,body.dark #chatMessages h2,body.dark #chatMessages h3{color:var(--text)}
body.dark #chatMessages p{color:var(--text)}
body.dark #chatMessages ul,body.dark #chatMessages ol{color:var(--text)}
body.dark #chatMessages li{color:var(--text)}
body.dark #chatMessages code{color:#6ee7b7;}
body.dark #chatMessages table th{background:var(--surface2);border-color:var(--border);color:var(--text2)}
body.dark #chatMessages table td{border-color:var(--border);color:var(--text)}
body.dark #chatMessages hr{border-top-color:var(--border)}
body.dark #chatMessages blockquote{border-left-color:var(--accent);color:var(--text3)}
body.dark #chatMessages input[type="checkbox"]{accent-color:var(--accent)}

/* ── Chat Suggested Questions ── */
.chat-suggestion-btn{
  background:#fff;
  border:1.5px solid #e8e8e3;
  border-radius:8px;
  padding:8px 12px;
  font-size:12px;
  color:#374151;
  cursor:pointer;
  transition:.15s;
  font-family:inherit;
  font-weight:500;
  line-height:1.4;
  text-align:left;
}
.chat-suggestion-btn:hover{
  background:#f9fafb;
  border-color:#10b981;
  color:#10b981;
}
body.dark .chat-suggestion-btn{
  background:var(--surface2);
  border-color:var(--border);
  color:var(--text2);
}
body.dark .chat-suggestion-btn:hover{
  background:rgba(0,255,135,.08);
  border-color:var(--accent);
  color:var(--accent);
}
body.dark #chatSuggestions{
  background:var(--surface);
  border-top-color:var(--border);
  border-bottom-color:var(--border);
}

/* ── Chat Rate Limit Warning Dark Mode ── */
body.dark #chatRateLimit{
  background:rgba(249,115,22,.1);
  border-color:rgba(249,115,22,.3);
  color:#fb923c;
}

/* ── Desktop 4 Column Grid ── */
@media(min-width:1200px){
  .ideas-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
}
@media(min-width:1400px){
  .ideas-grid{grid-template-columns:repeat(4,1fr)}
}

/* ── Wider Container for Desktop ── */
@media(min-width:1200px){
  .header-inner,main,.profile-bar-inner{max-width:1280px}
}

/* ── Chat Modal Width ── */
.modal-chat{max-width:100%;width:100%}
@media(min-width:768px){
  .modal-chat{max-width:80%;width:80%}
}
@media(min-width:1400px){
  .modal-chat{max-width:1120px}
}

/* Code Block Syntax Highlighting - Green Smooth Style */
pre {
  background: linear-gradient(135deg, #0a2f1f 0%, #0d3d2a 100%);
  border-radius: 10px;
  overflow-x: auto;
  padding: 16px;
  border: 1px solid rgba(16, 185, 129, 0.2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

pre code {
  font-family: 'DM Mono', monospace;
  font-size: 12.5px;
  line-height: 1.7;
  color: #e8e8e8;
  display: block;
}

/* Green Smooth Syntax Colors */
pre code .hljs-keyword,
pre code .hljs-selector-tag,
pre code .hljs-literal,
pre code .hljs-section,
pre code .hljs-link {
  color: #6ee7b7; /* Mint green for keywords */
  font-weight: 600;
}

pre code .hljs-function,
pre code .hljs-title {
  color: #34d399; /* Emerald for functions */
  font-weight: 500;
}

pre code .hljs-string,
pre code .hljs-attr,
pre code .hljs-template-variable {
  color: #a7f3d0; /* Light mint for strings */
}

pre code .hljs-number,
pre code .hljs-meta {
  color: #10b981; /* Green for numbers */
}

pre code .hljs-variable,
pre code .hljs-params {
  color: #d1fae5; /* Very light mint for variables */
}

pre code .hljs-comment,
pre code .hljs-quote {
  color: #6b7280;
  font-style: italic;
  opacity: 0.8;
}

pre code .hljs-class,
pre code .hljs-type {
  color: #72f1b8; /* Mint green for classes */
  font-weight: 500;
}

pre code .hljs-built_in,
pre code .hljs-builtin-name {
  color: #fede5d; /* Yellow for built-ins */
}

pre code .hljs-tag,
pre code .hljs-name {
  color: #ff6ac1;
}

pre code .hljs-attribute {
  color: #57c7ff;
}

pre code .hljs-regexp,
pre code .hljs-symbol {
  color: #ff9d00;
}

/* Dark mode adjustments */
body.dark pre {
  background: linear-gradient(135deg, #0a0a14 0%, #0d1117 100%);
  border-color: rgba(0, 255, 135, 0.2);
  box-shadow: 0 4px 24px rgba(0, 255, 135, 0.08), inset 0 1px 0 rgba(0, 255, 135, 0.05);
}

body.dark pre code {
  color: #e8e8e8;
}

/* Glow effect untuk dark mode - Green theme */
body.dark pre code .hljs-keyword,
body.dark pre code .hljs-selector-tag {
  color: #6ee7b7;
  text-shadow: 0 0 8px rgba(110, 231, 183, 0.4);
}

body.dark pre code .hljs-function,
body.dark pre code .hljs-title {
  color: #34d399;
  text-shadow: 0 0 8px rgba(52, 211, 153, 0.3);
}

body.dark pre code .hljs-string {
  color: #a7f3d0;
  text-shadow: 0 0 6px rgba(167, 243, 208, 0.25);
}

body.dark pre code .hljs-number {
  color: #10b981;
  text-shadow: 0 0 6px rgba(16, 185, 129, 0.3);
}

/* Scrollbar untuk code blocks */
pre::-webkit-scrollbar {
  height: 8px;
}

pre::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}

pre::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #10b981, #34d399);
  border-radius: 4px;
}

pre::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, #059669, #10b981);
}


/* Chat table styling */
.chat-table-wrapper{
  overflow-x:auto;
  margin:12px 0;
  -webkit-overflow-scrolling:touch;
  border-radius:8px;
  display:block;
  width:100%;
}
.chat-table-wrapper::-webkit-scrollbar{
  height:6px;
}
.chat-table-wrapper::-webkit-scrollbar-thumb{
  background:#d1d5db;
  border-radius:4px;
}
.chat-table{
  width:auto;
  min-width:100%;
  border-collapse:collapse;
  margin:0;
  font-size:11px;
  table-layout:auto;
  display:table;
}
.chat-table-th{
  border:1px solid #e8e8e3;
  padding:8px 12px;
  background:#f4f4f0;
  text-align:left;
  font-weight:600;
  white-space:nowrap;
}
.chat-table-td{
  border:1px solid #e8e8e3;
  padding:8px 12px;
  white-space:nowrap;
}
body.dark .chat-table-wrapper::-webkit-scrollbar-thumb{
  background:#0a2a1a;
}
body.dark .chat-table-th{
  background:var(--surface2);
  border-color:var(--border);
  color:var(--text2);
}
body.dark .chat-table-td{
  border-color:var(--border);
  color:var(--text);
}


/* Chat inline code and markdown elements */
.chat-inline-code{
  background:#f4f4f0;
  padding:2px 6px;
  border-radius:4px;
  font-family:'DM Mono',monospace;
  font-size:12px;
  color:#10b981;
}
.chat-hr{
  border:none;
  border-top:1px solid #e8e8e3;
  margin:12px 0;
}
.chat-blockquote{
  border-left:3px solid #e8e8e3;
  padding-left:12px;
  margin:8px 0;
  color:#666;
  font-style:italic;
}
body.dark .chat-inline-code{
  background:var(--surface);
  color:#6ee7b7;
  border:1px solid var(--border);
}
body.dark .chat-hr{
  border-top-color:var(--border);
}
body.dark .chat-blockquote{
  border-left-color:var(--border);
  color:var(--text3);
}


/* Chat content wrapper */
.chat-content{
  flex:1;
  max-width:100%;
}

/* Mobile: much wider bubbles, less whitespace */
@media(max-width:767px){
  .chat-msg-user,
  .chat-msg-ai{
    gap:6px;
  }
  
  .chat-msg-ai .chat-content{
    max-width:calc(100% - 34px);
  }
  
  .chat-msg-user .chat-content{
    max-width:calc(100% - 34px);
  }
}


/* Chat copy button */
.chat-copy-btn-bottom{
  background:transparent;
  border:none;
  border-radius:4px;
  padding:4px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.2s;
  color:#94a3b8;
  opacity:.6;
}
.chat-copy-btn-bottom:hover{
  opacity:1;
  color:#6b7280;
  background:rgba(0,0,0,.05);
}
.chat-copy-btn-bottom:active{
  transform:scale(0.9);
}
.chat-copy-btn-bottom.copied{
  color:#10B981;
  opacity:1;
}
body.dark .chat-copy-btn-bottom{
  color:var(--text3);
}
body.dark .chat-copy-btn-bottom:hover{
  color:var(--text2);
  background:rgba(0,255,135,.08);
}
body.dark .chat-copy-btn-bottom.copied{
  color:var(--accent);
}

/* ── Chat Action Buttons (Copy, Regenerate, Delete) ── */
.chat-action-btn{
  background:transparent;
  border:none;
  border-radius:4px;
  padding:4px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:.2s;
  color:#94a3b8;
  opacity:.7;
}
.chat-action-btn:hover{
  opacity:1;
  color:#6b7280;
  background:rgba(0,0,0,.05);
}
.chat-action-btn:active{
  transform:scale(0.92);
}
body.dark .chat-action-btn{
  color:var(--text3);
}
body.dark .chat-action-btn:hover{
  color:var(--text2);
  background:rgba(0,255,135,.08);
}

/* ── Chat Time Styling ── */
.chat-time{
  font-size:10px;
  color:#94a3b8;
  user-select:none;
}
body.dark .chat-time{
  color:var(--text3);
}


/* ── FAB (Floating Action Button) ── */
.fab{
  position:fixed;
  bottom:90px;
  right:16px;
  width:54px;
  height:54px;
  background:linear-gradient(135deg,#00ff87,#10b981);
  border-radius:50%;
  border:none;
  box-shadow:0 4px 20px rgba(0,255,135,.4);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.3s;
  z-index:80;
  color:#fff;
}
.fab:hover{
  transform:scale(1.1) rotate(90deg);
  box-shadow:0 6px 30px rgba(0,255,135,.6);
}
.fab:active{
  transform:scale(0.95);
}
body.dark .fab{
  box-shadow:0 4px 20px rgba(0,255,135,.3),0 0 40px rgba(0,255,135,.2);
}
@media(min-width:768px){
  .fab{
    bottom:40px;
    right:20px;
    width:56px;
    height:56px;
  }
}

/* ── Settings Dropdown ── */
.settings-dropdown{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  background:#fff;
  border:1px solid #e8e8e3;
  border-radius:12px;
  box-shadow:0 8px 32px rgba(0,0,0,.12);
  min-width:220px;
  padding:8px;
  display:none;
  opacity:0;
  pointer-events:none;
  transform:translateY(-10px);
  transition:opacity .2s ease-out, transform .2s ease-out;
  z-index:1000;
}
.settings-dropdown.open{
  display:block;
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}
.settings-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:8px;
  cursor:pointer;
  transition:.15s;
  font-size:13px;
  color:#333;
  background:transparent;
  border:none;
  width:100%;
  text-align:left;
}
.settings-item:hover{
  background:#f4f4f0;
  color:#111;
}
.settings-item svg{
  width:16px;
  height:16px;
  color:#94a3b8;
  flex-shrink:0;
}
.settings-divider{
  height:1px;
  background:#e8e8e3;
  margin:6px 0;
}
body.dark .settings-dropdown{
  background:var(--surface);
  border-color:var(--border);
  box-shadow:0 8px 32px rgba(0,0,0,.4);
}
body.dark .settings-item{
  color:var(--text2);
}
body.dark .settings-item:hover{
  background:rgba(0,255,135,.08);
  color:var(--accent);
}
body.dark .settings-item svg{
  color:var(--text3);
}
body.dark .settings-divider{
  background:var(--border);
}

/* ── FAB Modal (Add Idea Choice) ── */
.fab-modal{
  position:fixed;
  bottom:160px;
  right:16px;
  background:#fff;
  border:1px solid #e8e8e3;
  border-radius:16px;
  box-shadow:0 8px 32px rgba(0,0,0,.15);
  padding:12px;
  display:none;
  z-index:79;
  min-width:200px;
}
.fab-modal.open{
  display:block;
  animation:.2s ease-out slideUpFab;
}
@media(min-width:768px){
  .fab-modal{
    bottom:110px;
    right:20px;
  }
}
@keyframes slideUpFab{
  from{
    opacity:0;
    transform:translateY(10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}
.fab-choice{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  border-radius:10px;
  cursor:pointer;
  transition:.15s;
  background:transparent;
  border:none;
  width:100%;
  text-align:left;
  font-size:13px;
  font-weight:500;
  color:#333;
}
.fab-choice:hover{
  background:#f4f4f0;
}
.fab-choice svg{
  width:18px;
  height:18px;
  flex-shrink:0;
}
body.dark .fab-modal{
  background:var(--surface);
  border-color:var(--border);
  box-shadow:0 8px 32px rgba(0,0,0,.4);
}
body.dark .fab-choice{
  color:var(--text);
}
body.dark .fab-choice:hover{
  background:rgba(0,255,135,.08);
  color:var(--accent);
}


/* ── Capture Box: Sticky & Simple ── */
.capture-content{
  padding:0;
}

/* Desktop: Sticky below header + profile bar, no gap */
@media(min-width:768px){
  main{
    padding-top:0; /* Remove top padding to make capture-box stick to profile bar */
  }
  
  .capture-box{
    position:sticky;
    top:70px; /* header 62px + profile bar 42px */
    z-index:40;
    padding:18px 20px;
    margin-top:0;
    margin-bottom:20px;
    border-radius:0; /* No rounded corners for seamless look */
    box-shadow:0 2px 8px rgba(0,0,0,.06); /* Add subtle shadow */
  }
  
  .stat-grid{
    margin-top:20px; /* Remove top margin from stats */
  }
}

/* Mobile: Always visible */
@media(max-width:767px){
  .capture-box{
    padding:12px;
  }
}

body.dark .capture-icon{
  color:var(--accent);
}

/* ── Header Search Bar ── */
.header-search{
  position:relative;
  flex:1;
  max-width:400px;
  display:none;
}
.header-search-icon{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  color:#94a3b8;
  pointer-events:none;
}
.header-search-input{
  width:100%;
  padding:9px 14px 9px 36px;
  border:1.5px solid #e8e8e3;
  border-radius:10px;
  font-size:13px;
  outline:0;
  background:#fafaf8;
  color:#111;
  transition:.15s;
}
.header-search-input:focus{
  border-color:#111;
  background:#fff;
  box-shadow:0 0 0 3px rgba(17,17,17,.06);
}
.header-search-input::placeholder{
  color:#cbd5e1;
}
body.dark .header-search-input{
  background:var(--surface2);
  border-color:var(--border);
  color:var(--text);
}
body.dark .header-search-input:focus{
  border-color:var(--accent);
  background:var(--surface);
  box-shadow:0 0 0 3px rgba(0,255,135,.1);
}
body.dark .header-search-input::placeholder{
  color:var(--text3);
}
body.dark .header-search-icon{
  color:var(--text3);
}

/* Show search on desktop */
@media(min-width:768px){
  .header-search{
    display:block;
  }
  .header-title{
    display:block;
  }
}

/* Hide title on small mobile, show search */
@media(max-width:520px){
  .header-title{
    display:none;
  }
  .header-search{
    display:block;
    max-width:none;
  }
}

/* ── User Profile Modal ── */
.user-profile-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  background:#f4f4f0;
  border-radius:12px;
  margin-bottom:16px;
}
.user-avatar-big{
  width:42px;
  height:42px;
  border-radius:50%;
  background:#111;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:17px;
  font-weight:700;
  flex-shrink:0;
}
.user-name-big{
  font-size:14px;
  font-weight:600;
  color:#111;
}
.user-welcome-text{
  font-size:13px;
  color:#333;
  margin-bottom:16px;
  line-height:1.6;
}
.user-greeting-name{
  color:#111;
  font-weight:600;
}
body.dark .user-profile-card{
  background:var(--surface2);
}
body.dark .user-avatar-big{
  background:var(--accent);
  color:#000;
}
body.dark .user-name-big{
  color:var(--text);
}
body.dark .user-welcome-text{
  color:var(--text2);
}
body.dark .user-greeting-name{
  color:var(--accent);
}

/* ── Idea Count Label ── */
.idea-count-num{
  color:#111;
  font-weight:600;
}
body.dark .idea-count-num{
  color:var(--accent);
}

/* ── Empty State Dark Mode ── */
body.dark .empty{
  color:var(--text3);
}
body.dark .empty > div:nth-child(2){
  color:var(--text);
}

/* ── Filter Button Improvements ── */
.filter-trigger-btn{
  font-size:12px;
  padding:7px 12px;
}
.filter-trigger-btn span{
  font-size:12px;
}

/* ── Chat Bubble Mobile Fix ── */
@media(max-width:767px){
  .chat-bubble-ai{
    margin-right:0;
    padding:11px 13px;
    font-size:13px;
    width:100%;
  }
  .chat-bubble-user{
    margin-right:0;
    margin-left:0;
    padding:11px 13px;
    font-size:13px;
    width:100%;
  }
}

/* ── Chat Copy Button (Consolidated) ── */
/* Duplikat dihapus - hanya 1 definisi .chat-copy-btn-bottom */


/* ── Settings Button ── */
.settings-btn{
  background:#fafaf8;
  cursor:pointer;
  width:36px;
  height:36px;
  border-radius:9px;
  border:1.5px solid #e8e8e3;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.2s;
  color:#6b7280;
  position:relative;
}
.settings-btn:hover{
  background:rgba(0,0,0,.05);
  color:#111;
  border-color:#c8c8c0;
}
body.dark .settings-btn{
  background:var(--surface2);
  border-color:var(--border);
  color:var(--text3);
}
body.dark .settings-btn:hover{
  background:rgba(0,255,135,.08);
  color:var(--accent);
  border-color:var(--accent);
}

/* ── User Info & Auth UI ── */
#userInfo{
  font-size:12px;
  line-height:1.3;
}
#userInfo img{
  border:2px solid #e8e8e3;
}
body.dark #userInfo img{
  border-color:var(--border);
}
#loginBtn, #logoutBtn{
  flex-shrink:0;
}

/* Mobile: Hide user info text, show only avatar/icon */
@media(max-width:767px){
  #userInfo > div > div:last-child{
    display:none;
  }
}

/* ── User Menu Button & Dropdown ── */
.user-menu-btn{
  background:#fafaf8;
  cursor:pointer;
  width:40px;
  height:40px;
  border-radius:50%;
  border:2px solid #e8e8e3;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.2s;
  padding:0;
  flex-shrink:0;
}
.user-menu-btn:hover{
  border-color:#111;
  transform:scale(1.05);
}
body.dark .user-menu-btn{
  background:var(--surface2);
  border-color:var(--border);
}
body.dark .user-menu-btn:hover{
  border-color:var(--accent);
}

.user-menu-dropdown{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  background:#fff;
  border:1px solid #e8e8e3;
  border-radius:12px;
  box-shadow:0 8px 32px rgba(0,0,0,.12);
  min-width:260px;
  max-width:320px;
  padding:8px;
  display:none;
  opacity:0;
  pointer-events:none;
  transform:translateY(-10px);
  transition:opacity .2s ease-out, transform .2s ease-out;
  z-index:1000;
}
.user-menu-dropdown.open{
  display:block;
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}
body.dark .user-menu-dropdown{
  background:var(--surface);
  border-color:var(--border);
  box-shadow:0 8px 32px rgba(0,0,0,.4);
}

.user-menu-header{
  padding:12px;
  border-radius:8px;
  background:#f4f4f0;
}
body.dark .user-menu-header{
  background:var(--surface2);
}

.user-menu-info{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:8px;
  background:#fafaf8;
}
.user-menu-info svg{
  width:16px;
  height:16px;
  color:#94a3b8;
  flex-shrink:0;
}
body.dark .user-menu-info{
  background:var(--surface2);
}
body.dark .user-menu-info svg{
  color:var(--text3);
}