/* ============================================================
   Study Plan — styles
   テーマ: :root = ライト / [data-theme="dark"] または OS設定 = ダーク
============================================================ */

:root{
  --bg:#f5f6f9; --panel:#fff; --panel-2:#fafbfd;
  --ink:#1c2333; --ink-2:#586179; --ink-3:#9aa1b4;
  --line:#e8eaf0; --line-2:#f1f2f6;
  --brand:#3b6cf6; --brand-soft:#eef2ff; --brand-ink:#2c53c9;
  --ok:#16a34a; --warn:#f59e0b; --bad:#ef4444;
  --track:#eceef4;
  --shadow:0 1px 2px rgba(20,25,40,.04), 0 8px 24px rgba(20,25,40,.05);
  --shadow-lg:0 20px 60px rgba(20,25,40,.14);
  --radius:14px;
  --glass:rgba(255,255,255,.78);
  --glass-line:rgba(255,255,255,.9);
  --auth-ink:#1c2333;
  color-scheme:light;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0f1117; --panel:#171a22; --panel-2:#1b1f28;
    --ink:#e9ecf3; --ink-2:#98a0b4; --ink-3:#6c7488;
    --line:#252935; --line-2:#1f232d;
    --brand:#6f8cff; --brand-soft:#1c2340; --brand-ink:#9fb3ff;
    --ok:#34d399; --warn:#fbbf24; --bad:#f87171;
    --track:#232733;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
    --shadow-lg:0 24px 70px rgba(0,0,0,.5);
    --glass:rgba(23,26,34,.72);
    --glass-line:rgba(255,255,255,.08);
    --auth-ink:#e9ecf3;
    color-scheme:dark;
  }
}

:root[data-theme="dark"]{
  --bg:#0f1117; --panel:#171a22; --panel-2:#1b1f28;
  --ink:#e9ecf3; --ink-2:#98a0b4; --ink-3:#6c7488;
  --line:#252935; --line-2:#1f232d;
  --brand:#6f8cff; --brand-soft:#1c2340; --brand-ink:#9fb3ff;
  --ok:#34d399; --warn:#fbbf24; --bad:#f87171;
  --track:#232733;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
  --shadow-lg:0 24px 70px rgba(0,0,0,.5);
  --glass:rgba(23,26,34,.72);
  --glass-line:rgba(255,255,255,.08);
  --auth-ink:#e9ecf3;
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic","Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; font-size:14px; line-height:1.5;
}
button,input,textarea,select{font:inherit;color:inherit}
[hidden]{display:none !important}
.ico{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ============================================================
   BOOT
============================================================ */
.boot{
  position:fixed;inset:0;z-index:200;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
}
.boot.out{opacity:0;pointer-events:none;transition:opacity .35s}
.boot-logo{
  width:56px;height:56px;border-radius:16px;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(59,108,246,.35);
  animation:pulse 1.6s ease-in-out infinite;
}
.boot-logo .ico{width:28px;height:28px;stroke-width:1.7}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.boot-bar{width:160px;height:3px;background:var(--track);border-radius:99px;overflow:hidden}
.boot-bar span{display:block;height:100%;width:40%;background:var(--brand);border-radius:99px;animation:slide 1.1s ease-in-out infinite}
@keyframes slide{0%{transform:translateX(-110%)}100%{transform:translateX(310%)}}
.boot-txt{margin:0;font-size:12.5px;color:var(--ink-3)}

/* ============================================================
   AUTH SCREEN
============================================================ */
.auth-screen{
  position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:40px 20px;overflow:hidden;color:var(--auth-ink);
}

/* --- tech background --- */
.tech-bg{position:absolute;inset:0;overflow:hidden;z-index:0;background:var(--bg)}
.grid-plane{
  position:absolute;inset:-50% -50% 0;height:150%;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--brand) 16%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--brand) 16%, transparent) 1px, transparent 1px);
  background-size:46px 46px;
  transform:perspective(520px) rotateX(62deg) translateY(-12%);
  transform-origin:center top;
  mask-image:radial-gradient(ellipse 65% 55% at 50% 35%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 65% 55% at 50% 35%, #000 20%, transparent 78%);
  animation:gridflow 14s linear infinite;
  opacity:.75;
}
@keyframes gridflow{from{background-position:0 0}to{background-position:0 46px}}
.orb{position:absolute;border-radius:50%;filter:blur(78px);opacity:.5}
.orb-1{width:440px;height:440px;background:#3b6cf6;top:-140px;left:-100px;animation:float1 17s ease-in-out infinite}
.orb-2{width:380px;height:380px;background:#8b5cf6;bottom:-130px;right:-90px;animation:float2 21s ease-in-out infinite}
.orb-3{width:300px;height:300px;background:#06b6d4;top:45%;left:52%;animation:float3 25s ease-in-out infinite;opacity:.32}
@keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(70px,50px)}}
@keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(-60px,-45px)}}
@keyframes float3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-45px,55px) scale(1.14)}}
#netCanvas{position:absolute;inset:0;width:100%;height:100%;opacity:.5}
.scanline{
  position:absolute;left:0;right:0;height:150px;pointer-events:none;
  background:linear-gradient(to bottom, transparent, color-mix(in srgb, var(--brand) 9%, transparent), transparent);
  animation:scan 7s linear infinite;
}
@keyframes scan{0%{top:-160px}100%{top:100%}}

.theme-fab{
  position:absolute;top:22px;right:24px;z-index:5;
  width:42px;height:42px;border-radius:12px;cursor:pointer;
  background:var(--glass);border:1px solid var(--glass-line);color:var(--ink);
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(14px);
  box-shadow:var(--shadow);transition:.18s;
}
.theme-fab:hover{transform:translateY(-2px)}

/* --- layout --- */
.auth-wrap{
  position:relative;z-index:2;display:flex;gap:56px;align-items:center;
  width:100%;max-width:1000px;
}

/* --- brand side --- */
.auth-brand{flex:1;min-width:0;animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
.brand-badge{
  width:52px;height:52px;border-radius:15px;
  background:linear-gradient(135deg,#3b6cf6,#8b5cf6);color:#fff;
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;
  box-shadow:0 12px 34px rgba(59,108,246,.4);
}
.brand-badge .ico{width:27px;height:27px;stroke-width:1.7}
.auth-brand h1{margin:0 0 12px;font-size:46px;line-height:1.08;letter-spacing:-1.6px;font-weight:800}
.brand-sub{margin:0 0 26px;font-size:15px;line-height:1.85;color:var(--ink-2)}
.brand-feats{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-direction:column;gap:11px}
.brand-feats li{display:flex;align-items:center;gap:11px;font-size:13.5px;color:var(--ink-2)}
.brand-feats .ico{width:15px;height:15px;color:var(--ok);stroke-width:2.6}
.brand-stat{display:flex;gap:12px;padding-top:24px;border-top:1px solid var(--line)}
.brand-stat>div{flex:1}
.brand-stat b{display:block;font-size:24px;font-weight:800;letter-spacing:-1px;color:var(--brand)}
.brand-stat b i{font-size:12px;font-style:normal;letter-spacing:0;margin-left:1px}
.brand-stat span{font-size:11px;color:var(--ink-3)}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* --- card --- */
.auth-card{
  width:404px;flex:none;padding:30px 32px 26px;border-radius:20px;
  background:var(--glass);border:1px solid var(--glass-line);
  backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  box-shadow:var(--shadow-lg);
  animation:rise .7s .12s cubic-bezier(.2,.8,.2,1) both;
}

.auth-tabs{position:relative;display:flex;background:var(--track);border-radius:11px;padding:4px;margin-bottom:24px}
.atab{
  flex:1;position:relative;z-index:2;border:0;background:none;padding:9px;border-radius:8px;
  font-size:13.5px;font-weight:700;color:var(--ink-3);cursor:pointer;transition:color .2s;
}
.atab.on{color:var(--brand)}
.atab-ink{
  position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);
  background:var(--panel);border-radius:8px;box-shadow:var(--shadow);
  transition:transform .28s cubic-bezier(.4,0,.2,1);z-index:1;
}
.atab-ink.right{transform:translateX(100%)}

.field{margin-bottom:16px}
.field label{display:block;font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.input-wrap{position:relative;display:flex;align-items:center}
.input-wrap .lead{position:absolute;left:13px;color:var(--ink-3);pointer-events:none;transition:color .18s}
.input-wrap input{
  width:100%;padding:12px 13px 12px 40px;border-radius:11px;font-size:14px;outline:0;
  border:1.5px solid var(--line);background:var(--panel);transition:.18s;
}
.input-wrap input::placeholder{color:var(--ink-3)}
.input-wrap input:focus{border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 15%, transparent)}
.input-wrap input:focus ~ .lead, .input-wrap:focus-within .lead{color:var(--brand)}
.input-wrap input.bad{border-color:var(--bad)}
.eye{
  position:absolute;right:8px;border:0;background:none;color:var(--ink-3);cursor:pointer;
  padding:7px;border-radius:8px;display:flex;
}
.eye:hover{color:var(--brand);background:var(--brand-soft)}
.eye .i-shut{display:none}
.eye.show .i-open{display:none}
.eye.show .i-shut{display:block}
.valid-mark{position:absolute;right:13px;color:var(--ok);display:flex;animation:pop .28s cubic-bezier(.2,1.4,.4,1)}
.valid-mark .ico{stroke-width:2.8;width:16px;height:16px}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
.err{margin:6px 0 0;font-size:11.5px;color:var(--bad);min-height:0}
.hint{margin:8px 0 0;font-size:11px;color:var(--ink-3);text-align:center}

/* avatar picker */
.field-avatar{display:flex;flex-direction:column;align-items:center;margin-bottom:18px}
.avatar-drop{
  position:relative;width:82px;height:82px;border-radius:50%;cursor:pointer;
  border:2px dashed var(--line);display:flex;align-items:center;justify-content:center;
  background:var(--panel);overflow:hidden;transition:.2s;
}
.avatar-drop:hover{border-color:var(--brand);transform:scale(1.04)}
.avatar-drop img{width:100%;height:100%;object-fit:cover}
.avatar-ph{color:var(--ink-3);display:flex}
.avatar-ph .ico{width:26px;height:26px}
.avatar-drop img:not([hidden]) ~ .avatar-ph{display:none}
.avatar-edit{
  position:absolute;right:-2px;bottom:-2px;width:27px;height:27px;border-radius:50%;
  background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;
  border:2.5px solid var(--panel);
}
.avatar-edit .ico{width:12px;height:12px;stroke-width:2.4}

/* strength meter */
.strength{margin-top:11px}
.s-bars{display:flex;gap:4px;margin-bottom:7px}
.s-bars i{flex:1;height:4px;border-radius:99px;background:var(--track);transition:background .3s}
.strength[data-s="1"] .s-bars i:nth-child(-n+1){background:#ef4444}
.strength[data-s="2"] .s-bars i:nth-child(-n+2){background:#f59e0b}
.strength[data-s="3"] .s-bars i:nth-child(-n+3){background:#eab308}
.strength[data-s="4"] .s-bars i{background:#16a34a}
.s-head{display:flex;justify-content:space-between;align-items:center;font-size:11px;margin-bottom:9px}
.s-label{color:var(--ink-3);font-weight:600}
.strength[data-s="1"] .s-label{color:#ef4444}
.strength[data-s="2"] .s-label{color:#f59e0b}
.strength[data-s="3"] .s-label{color:#ca8a04}
.strength[data-s="4"] .s-label{color:#16a34a}
.s-entropy{color:var(--ink-3);font-variant-numeric:tabular-nums;font-family:ui-monospace,Menlo,Consolas,monospace}
.s-rules{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:5px 10px}
.s-rules li{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-3);transition:color .2s}
.s-rules .tick{
  width:13px;height:13px;border-radius:50%;border:1.5px solid var(--line);flex:none;position:relative;transition:.2s;
}
.s-rules li.ok{color:var(--ok)}
.s-rules li.ok .tick{background:var(--ok);border-color:var(--ok)}
.s-rules li.ok .tick::after{
  content:"";position:absolute;left:4px;top:1.5px;width:3px;height:6px;
  border:solid #fff;border-width:0 1.8px 1.8px 0;transform:rotate(43deg);
}

.s-note{margin:8px 0 0;font-size:10.5px;color:var(--ink-3);line-height:1.6}
.form-msg{
  margin:0 0 14px;padding:10px 13px;border-radius:10px;font-size:12.5px;line-height:1.6;
  background:color-mix(in srgb, var(--bad) 12%, transparent);color:var(--bad);
  border:1px solid color-mix(in srgb, var(--bad) 30%, transparent);
}
.form-msg.ok{background:color-mix(in srgb, var(--ok) 12%, transparent);color:var(--ok);border-color:color-mix(in srgb, var(--ok) 30%, transparent)}

.btn-submit{
  width:100%;display:flex;align-items:center;justify-content:center;gap:9px;
  border:0;border-radius:12px;padding:14px;cursor:pointer;font-size:14px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#3b6cf6,#6d5cf6);
  box-shadow:0 8px 24px rgba(59,108,246,.34);transition:.2s;position:relative;overflow:hidden;
}
.btn-submit::before{
  content:"";position:absolute;top:0;left:-100%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
}
.btn-submit:hover:not(:disabled)::before{animation:sheen .8s}
@keyframes sheen{to{left:130%}}
.btn-submit:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 30px rgba(59,108,246,.44)}
.btn-submit:active:not(:disabled){transform:translateY(0)}
.btn-submit:disabled{opacity:.65;cursor:not-allowed}
.btn-submit .arw{width:16px;height:16px;transition:transform .2s}
.btn-submit:hover:not(:disabled) .arw{transform:translateX(3px)}
.spin{
  width:15px;height:15px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  border-radius:50%;animation:spin .65s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.auth-alt{text-align:center;margin-top:14px}
.linkish{border:0;background:none;color:var(--brand);font-size:12.5px;font-weight:600;cursor:pointer;padding:4px}
.linkish:hover{text-decoration:underline}
.divider{position:relative;text-align:center;margin:18px 0 14px}
.divider::before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:var(--line)}
.divider span{position:relative;background:var(--panel);padding:0 12px;font-size:11px;color:var(--ink-3)}
.btn-guest{
  width:100%;display:flex;align-items:center;justify-content:center;gap:9px;
  border:1.5px solid var(--line);background:var(--panel);border-radius:12px;padding:12px;
  font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:.18s;
}
.btn-guest:hover{border-color:var(--brand);color:var(--brand)}
.legal{margin:16px 0 0;font-size:10.5px;color:var(--ink-3);text-align:center;line-height:1.7}

@media(max-width:900px){
  .auth-wrap{flex-direction:column;gap:32px;max-width:420px}
  .auth-brand{text-align:center}
  .auth-brand h1{font-size:36px}
  .brand-badge{margin:0 auto 16px}
  .brand-feats{display:none}
  .auth-card{width:100%}
}

/* ============================================================
   APP SHELL
============================================================ */
.app{display:flex;min-height:100vh}
.side{
  width:240px;flex:none;background:var(--panel);border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:24px;padding:22px 16px 16px;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.brand{display:flex;align-items:center;gap:11px}
.brand-mini{
  width:36px;height:36px;border-radius:11px;flex:none;color:#fff;
  background:linear-gradient(135deg,#3b6cf6,#8b5cf6);
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(59,108,246,.32);
}
.brand-mini .ico{width:19px;height:19px;stroke-width:1.8}
.brand h1{margin:0;font-size:16px;letter-spacing:-.2px}
.brand p{margin:2px 0 0;font-size:10.5px;color:var(--ink-3)}

.nav{display:flex;flex-direction:column;gap:2px}
.nav button{
  display:flex;align-items:center;gap:11px;width:100%;padding:10px 11px;
  border:0;background:none;border-radius:10px;color:var(--ink-2);font-size:13.5px;
  cursor:pointer;text-align:left;transition:.13s;
}
.nav button:hover{background:var(--brand-soft);color:var(--brand-ink)}
.nav button.on{background:var(--brand);color:#fff;font-weight:700;box-shadow:0 2px 8px rgba(59,108,246,.28)}

.cd{background:var(--brand-soft);border-radius:12px;padding:15px 12px;text-align:center}
.cd .t{font-size:11.5px;color:var(--ink-2)}
.cd .n{font-size:14px;color:var(--ink-2);margin:2px 0 1px}
.cd .n b{font-size:32px;color:var(--brand-ink);font-weight:800;margin:0 4px;letter-spacing:-1px;line-height:1}
.cd .d{font-size:10.5px;color:var(--ink-3);margin-top:4px}

.quote{margin-top:auto;padding:2px 6px;color:var(--ink-3);font-size:11.5px;line-height:1.8;text-align:center}
.quote .mark{font-size:19px;color:var(--line);display:block;line-height:1}

.userchip{
  display:flex;align-items:center;gap:10px;padding:9px;border-radius:12px;
  border:1px solid var(--line);background:var(--panel-2);cursor:pointer;transition:.15s;
}
.userchip:hover{border-color:var(--brand)}
.uc-av{
  width:34px;height:34px;border-radius:50%;flex:none;overflow:hidden;
  background:linear-gradient(135deg,#3b6cf6,#8b5cf6);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;
}
.uc-av img{width:100%;height:100%;object-fit:cover}
.uc-txt{flex:1;min-width:0}
.uc-txt b{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uc-txt span{display:block;font-size:10.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uc-sync{width:7px;height:7px;border-radius:50%;background:var(--ink-3);flex:none;transition:.3s}
.uc-sync.ok{background:var(--ok)}
.uc-sync.busy{background:var(--warn);animation:blink .8s ease-in-out infinite}
.uc-sync.err{background:var(--bad)}
@keyframes blink{50%{opacity:.25}}

.main{flex:1;min-width:0;padding:28px 32px 70px}
.page{display:none;animation:fade .22s ease}
.page.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.head h2{margin:0 0 5px;font-size:23px;letter-spacing:-.2px}
.head p{margin:0;color:var(--ink-3);font-size:13px}
.head-actions{display:flex;align-items:center;gap:9px}
.theme-btn{
  width:38px;height:38px;border-radius:11px;cursor:pointer;flex:none;
  background:var(--panel);border:1px solid var(--line);color:var(--ink-2);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);transition:.15s;
}
.theme-btn:hover{color:var(--brand);border-color:var(--brand)}
.i-moon{display:none}
:root[data-theme="dark"] .i-sun{display:none}
:root[data-theme="dark"] .i-moon{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .i-sun{display:none}
  :root:not([data-theme="light"]) .i-moon{display:block}
}

.datenav{display:flex;align-items:center;gap:4px;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:6px 8px;box-shadow:var(--shadow)}
.datenav .lbl{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;padding:0 6px;white-space:nowrap}
.datenav .lbl .ico{color:var(--ink-3)}
.datenav button{border:0;background:none;color:var(--ink-3);cursor:pointer;padding:5px;border-radius:7px;display:flex}
.datenav button:hover{background:var(--brand-soft);color:var(--brand)}
.datenav .today-btn{font-size:11.5px;padding:4px 9px;color:var(--brand);font-weight:700}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card .ttl{display:flex;align-items:center;justify-content:space-between;padding:15px 18px 12px;font-size:14px;font-weight:700}
.card .bd{padding:0 18px 18px}
.link{border:0;background:none;color:var(--brand);font-size:12px;font-weight:600;cursor:pointer;padding:2px 6px;border-radius:6px}
.link:hover{background:var(--brand-soft)}

.grid{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.col-main{flex:1 1 500px;min-width:0}
.col-side{width:322px;flex:none;display:flex;flex-direction:column;gap:16px}

/* schedule */
.sched{width:100%;border-collapse:collapse}
.sched thead th{text-align:left;font-size:11.5px;font-weight:500;color:var(--ink-3);padding:16px 10px 11px;border-bottom:1px solid var(--line)}
.sched thead th:first-child{padding-left:20px;width:190px}
.sched thead th:last-child{padding-right:20px;width:78px;text-align:center}
.sched tbody td{padding:11px 10px;border-bottom:1px solid var(--line-2);vertical-align:middle;font-size:13.5px}
.sched tbody td:first-child{padding-left:20px}
.sched tbody td:last-child{padding-right:20px;text-align:center}
.sched tbody tr:last-child td{border-bottom:0}
.sched tbody tr{transition:background .12s}
.sched tbody tr:hover{background:var(--line-2)}
.sched tbody tr.now{background:var(--brand-soft)}
.sched tbody tr.done .task{color:var(--ink-3);text-decoration:line-through}
.sched tbody tr.past:not(.done) .task{opacity:.55}
.tcell{display:flex;align-items:center;gap:9px;white-space:nowrap;font-variant-numeric:tabular-nums}
.dot{width:8px;height:8px;border-radius:50%;flex:none}
.dur{color:var(--ink-3);font-size:11.5px;margin-left:2px}
.task{display:flex;align-items:center;gap:8px}
.nowtag{font-size:10px;font-weight:800;color:var(--brand);background:var(--panel);border:1px solid var(--brand);border-radius:5px;padding:1px 5px;letter-spacing:.3px}
.tag{display:inline-block;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:99px;white-space:nowrap}
.dash{color:var(--ink-3)}
.chk{
  appearance:none;-webkit-appearance:none;width:19px;height:19px;border:1.8px solid var(--line);
  border-radius:50%;cursor:pointer;position:relative;transition:.15s;vertical-align:middle;background:var(--panel);
}
.chk:hover{border-color:var(--brand)}
.chk:checked{background:var(--brand);border-color:var(--brand)}
.chk:checked::after{content:"";position:absolute;left:5.5px;top:2px;width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(43deg)}
.pattern-note{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink-3);padding:0 20px 14px}
.pattern-note b{color:var(--brand-ink);background:var(--brand-soft);padding:2px 8px;border-radius:6px;font-size:11px}

/* goals */
.goal{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:13.5px}
.goal .txt{flex:1;min-width:0;word-break:break-word}
.goal.done .txt{color:var(--ink-3);text-decoration:line-through}
.goal .x{border:0;background:none;color:var(--ink-3);cursor:pointer;display:none;padding:2px 4px;border-radius:6px}
.goal .x:hover{color:var(--bad);background:var(--line-2)}
.editing .goal .x{display:block}
.empty{color:var(--ink-3);font-size:12.5px;padding:8px 0;text-align:center}
.addrow{display:flex;gap:7px;margin-top:10px}
.addrow input{flex:1;min-width:0;padding:8px 11px;border:1px solid var(--line);border-radius:9px;background:var(--bg);font-size:12.5px;outline:0}
.addrow input:focus{border-color:var(--brand)}
.addrow button{border:0;background:var(--brand);color:#fff;border-radius:9px;padding:0 14px;cursor:pointer;font-weight:700}

/* ring */
.ringwrap{display:flex;align-items:center;gap:20px}
.ring{position:relative;width:104px;height:104px;flex:none}
.ring svg{transform:rotate(-90deg);display:block}
.ring circle{transition:stroke-dashoffset .5s cubic-bezier(.4,0,.2,1)}
.ring .mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring .mid b{font-size:25px;font-weight:800;color:var(--brand);letter-spacing:-1px;line-height:1}
.ring .mid small{font-size:10.5px;color:var(--ink-3);margin-top:3px}
.stats{display:flex;flex-direction:column;gap:13px;font-size:12px;color:var(--ink-3);min-width:0}
.stats .k{display:flex;align-items:center;gap:6px}
.stats .k i{width:7px;height:7px;border-radius:50%;flex:none;font-style:normal}
.stats b{display:block;color:var(--ink);font-size:15px;font-weight:700;margin-top:2px;padding-left:13px}

/* timer */
.timer{text-align:center}
.timer .num{font-size:38px;font-weight:800;letter-spacing:-1.5px;font-variant-numeric:tabular-nums;margin:2px 0 4px}
.timer .mode{font-size:11.5px;color:var(--ink-3);margin-bottom:14px}
.timer .btns{display:flex;gap:8px}
.btn-dark{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;border:0;background:var(--ink);color:var(--panel);border-radius:10px;padding:11px;font-size:13px;font-weight:700;cursor:pointer;transition:.15s}
.btn-dark:hover{opacity:.86}
.btn-line{border:1px solid var(--line);background:none;color:var(--ink-3);border-radius:10px;padding:11px 13px;cursor:pointer;display:flex;align-items:center}
.btn-line:hover{border-color:var(--brand);color:var(--brand)}

/* memo */
.memo textarea{width:100%;min-height:92px;resize:vertical;border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:11px;font-size:12.5px;font-family:inherit;outline:0;line-height:1.7}
.memo textarea:focus{border-color:var(--brand)}
.memo textarea:disabled{background:transparent;border-color:transparent;padding:2px;color:var(--ink);opacity:1}
.memo textarea::placeholder{color:var(--ink-3)}

/* week */
.weekgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:13px}
.day{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:15px;cursor:pointer;transition:.15s;box-shadow:var(--shadow)}
.day:hover{transform:translateY(-2px);border-color:var(--brand)}
.day.today{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand) inset,var(--shadow)}
.day.test{border-color:var(--bad)}
.day .dt{display:flex;align-items:baseline;gap:7px}
.day .dt b{font-size:19px;font-weight:800;letter-spacing:-.5px}
.day .dt span{font-size:12px;color:var(--ink-3)}
.day .badge{display:inline-block;font-size:10px;font-weight:800;border-radius:5px;padding:2px 6px;margin-top:7px}
.day .track{height:6px;background:var(--track);border-radius:99px;overflow:hidden;margin:12px 0 6px}
.day .fill{height:100%;border-radius:99px;background:var(--brand);transition:width .4s}
.day .meta{font-size:11.5px;color:var(--ink-3)}

/* subjects */
.subs{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.sub{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 17px;box-shadow:var(--shadow)}
.sub .n{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:700}
.sub .n .dot{width:11px;height:11px}
.sub .hrs{font-size:12px;color:var(--ink-3);margin:9px 0 3px}
.sub .hrs b{font-size:19px;font-weight:800;letter-spacing:-.5px}
.sub .track{height:6px;background:var(--track);border-radius:99px;overflow:hidden;margin:11px 0 7px}
.sub .fill{height:100%;border-radius:99px;transition:width .4s}
.sub .meta{font-size:11.5px;color:var(--ink-3)}
.sub .row{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink-3);margin-top:10px}
.sub .row input{width:66px;padding:5px 8px;border:1px solid var(--line);border-radius:7px;background:var(--bg);font-size:12px;outline:0}
.sub .row input:focus{border-color:var(--brand)}
.sub textarea{width:100%;min-height:52px;margin-top:10px;resize:vertical;border:1px solid var(--line);background:var(--bg);border-radius:9px;padding:9px;font-size:12px;font-family:inherit;outline:0;line-height:1.6}
.sub textarea:focus{border-color:var(--brand)}

/* progress */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:13px;margin-bottom:20px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:17px;box-shadow:var(--shadow)}
.tile .n{font-size:27px;font-weight:800;letter-spacing:-1px;line-height:1.1}
.tile .l{font-size:11.5px;color:var(--ink-3);margin-top:6px}
.bars{display:flex;flex-direction:column;gap:11px}
.bar{display:flex;align-items:center;gap:11px;font-size:12px}
.bar .l{width:86px;flex:none;color:var(--ink-2)}
.bar .l.is-today{color:var(--brand);font-weight:700}
.bar .track{flex:1;height:9px;background:var(--track);border-radius:99px;overflow:hidden}
.bar .fill{height:100%;border-radius:99px;background:var(--brand);transition:width .4s}
.bar .v{width:40px;text-align:right;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* account */
.sec{margin-bottom:18px}
.sec .ttl{padding:16px 18px 8px}
.sec .sub-note{padding:0 18px 12px;font-size:12px;color:var(--ink-3);margin:0;line-height:1.7}
.profile-card{padding-top:6px}
.prof{display:flex;align-items:center;gap:18px;padding:16px 18px 18px}
.prof-av{
  position:relative;width:84px;height:84px;border-radius:50%;flex:none;cursor:pointer;overflow:hidden;
  background:linear-gradient(135deg,#3b6cf6,#8b5cf6);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:800;
  box-shadow:0 8px 24px rgba(59,108,246,.3);transition:.2s;
}
.prof-av:hover{transform:scale(1.04)}
.prof-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.prof-cam{
  position:absolute;right:0;bottom:0;width:28px;height:28px;border-radius:50%;
  background:var(--brand);display:flex;align-items:center;justify-content:center;border:2.5px solid var(--panel);
}
.prof-cam .ico{width:13px;height:13px;stroke-width:2.2}
.prof-meta{min-width:0}
.prof-meta b{display:block;font-size:19px;letter-spacing:-.3px}
.prof-meta span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:3px}
.prof-badges{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
.pbadge{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:99px;background:var(--brand-soft);color:var(--brand-ink)}
.pbadge.gray{background:var(--track);color:var(--ink-3)}

.frow{display:flex;align-items:center;gap:12px;padding:0 18px 14px}
.frow label{width:110px;flex:none;font-size:12.5px;color:var(--ink-2)}
.frow input{padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--bg);font-size:13px;outline:0;min-width:0}
.frow input:focus{border-color:var(--brand)}
.frow input:disabled{color:var(--ink-3)}
.frow.btn-row{gap:9px;flex-wrap:wrap}
.btn-save{border:0;background:var(--brand);color:#fff;border-radius:9px;padding:10px 20px;cursor:pointer;font-size:13px;font-weight:700;transition:.15s}
.btn-save:hover{opacity:.88}
.btn-ghost2{border:1px solid var(--line);background:none;color:var(--ink-2);border-radius:9px;padding:10px 16px;cursor:pointer;font-size:12.5px;font-weight:600}
.btn-ghost2:hover{border-color:var(--brand);color:var(--brand)}

/* admin */
.admin-chip{
  display:inline-block;margin-left:10px;padding:3px 9px;border-radius:99px;
  font-size:10.5px;font-weight:800;letter-spacing:.5px;vertical-align:middle;
  background:linear-gradient(135deg,#3b6cf6,#8b5cf6);color:#fff;
}
.table-scroll{overflow-x:auto;padding:0 18px}
.admin-table{width:100%;border-collapse:collapse;min-width:640px}
.admin-table th{
  text-align:left;font-size:11px;font-weight:500;color:var(--ink-3);
  padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap;
}
.admin-table td{padding:11px 10px;border-bottom:1px solid var(--line-2);font-size:12.5px;vertical-align:middle}
.admin-table tr:last-child td{border-bottom:0}
.admin-table tr.is-banned td{opacity:.55}
.admin-user{display:flex;align-items:center;gap:9px;min-width:0}
.admin-av{
  width:30px;height:30px;border-radius:50%;flex:none;overflow:hidden;
  background:linear-gradient(135deg,#3b6cf6,#8b5cf6);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;
}
.admin-av img{width:100%;height:100%;object-fit:cover}
.admin-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-mail{color:var(--ink-2);font-size:12px;word-break:break-all}
.admin-date{color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.badge-ok{display:inline-block;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:99px;background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok)}
.badge-ng{display:inline-block;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:99px;background:color-mix(in srgb,var(--bad) 15%,transparent);color:var(--bad)}
.badge-me{display:inline-block;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:99px;background:var(--brand-soft);color:var(--brand-ink)}
.btn-mini{
  border:1px solid var(--line);background:none;color:var(--ink-2);border-radius:8px;
  padding:6px 12px;cursor:pointer;font-size:11.5px;font-weight:600;white-space:nowrap;
}
.btn-mini:hover{border-color:var(--bad);color:var(--bad)}
.btn-mini.undo:hover{border-color:var(--ok);color:var(--ok)}
.btn-mini:disabled{opacity:.4;cursor:not-allowed}

/* settings */
.seg{display:flex;gap:7px;padding:0 18px 16px}
.seg button{
  flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:11px;
  border:1px solid var(--line);border-radius:10px;background:var(--bg);cursor:pointer;
  font-size:12.5px;color:var(--ink-2);transition:.13s;
}
.seg button:hover{border-color:var(--brand)}
.seg button.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700}
.ptabs{display:flex;gap:7px;padding:0 18px 14px}
.ptab{flex:1;text-align:center;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--bg);cursor:pointer;font-size:12.5px;color:var(--ink-2);transition:.13s}
.ptab.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700}
.ptab small{display:block;font-size:10.5px;opacity:.8;font-weight:400;margin-top:2px}
.trow{display:flex;align-items:center;gap:7px;padding:8px 18px;border-bottom:1px solid var(--line-2)}
.trow:last-of-type{border-bottom:0}
.trow input[type=color]{appearance:none;-webkit-appearance:none;width:22px;height:22px;border:0;border-radius:6px;background:none;padding:0;cursor:pointer;flex:none}
.trow input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.trow input[type=color]::-webkit-color-swatch{border:0;border-radius:6px}
.trow input[type=text]{border:1px solid transparent;background:none;font-size:13px;padding:5px 7px;border-radius:7px;outline:0;min-width:0}
.trow input[type=text]:hover{background:var(--bg)}
.trow input[type=text]:focus{border-color:var(--brand);background:var(--bg)}
.trow .tm{width:62px;text-align:center;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.trow .tk{flex:1;font-weight:600}
.trow .sj{width:96px}
.trow .x{border:0;background:none;color:var(--ink-3);cursor:pointer;padding:3px 5px;border-radius:6px;flex:none}
.trow .x:hover{color:var(--bad);background:var(--line-2)}
.addbtn{margin:12px 18px 18px;width:calc(100% - 36px);padding:11px;border:1px dashed var(--line);border-radius:10px;background:none;color:var(--brand);font-weight:700;font-size:12.5px;cursor:pointer}
.addbtn:hover{border-color:var(--brand);background:var(--brand-soft)}
.danger{border:1px solid var(--bad);color:var(--bad);background:none;border-radius:9px;padding:10px 16px;cursor:pointer;font-size:12.5px;font-weight:600;transition:.15s}
.danger:hover{background:var(--bad);color:#fff}

/* toast */
.toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;pointer-events:none;
  background:var(--ink);color:var(--panel);padding:11px 20px;border-radius:99px;font-size:13px;font-weight:600;
  transition:.25s;z-index:99;box-shadow:0 8px 28px rgba(0,0,0,.2);max-width:88vw;text-align:center;
}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media(max-width:900px){
  .app{flex-direction:column}
  .side{width:100%;height:auto;position:static;flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px;padding:12px}
  .side .brand{flex:1}
  .side .nav{flex-direction:row;flex-wrap:wrap;order:3;width:100%}
  .side .nav button{width:auto;font-size:12.5px;padding:8px 10px}
  .cd{display:flex;align-items:center;gap:9px;padding:8px 13px}
  .cd .t,.cd .d{display:none}
  .cd .n b{font-size:21px}
  .quote{display:none}
  .userchip{padding:6px 9px}
  .uc-txt span{display:none}
  .main{padding:20px 16px 60px}
  .grid{flex-direction:column}
  .col-side{width:100%}
  .sched thead th:first-child{width:auto}
  .head-actions{width:100%;justify-content:space-between}
  .frow{flex-wrap:wrap}
  .frow label{width:100%}
  .frow input{width:100%}
  .prof{flex-direction:column;text-align:center;gap:14px}
  .prof-badges{justify-content:center}
  .seg{flex-wrap:wrap}
}