:root{
  --bg:#f7f8fa;--dot:#d9dce3;--fg:#1c2030;--mut:#6b7280;--line:rgba(20,24,40,.10);--line2:rgba(20,24,40,.18);
  --glass:rgba(255,255,255,.62);--glass-strong:rgba(255,255,255,.88);--card:#ffffff;--card-shadow:0 6px 24px rgba(20,24,40,.10);
  --frame-bg:rgba(47,128,237,.035);
  --acc:#2f80ed;--acc-soft:rgba(47,128,237,.14);--warn:#e0a300;--grow:#1fa463;--danger:#e5484d;--wire:#9aa3b5;
  --r:16px;font-size:clamp(14px,1.05vw,20px);
}
html[data-theme=dark]{
  --bg:#0c0e14;--dot:#242a3a;--fg:#e9ebf2;--mut:#8b91a3;--line:rgba(255,255,255,.10);--line2:rgba(255,255,255,.18);
  --glass:rgba(22,25,36,.60);--glass-strong:rgba(22,25,36,.90);--card:#171b26;--card-shadow:0 8px 28px rgba(0,0,0,.45);
  --frame-bg:rgba(124,196,255,.04);
  --acc:#7cc4ff;--acc-soft:rgba(124,196,255,.18);--warn:#ffd166;--grow:#8ef0a7;--danger:#ff7b7b;--wire:#4b5370;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--fg);overflow:hidden;
  font-family:system-ui,-apple-system,"Segoe UI","Hiragino Sans","Noto Sans JP",sans-serif}
button,input,textarea,select{font:inherit;color:inherit}
button{background:transparent;border:1px solid var(--line);border-radius:10px;padding:.32rem .7rem;cursor:pointer}
button:hover{border-color:var(--acc);color:var(--acc)}
button.icon{width:2.1rem;height:2.1rem;padding:0;display:inline-grid;place-items:center;border-radius:50%}
button.icon.sm{width:1.6rem;height:1.6rem;font-size:.8rem}
.glass{background:var(--glass);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:0 10px 30px rgba(20,24,40,.08)}
html[data-theme=dark] .glass{box-shadow:0 10px 30px rgba(0,0,0,.4)}
.spacer{flex:1}
.hint{font-size:.74rem;color:var(--mut);line-height:1.5}
kbd{font:inherit;font-size:.76rem;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:0 .4rem;background:var(--glass-strong)}

/* ---- board ---- */
#board{position:fixed;inset:0;overflow:hidden;cursor:grab;background-image:radial-gradient(var(--dot) 1.2px,transparent 1.2px);background-size:28px 28px}
#board.panning{cursor:grabbing}
#board.linking,#board.linking .card{cursor:crosshair}
#world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
#wires{position:absolute;left:0;top:0;width:1px;height:1px;overflow:visible;pointer-events:none}
#wires path{fill:none;stroke:var(--wire);stroke-width:2}
#wires path.link{stroke:var(--acc);stroke-dasharray:7 7;opacity:.75}

.card{position:absolute;width:16rem;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:.75rem .9rem;box-shadow:var(--card-shadow);user-select:none}
.card.focus{border-color:var(--acc);box-shadow:0 0 0 4px var(--acc-soft),var(--card-shadow)}
.card.moving{border-color:var(--warn);box-shadow:0 0 0 4px rgba(224,163,0,.25)}
.card.linking{border-color:var(--acc);border-style:dashed}
.card.k-heading{width:20rem;background:transparent;border-color:transparent;box-shadow:none;padding:.4rem .6rem}
.card.k-heading.focus{border-color:var(--acc)}
.card.k-heading h2{margin:0;font-size:1.6rem;line-height:1.25;letter-spacing:-.01em}
.card.root h2{font-size:2.1rem}
.card.root p{margin-top:.4rem}
.card.k-question{border-color:rgba(47,128,237,.35)}
.card h3{margin:0 0 .3rem;font-size:.95rem;line-height:1.35;word-break:break-word;display:flex;gap:.4rem}
.card h3 .ki{opacity:.7;flex:none}
.card p{margin:0;font-size:.82rem;color:var(--mut);line-height:1.55;max-height:9em;overflow:hidden;word-break:break-word;white-space:pre-wrap}
.card img{display:block;width:100%;border-radius:10px;margin-bottom:.45rem;pointer-events:none}
.imgph{border:1.5px dashed var(--line2);border-radius:10px;padding:1.2rem .6rem;text-align:center;font-size:.75rem;color:var(--mut);margin:.3rem 0}
.card table{width:100%;border-collapse:collapse;font-size:.78rem}
.card td,.card th{border:1px solid var(--line);padding:.2rem .4rem;text-align:left}
.card th{background:var(--acc-soft);font-weight:600}
.todo-line{display:flex;gap:.5rem;align-items:flex-start;font-size:.84rem;padding:.15rem 0;cursor:pointer;line-height:1.4}
.todo-line i{flex:none;width:1rem;height:1rem;margin-top:.15rem;border:1.5px solid var(--mut);border-radius:5px;display:inline-grid;place-items:center;font-style:normal;font-size:.7rem}
.todo-line.done{color:var(--mut);text-decoration:line-through}
.todo-line.done i{background:var(--grow);border-color:var(--grow);color:#fff}
.card .meta{display:flex;gap:.45rem;margin-top:.55rem;font-size:.7rem;color:var(--mut);flex-wrap:wrap;align-items:center}
.card .meta .url{color:var(--acc);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.tag{font-size:.68rem;padding:.05rem .45rem;border-radius:999px;border:1px solid var(--line);color:var(--mut)}
.plus{position:absolute;right:-.9rem;top:50%;transform:translateY(-50%);width:1.8rem;height:1.8rem;border-radius:50%;
  background:var(--grow);color:#fff;display:grid;place-items:center;font-size:1.2rem;line-height:1;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.2)}
.plus:hover{transform:translateY(-50%) scale(1.1)}

/* project card */
.card.k-project{width:18rem;border:1.5px solid color-mix(in srgb,var(--grow) 55%,transparent);
  background:linear-gradient(160deg,color-mix(in srgb,var(--grow) 9%,var(--card)),var(--card) 60%)}
.pj-head{display:flex;align-items:center;gap:.55rem;margin-bottom:.3rem}
.pj-head h3{margin:0;font-size:1.05rem}
.pj-emoji{font-size:1.8rem;line-height:1}
.pj-phases{display:flex;align-items:center;gap:.25rem;margin-top:.55rem;font-size:.75rem;color:var(--mut)}
.pj-phases i{width:1.4rem;height:.35rem;border-radius:999px;background:var(--line2)}
.pj-phases i.done{background:color-mix(in srgb,var(--grow) 55%,transparent)}
.pj-phases i.now{background:var(--grow)}
.pj-phases span{margin-left:.35rem}
.open-hint{margin-left:auto;color:var(--grow)}

/* frames (categories / phases) */
.frame{position:absolute;border:1.5px dashed var(--line2);border-radius:22px;background:var(--frame-bg);pointer-events:none}
.frame.focus{border-color:var(--acc);border-style:solid}
.frame.moving{border-color:var(--warn)}
.frame.phase{border-style:solid;border-color:var(--line)}
.frame.phase.now{border-color:color-mix(in srgb,var(--grow) 60%,transparent);background:color-mix(in srgb,var(--grow) 5%,transparent)}
.frame.focus.phase{border-color:var(--acc)}
.ftitle{pointer-events:auto;position:absolute;left:12px;top:10px;font-weight:600;font-size:.85rem;padding:.18rem .7rem;border-radius:999px;cursor:grab;
  background:var(--glass-strong);border:1px solid var(--line);user-select:none;white-space:nowrap}
.fres{pointer-events:auto;position:absolute;right:-7px;bottom:-7px;width:16px;height:16px;border-radius:50%;background:var(--acc);cursor:nwse-resize;opacity:0}
.frame.focus .fres{opacity:1}

/* ---- floating UI ---- */
#top{position:fixed;left:50%;top:.8rem;transform:translateX(-50%);display:flex;align-items:center;gap:.55rem;padding:.35rem .55rem .35rem .6rem;z-index:10;white-space:nowrap;max-width:calc(100vw - 22rem)}
#crumb{display:flex;align-items:center;gap:.15rem;min-width:0}
#crumb button{border:0;padding:.25rem .55rem;font-size:.85rem;color:var(--mut);border-radius:999px;max-width:16rem;overflow:hidden;text-overflow:ellipsis}
#crumb button.on{color:var(--fg);font-weight:600}
#crumb .sep{color:var(--mut)}
#phasePill button{border-radius:999px;padding:.2rem .7rem;font-size:.8rem;border-color:color-mix(in srgb,var(--grow) 50%,transparent);color:var(--grow)}
.seg{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.seg button{border:0;border-radius:0;padding:.22rem .7rem;color:var(--mut);font-size:.78rem}
.seg button.on{background:var(--acc-soft);color:var(--fg)}
.seg button[data-mode=eco].on{color:var(--grow)}.seg button[data-mode=std].on{color:var(--acc)}.seg button[data-mode=lux].on{color:var(--warn)}
#meter{display:flex;align-items:center;gap:.4rem;font-size:.76rem;color:var(--mut)}
#meter .bar{width:5rem;height:.42rem;border-radius:999px;background:var(--line);overflow:hidden}
#meter .bar i{display:block;height:100%;width:0;background:var(--grow)}
#meter b{color:var(--fg)}

#clock{position:fixed;right:1.4rem;top:.9rem;z-index:9;text-align:right;line-height:1;pointer-events:none;--unit:calc((0.55vw + 0.35vh)*1.05)}
#clock .t{font-family:ui-monospace,"Cascadia Mono","Consolas","SF Mono","JetBrains Mono","Roboto Mono",monospace;font-weight:700;font-size:calc(var(--unit)*4.5);letter-spacing:.01em;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;justify-content:flex-end;color:var(--fg)}
#clock .sep{opacity:.8;margin:0 .04em;animation:blink 2s steps(1,end) infinite}
@keyframes blink{0%,55%{opacity:.85}55.01%,100%{opacity:.22}}
#clock .d{font-size:calc(var(--unit)*1.5);color:var(--mut);font-weight:500;margin-top:.5em;letter-spacing:.08em;font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic UI",Meiryo,sans-serif}
html[data-theme=dark] #clock .t{text-shadow:0 0 calc(var(--unit)*1.8) rgba(124,196,255,.35)}

#panel{position:fixed;left:.8rem;top:4.6rem;width:17.5rem;max-height:calc(100% - 6.6rem);display:flex;flex-direction:column;z-index:10;overflow:hidden}
#panel.hidden{display:none}
.ptabs{display:flex;gap:.2rem;padding:.45rem .45rem 0;align-items:center}
.ptabs button{border:0;font-size:.74rem;letter-spacing:.04em;color:var(--mut);padding:.3rem .5rem;border-radius:8px}
.ptabs button.on{background:var(--acc-soft);color:var(--fg)}
.ptab{display:none;overflow:auto;padding:.5rem .6rem .7rem}
.ptab.on{display:block}
.ptab h4{margin:.8rem 0 .4rem;font-size:.72rem;letter-spacing:.12em;color:var(--mut);font-weight:600}
#input{width:100%;min-height:3rem;resize:none;background:var(--glass-strong);border:1px solid var(--line);border-radius:10px;padding:.45rem .65rem;outline:none}
#input:focus{border-color:var(--acc)}
.row{display:flex;gap:.55rem;align-items:center;padding:.4rem .5rem;border-radius:10px;border:1px solid transparent;cursor:pointer}
.row:hover{background:var(--acc-soft)}
.row.focus{border-color:var(--acc);background:var(--acc-soft)}
.row[draggable=true]{cursor:grab}
.row .ico{width:1.5rem;text-align:center;flex:none}
.row .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.88rem}
.row .t small{display:block;color:var(--mut);font-size:.7rem}
.row img{width:2.2rem;height:2.2rem;object-fit:cover;border-radius:6px;flex:none}
.empty{color:var(--mut);font-size:.8rem;padding:.8rem .4rem;line-height:1.6}
.tpl{padding:.5rem .6rem;border-radius:12px;border:1px solid var(--line);margin-bottom:.4rem;cursor:pointer}
.tpl:hover{border-color:var(--acc)}
.tpl b{display:block;font-size:.88rem}.tpl span{font-size:.72rem;color:var(--mut)}
.blocks{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.blocks button{text-align:left;padding:.5rem .6rem;border-radius:12px;display:flex;gap:.45rem;align-items:center;font-size:.85rem}
#rail{position:fixed;left:.8rem;top:4.6rem;display:none;flex-direction:column;gap:.3rem;padding:.35rem;z-index:10}
#rail.show{display:flex}
#rail button{border:0}

#zoneLabel{position:fixed;left:.8rem;bottom:.8rem;font-size:.74rem;color:var(--mut);padding:.35rem .7rem;z-index:10}
#toolbar{position:fixed;right:.8rem;bottom:.8rem;display:flex;gap:.25rem;padding:.3rem;z-index:10}
#toolbar button{border:0;font-size:.85rem}

#next{position:fixed;right:.8rem;bottom:3.9rem;width:19rem;z-index:10;padding:.55rem .7rem;display:none}
#next.show{display:block}
#next .nh{display:flex;align-items:center;gap:.5rem}
#next .nh b{font-size:.85rem;white-space:nowrap}
#next .nh span{flex:1;font-size:.72rem;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#next.collapsed .nb{display:none}
#next .ns{font-size:.7rem;color:var(--mut);margin:.55rem 0 .2rem;letter-spacing:.06em}
#next .nr{font-size:.84rem;padding:.3rem .45rem;border-radius:8px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#next .nr:hover{background:var(--acc-soft)}
#next .nextph{width:100%;margin-top:.6rem;border-color:color-mix(in srgb,var(--grow) 50%,transparent);color:var(--grow);font-weight:600;border-radius:12px}

#mini{position:fixed;z-index:15;display:none;gap:.15rem;padding:.25rem;border-radius:999px}
#mini.show{display:flex}
#mini button{border:0;width:2.1rem;height:2.1rem;padding:0;border-radius:50%;display:grid;place-items:center;font-size:.95rem}
#mini button:hover{background:var(--acc-soft)}
#mini button.danger:hover{color:var(--danger)}

#menu{position:fixed;z-index:20;min-width:13rem;max-width:26rem;padding:.3rem;display:none;max-height:80vh;overflow:auto}
#menu.show{display:block}
#menu .mh{padding:.35rem .8rem .15rem;font-size:.7rem;color:var(--mut);letter-spacing:.08em}
#menu div.it{padding:.45rem .8rem;border-radius:10px;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;font-size:.9rem}
#menu div.it.focus{background:var(--acc-soft);color:var(--acc)}
#menu div.it.danger{color:var(--danger)}
#menu div.it span{color:var(--mut);font-size:.72rem;text-align:right}

.modal{position:fixed;inset:0;background:rgba(10,12,20,.35);display:none;align-items:center;justify-content:center;z-index:30}
.modal.show{display:flex}
.box{width:min(40rem,92vw);padding:1.2rem;max-height:90vh;overflow:auto;background:var(--glass-strong)}
.box h2{margin:0 0 .6rem;font-size:1rem}
.box label{display:block;font-size:.78rem;color:var(--mut);margin:.7rem 0 .25rem}
.box input,.box textarea,.box select{width:100%;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.5rem .7rem;outline:none}
.box textarea{min-height:8rem;resize:vertical;font-family:inherit}
.box .actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1rem}
.box .primary{background:var(--acc);color:#fff;border-color:var(--acc);font-weight:600}
.box table{width:100%;border-collapse:collapse;font-size:.85rem;margin-top:.4rem}
.box td,.box th{text-align:left;padding:.35rem .4rem;border-bottom:1px solid var(--line);vertical-align:top}
.box th{color:var(--mut);font-weight:500;white-space:nowrap}
.btnrow{display:flex;gap:.5rem;flex-wrap:wrap}
#toast{position:fixed;left:50%;bottom:4.2rem;transform:translateX(-50%);padding:.45rem 1rem;border-radius:999px;font-size:.84rem;opacity:0;transition:.25s;pointer-events:none;z-index:40}
#toast.show{opacity:1}

/* ---- cloud sync ---- */
#syncDot{font-size:.95rem}
#syncDot[data-s=off]{color:var(--mut);opacity:.6}
#syncDot[data-s=login]{color:var(--warn)}
#syncDot[data-s=ok]{color:var(--grow)}
#syncDot[data-s=pending]{color:var(--acc)}
#syncDot[data-s=error]{color:var(--danger)}
#syncDot[data-s=offline]{color:var(--mut)}
#cloudBox input{margin-bottom:.4rem}

/* ---- v0.6: touch & mobile ---- */
#board{touch-action:none}
.inrow{display:flex;gap:.4rem;margin:.45rem 0 .2rem}
.inrow button{flex:1;font-size:.8rem;padding:.35rem .5rem}
@media (max-width:700px){
  :root{font-size:15px}
  #clock,#zoneLabel,#modeSeg,#meter,#btnHelp{display:none!important}
  #top{left:.5rem;right:.5rem;transform:none;max-width:none;top:calc(.5rem + env(safe-area-inset-top));gap:.3rem}
  #crumb{flex:1;overflow:hidden}
  #crumb button{max-width:9rem}
  #panel{left:.5rem;right:.5rem;width:auto;top:calc(4rem + env(safe-area-inset-top));max-height:50vh}
  #rail{top:calc(4rem + env(safe-area-inset-top));left:.5rem}
  #next{left:.5rem;right:.5rem;width:auto;bottom:calc(3.7rem + env(safe-area-inset-bottom))}
  #toolbar{bottom:calc(.5rem + env(safe-area-inset-bottom));right:.5rem}
  #input,.box input,.box textarea,.box select{font-size:16px}
  .card{width:14rem}
  .box{padding:1rem}
}

/* ---- v0.8: voice ---- */
#toast{bottom:auto;top:5rem}
#backupNag{bottom:5.2rem!important}
#micBtn{position:fixed;left:50%;bottom:.8rem;transform:translateX(-50%);width:3.4rem;height:3.4rem;border-radius:50%;padding:0;display:grid;place-items:center;font-size:1.35rem;z-index:11;color:var(--fg)}
#micBtn:hover{color:var(--fg);border-color:var(--acc)}
#micBtn.nosr{opacity:.45}
#micBtn[data-s=standby]{box-shadow:0 0 0 3px color-mix(in srgb,var(--grow) 50%,transparent),0 10px 30px rgba(20,24,40,.08)}
#micBtn[data-s=listening]{background:var(--danger);border-color:var(--danger);color:#fff;animation:micPulse 1.2s ease-in-out infinite}
@keyframes micPulse{0%,100%{box-shadow:0 0 0 0 rgba(229,72,77,.5)}50%{box-shadow:0 0 0 16px rgba(229,72,77,0)}}
#wakePill{position:fixed;left:calc(50% + 2.4rem);bottom:1.75rem;font-size:.72rem;color:var(--grow);z-index:11;display:none;white-space:nowrap;pointer-events:none}
#wakePill.show{display:block}
#vBand{position:fixed;left:50%;bottom:5rem;transform:translateX(-50%);width:max-content;max-width:min(46rem,92vw);padding:.6rem 1rem;z-index:11;display:none;align-items:center;gap:.8rem}
#vBand.show{display:flex}
#vBand .st{font-size:.72rem;color:var(--mut);white-space:nowrap;letter-spacing:.06em}
#vBand .st:empty{display:none}
#vBand .tx{flex:1;font-size:1.05rem;line-height:1.5;word-break:break-word}
#vBand .tx:empty::before{content:'…';color:var(--mut)}
#vBand .ac:empty{display:none}
#vBand button{white-space:nowrap;font-size:.8rem}
.card.flash{animation:cardFlash 3s ease-out}
@keyframes cardFlash{0%,30%{box-shadow:0 0 0 8px color-mix(in srgb,var(--grow) 55%,transparent),var(--card-shadow)}100%{box-shadow:var(--card-shadow)}}
.box label.chk{display:flex;align-items:center;gap:.5rem;color:var(--fg);font-size:.85rem;margin:.45rem 0}
.box label.chk input[type=checkbox]{width:auto;margin:0}
#vSilence{width:4.5rem!important;padding:.3rem .5rem!important}
#vWords{margin:.1rem 0 .3rem}
@media (max-width:700px){
  #micBtn{bottom:calc(.6rem + env(safe-area-inset-bottom))}
  #vBand{bottom:calc(4.6rem + env(safe-area-inset-bottom))}
  #next{bottom:calc(4.6rem + env(safe-area-inset-bottom))}
}
@media (min-width:701px){#panel{width:19rem}}
.ptabs{gap:.1rem}
.ptabs button{white-space:nowrap;padding:.3rem .45rem;font-size:.72rem}