:root{
  --paper:oklch(97.5% 0.012 75);
  --paper-2:oklch(95% 0.014 70);
  --paper-3:oklch(91.5% 0.017 65);
  --ink:oklch(19% 0.015 280);
  --ink-soft:oklch(40% 0.02 280);
  --on-ink:oklch(96% 0.01 80);
  --on-ink-soft:oklch(80% 0.02 80);
  --line:oklch(88% 0.012 70);
  --muted:oklch(55% 0.015 70);
  --muted-2:oklch(74% 0.012 70);
  --amber:oklch(70% 0.15 55);
  --amber-soft:oklch(88% 0.07 60);
  --violet:oklch(66% 0.13 295);
  --violet-soft:oklch(88% 0.05 295);
  --green:oklch(68% 0.14 150);
  --green-soft:oklch(90% 0.06 150);
  --red:oklch(64% 0.18 25);
  --red-soft:oklch(90% 0.06 25);
  --font-display:'Sora', system-ui, sans-serif;
  --font-body:'Plus Jakarta Sans', system-ui, sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0; height:100%; background:var(--paper); font-family:var(--font-body); color:var(--ink); -webkit-tap-highlight-color:transparent;}
button{font-family:inherit; border:none; background:none; cursor:pointer; color:inherit;}
input, textarea{font-family:inherit;}
[hidden]{display:none !important;}

.blob{position:absolute; border-radius:999px; filter:blur(80px); pointer-events:none;}

/* ---- login ---- */
.login-screen{position:relative; min-height:100dvh; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:24px;}
.login-card{width:100%; max-width:340px; border-radius:26px; padding:32px 26px; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; position:relative; z-index:1;}
.login-card .logo{width:48px;height:48px;border-radius:16px; background:linear-gradient(145deg, var(--amber-soft), var(--violet-soft)); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:21px; color:var(--ink); margin-bottom:8px;}
.login-title{font-family:var(--font-display); font-weight:200; font-size:26px; margin:0;}
.login-sub{font-size:12.5px; color:var(--muted); margin:0 0 14px;}
.field-input{width:100%; height:46px; border-radius:14px; background:var(--paper-2); border:1px solid var(--line); padding:0 15px; font-size:13.5px; color:var(--ink); font-family:inherit;}
.login-card .field-input{width:100%; text-align:left; margin-bottom:12px;}
.login-btn{width:100%; height:48px; border-radius:15px; font-weight:600; font-size:14px;}
.login-error{color:var(--red); font-size:12px; margin:10px 0 0;}

/* ---- glass ---- */
.glass{background:rgba(255,255,255,0.55); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); border:1px solid rgba(255,255,255,0.7); box-shadow:0 20px 36px -24px rgba(23,22,30,0.2);}

/* ---- app shell ---- */
.screen{position:relative; min-height:100dvh; max-width:460px; margin:0 auto; overflow-x:hidden;}
.atmosphere{position:fixed; inset:0; z-index:0; pointer-events:none; max-width:460px; margin:0 auto;}
.content{position:relative; z-index:1; padding:28px 20px 112px; display:flex; flex-direction:column; gap:16px; min-height:100dvh;}

.tabbar{position:fixed; left:20px; right:20px; bottom:22px; max-width:420px; margin:0 auto; z-index:2; height:62px; border-radius:22px; background:rgba(23,22,28,0.82); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); display:flex; align-items:center; justify-content:space-around; padding:0 8px;}
.tab-icon{width:46px;height:46px;border-radius:16px; display:flex; align-items:center; justify-content:center; color:oklch(96% 0.01 80 / 0.5);}
.tab-icon.active{background:var(--paper); color:var(--ink);}

/* ---- panel / list ---- */
.panel-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}

/* ---- ai chat ---- */
.ai-stage{display:flex; flex-direction:column; gap:14px; flex:1;}
.thread{display:flex; flex-direction:column; gap:10px; flex:1;}
.bubble{max-width:82%; padding:12px 15px; border-radius:18px; font-size:12.5px; line-height:1.5; white-space:pre-wrap;}
.bubble.assistant{align-self:flex-start; background:rgba(255,255,255,0.6); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,0.7); border-bottom-left-radius:5px; color:var(--ink-soft);}
.bubble.user{align-self:flex-end; background:var(--ink); color:var(--on-ink); border-bottom-right-radius:5px;}
.dock{position:sticky; bottom:0; width:100%; height:52px; border-radius:999px; background:rgba(255,255,255,0.7); backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,0.8); box-shadow:0 20px 36px -20px rgba(23,22,30,0.22); display:flex; align-items:center; padding:0 6px 0 16px; gap:8px; margin-top:auto;}
.dock-input{flex:1; border:none; background:none; font-size:13px; color:var(--ink); outline:none;}
.dock-send{width:38px;height:38px;border-radius:999px; background:var(--ink); color:var(--paper); display:flex; align-items:center; justify-content:center; flex-shrink:0;}

.empty-msg{font-size:12.5px; color:var(--muted); text-align:center; padding:20px 0;}

/* ---- toast ---- */
.control-toast{position:fixed; left:50%; bottom:100px; transform:translate(-50%,10px); max-width:320px; padding:12px 18px; border-radius:999px; background:var(--ink); color:var(--paper); font-size:12.5px; font-weight:600; text-align:center; box-shadow:0 20px 36px -20px rgba(23,22,30,0.4); z-index:60; opacity:0; transition:opacity .2s ease, transform .2s ease; pointer-events:none;}
.control-toast.show{opacity:1; transform:translate(-50%,0);}

/* ---- confirm sheet ---- */
.confirm-sheet{max-width:340px; margin:auto; text-align:center;}
.confirm-sheet p{font-size:13.5px; margin:6px 0 18px;}
.confirm-actions{display:flex; gap:10px;}
.confirm-actions button{flex:1; height:44px; border-radius:14px; font-weight:600; font-size:13px;}
.confirm-actions [data-no]{background:var(--paper-2); color:var(--ink);}
.confirm-actions [data-yes]{background:var(--red); color:#fff;}

/* ---- account sheet ---- */
.account-sheet label{display:block; font-size:10px; margin:9px 0 5px; color:var(--muted);}
.account-sheet input{width:100%; border:0; border-radius:14px; padding:12px; background:var(--paper-2); color:var(--ink); outline:0; font-size:12.5px;}
.account-error{color:var(--red); font-size:11.5px; margin:8px 0 0;}
.account-logout{width:100%; margin-top:12px; height:46px; border-radius:14px; background:var(--red-soft); color:oklch(32% 0.12 25); font-weight:600; font-size:13px;}