/* 公式サイト（website/app/globals.css）と同じ配色トークン。色は必ずこの変数経由で使う。
   --glow は濃い面の上と塗り用、--amber は明るい地の上の文字・線用（ダークでは同じ金になる）。
   ボットのテーマカラーは --c（ボットの顔の縁・帯・色見本）にだけ使い、アプリ自体の UI には混ぜない。 */
:root{
  --font-sans:"Noto Sans JP",system-ui,-apple-system,"Hiragino Sans","Yu Gothic UI",Meiryo,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji";
  --font-heading:"IBM Plex Sans JP","Noto Sans JP",system-ui,-apple-system,"Hiragino Sans","Yu Gothic UI",Meiryo,sans-serif;
  --radius:.125rem;
  color-scheme:light dark;

  --background:#f7f5ef;
  --foreground:#0f2138;
  --panel:#12293f;
  --panel-foreground:#f7f5ef;
  --panel-deep:#0b1d31;
  --glow:#f0b429;
  --amber:#a97a08;
  --card:#ffffff;
  --primary:#12293f;
  --primary-foreground:#f7f5ef;
  --secondary:#eae7de;
  --muted:#eae7de;
  --muted-foreground:#5d6672;
  --accent:#eae7de;
  --destructive:#a33a2b;
  --border:rgba(15,33,56,.16);
  --input:rgba(15,33,56,.24);
  --ring:#12293f;
}
@media (prefers-color-scheme:dark){
  :root{
    --background:#0b1a2a;
    --foreground:#ece8de;
    --panel:#10263a;
    --panel-foreground:#ece8de;
    --panel-deep:#071523;
    --glow:#f2b829;
    --amber:#f2b829;
    --card:#102438;
    --primary:#efb01f;
    --primary-foreground:#0b1a2a;
    --secondary:#16304a;
    --muted:#16304a;
    --muted-foreground:#9aa6b4;
    --accent:#1b3b57;
    --destructive:#e0705a;
    --border:rgba(236,232,222,.14);
    --input:rgba(236,232,222,.2);
    --ring:#efb01f;
  }
}
/* 方眼紙。--cell で目の細かさを変える。color-mix 非対応の端末では方眼が出ないだけ */
:root{
  --rule:color-mix(in srgb,var(--foreground) 7%,transparent);
  --scrim:color-mix(in srgb,var(--panel-deep) 72%,transparent);
  --grid:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  /* 線だけの小さな印。mask に使うので色は currentColor で決まる */
  --ic-warn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 21h20z'/%3E%3Cpath d='M12 10v5M12 18v.5' stroke-linecap='round'/%3E%3C/svg%3E");
  --ic-bot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='8' y='15' width='32' height='24'/%3E%3Cpath d='M24 15V8M20 8h8M4 24v8M44 24v8M17 25v4M31 25v4M18 34h12'/%3E%3C/svg%3E");
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box}
[hidden]{display:none!important}
/* 広い画面（教室のプロジェクター）では rem ごと大きくして、文字が小さく見えないようにする */
html{scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%}
@media(min-width:1500px){html{font-size:112.5%}}
@media(min-width:1900px){html{font-size:125%}}
body{
  margin:0;min-height:100vh;min-height:100dvh;color:var(--foreground);line-height:1.7;overflow-wrap:anywhere;
  font-family:var(--font-sans);
  background-color:var(--background);
  background-image:var(--grid);background-size:28px 28px;background-attachment:fixed;
}
@media(max-width:759px){body.sheet-open{overflow:hidden}}
body:has(dialog[open]){overflow:hidden}
.wrap{max-width:64rem;margin:0 auto;padding:0 16px 96px}
@media(min-width:760px){.wrap{padding:0 24px 48px}}
h1,h2{font-family:var(--font-heading)}
h1{font-size:1.25rem;font-weight:700;margin:0;line-height:1.3;letter-spacing:-.005em}
h2{font-size:1.1rem;font-weight:700;margin:0 0 .75rem;line-height:1.4;letter-spacing:-.005em}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
@media(min-width:760px){h1{font-size:1.5rem}}

/* 小見出し。公式サイトの Eyebrow と同じ調子（金の小さな四角＋字間広め） */
.eyebrow{display:flex;align-items:center;gap:.6rem;margin:0 0 .4rem;font-family:var(--font-heading);font-size:.75rem;font-weight:600;letter-spacing:.2em;line-height:1.4;color:var(--amber)}
.eyebrow::before{content:"";flex:none;width:.5rem;height:.5rem;background:currentColor}
.eyebrow .of{opacity:.65;font-variant-numeric:tabular-nums}

.ic{flex:none;width:1.15em;height:1.15em;margin-right:.45em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ヘッダー。公式サイトの Nav と同じ「ロゴの札＋字間の広い名前」で、下に1pxの線 */
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;margin-bottom:16px;border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:.7rem;min-width:0}
.logo{display:flex;align-items:center;justify-content:center;flex:none;width:2.5rem;height:2.5rem;background:var(--panel-deep)}
.logo img{display:block;width:62%;height:auto}
@media(prefers-color-scheme:dark){.logo{background:var(--glow)}}
.brand-t{min-width:0}
.kicker{margin:0 0 2px;font-family:var(--font-heading);font-size:.6875rem;font-weight:700;letter-spacing:.16em;line-height:1.3;text-transform:uppercase;color:var(--muted-foreground)}
.sub{margin-left:.7rem;font-family:var(--font-sans);font-size:.8rem;font-weight:500;letter-spacing:.04em;color:var(--muted-foreground)}
@media(max-width:479px){.sub{display:none}}
/* 幅360pxでも名前が折り返さないよう、見出しとニックネーム欄を少し詰める */
@media(max-width:429px){h1{font-size:1.1rem}.btn.user{max-width:8em;padding:6px 10px}.brand{gap:.55rem}}

/* タブ。下線で今の画面を示す */
.tabs{display:flex;gap:0;margin-bottom:16px;border-bottom:1px solid var(--border)}
.tab{flex:1;min-height:48px;margin-bottom:-1px;border:0;border-bottom:3px solid transparent;background:transparent;color:var(--muted-foreground);font-family:var(--font-heading);font-size:.95rem;font-weight:600;letter-spacing:.04em;cursor:pointer}
.tab[aria-selected="true"]{color:var(--foreground);border-bottom-color:var(--amber)}
@media(hover:hover){.tab:hover{background:var(--accent)}}
.tab:active{background:var(--primary);color:var(--primary-foreground)}

/* 手順。4つの区画が1pxの線でつながった帯 */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 0 16px;padding:0;list-style:none;border:1px solid var(--input);background:var(--card)}
.steps li{padding:6px 2px;text-align:center;font-size:.8rem;font-weight:600;line-height:1.4;color:var(--muted-foreground);border-left:1px solid var(--input)}
.steps li:first-child{border-left:0}
.steps li.on{background:var(--primary);color:var(--primary-foreground)}
@media(min-width:760px){.steps li{font-size:.875rem;padding:7px 8px}}

.grid{display:block}
.col{min-width:0}
@media(min-width:760px){.grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px 16px 18px;margin-bottom:16px}
@media(min-width:760px){.card{padding:20px 20px 22px}}

label,.lbl{display:block;font-size:.85rem;font-weight:600;color:var(--foreground);margin:16px 0 6px;line-height:1.5}
h2+label,h2+.lbl{margin-top:6px}
input[type=text],select,textarea{width:100%;min-height:44px;padding:9px 12px;border:1px solid var(--input);border-radius:var(--radius);background:var(--background);color:var(--foreground);font:inherit;font-size:max(16px,1rem);outline:none}
input[type=text]::placeholder,textarea::placeholder{color:var(--muted-foreground);opacity:.8}
input[type=text]:focus,select:focus,textarea:focus{border-color:var(--ring);outline:2px solid var(--ring);outline-offset:1px}
textarea{resize:vertical;min-height:76px}
select{appearance:none;-webkit-appearance:none;padding-right:2.6rem;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--foreground) 50%),linear-gradient(135deg,var(--foreground) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
select option{color:var(--foreground);background:var(--card)}

/* つまみ：塗りは primary 1色（地の色の縁を付けて線の上に浮かせない） */
input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:0;background:transparent;cursor:pointer;--p:50%}
input[type=range]::-webkit-slider-runnable-track{height:4px;background:linear-gradient(var(--primary),var(--primary)) left center/var(--p) 100% no-repeat,var(--input)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:28px;margin-top:-12px;border-radius:var(--radius);background:var(--primary);border:2px solid var(--card)}
input[type=range]::-moz-range-track{height:4px;background:var(--input)}
input[type=range]::-moz-range-progress{height:4px;background:var(--primary)}
input[type=range]::-moz-range-thumb{width:12px;height:24px;border-radius:var(--radius);background:var(--primary);border:2px solid var(--card)}
input[type=range]:focus-visible{outline:none}
input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--ring);outline-offset:2px}
input[type=range]:focus-visible::-moz-range-thumb{outline:2px solid var(--ring);outline-offset:2px}
.row{display:flex;justify-content:space-between;gap:8px;font-size:.78rem;color:var(--muted-foreground);margin-top:-6px}

.chips{display:flex;gap:8px;flex-wrap:wrap}
.gap-top{margin-top:12px}
.swatches{gap:4px}
.chip,.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border:1px solid var(--input);background:var(--card);color:var(--foreground);border-radius:var(--radius);padding:6px 16px;cursor:pointer;font:inherit;font-size:.9rem;font-weight:600;line-height:1.3}
@media(hover:hover){.chip:hover,.btn:hover,.av:hover{background:var(--accent);border-color:var(--foreground)}}
.chip:active,.btn:active,.chip.sel{background:var(--primary);border-color:var(--primary);color:var(--primary-foreground)}
.btn.pri{background:var(--primary);border-color:var(--primary);color:var(--primary-foreground)}
@media(hover:hover){.btn.pri:hover{background:var(--primary);border-color:var(--primary);opacity:.88}}
.btn.pri:active{background:var(--glow);border-color:var(--glow);color:var(--panel-deep);opacity:1}
.btn:disabled{opacity:.45;cursor:default}
.btn:disabled:active{background:var(--card);border-color:var(--input);color:var(--foreground)}
.btn.pri:disabled:active{background:var(--primary);border-color:var(--primary);color:var(--primary-foreground)}
.btn.user{max-width:12em;padding:6px 12px;flex:none}
.btn.user .ic{margin-right:.4em}
.btn.user span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* キャラの顔だけは丸（顔の丸と色見本の丸は例外） */
.avgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:8px}
.av{aspect-ratio:1;min-height:44px;padding:0;display:grid;place-items:center;border:1px solid var(--input);border-radius:50%;background:var(--background);font:inherit;font-size:1.65rem;line-height:1.2;cursor:pointer}
.av:active{background:var(--accent)}
.av.sel{background:var(--accent);border-color:var(--foreground);box-shadow:inset 0 0 0 1px var(--foreground)}

.sw{position:relative;width:44px;height:44px;border:0;background:transparent;padding:0;cursor:pointer;border-radius:50%}
.sw::before{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--c);border:2px solid var(--card);box-shadow:0 0 0 1px var(--input)}
.sw.sel::before{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--foreground)}

.look{display:flex;align-items:center;gap:14px;margin:4px 0 0;padding:12px;border:1px solid var(--border);background:var(--background)}
.look-note{margin:0}
.field-err{margin:6px 0 0;color:var(--destructive);font-size:.88rem;font-weight:600}
.field-err::before,.banner.bad::before{content:"";display:inline-block;width:1.05em;height:1.05em;margin-right:.4em;vertical-align:-.15em;background:currentColor;-webkit-mask:var(--ic-warn) center/contain no-repeat;mask:var(--ic-warn) center/contain no-repeat}

pre{white-space:pre-wrap;word-break:break-word;background:var(--background);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;font-size:.82rem;max-height:240px;overflow:auto;margin:0;font-family:inherit;line-height:1.7}
.note{font-size:.82rem;color:var(--muted-foreground);margin:8px 0 0}
.share{margin-top:18px;padding-top:6px;border-top:1px solid var(--border)}

/* 設計図：このアプリの主役。方眼の紙に枠線、角にラベル、金の版ズレを1か所だけ効かせる */
.blueprint{isolation:isolate;margin:4px .75rem .75rem 0}
.blueprint-frame{position:relative;padding:2.1rem 14px 2rem;border:1px solid var(--foreground);background-color:var(--background);background-image:var(--grid);background-size:16px 16px;box-shadow:inset 0 0 0 4px var(--background),inset 0 0 0 5px var(--input)}
.blueprint-frame::after{content:"";position:absolute;inset:-1px;z-index:-1;translate:.75rem .75rem;background:var(--glow)}
.bp-label{position:absolute;margin:0;font-family:var(--font-heading);font-size:.6875rem;font-weight:700;letter-spacing:.2em;line-height:1;color:var(--foreground)}
.bp-label.tl{top:.75rem;left:14px;display:flex;align-items:center;gap:.5rem}
.bp-label.tl::before{content:"";width:.5rem;height:.5rem;background:var(--amber)}
.bp-label.br{right:14px;bottom:.75rem;font-weight:600;letter-spacing:.14em;color:var(--muted-foreground)}
#sys{max-height:none;padding:0;border:0;background:none;font-size:.92rem;line-height:1.9}

.banner{margin:10px 0 0;padding:10px 12px;border-radius:var(--radius);font-size:.92rem;font-weight:600;border:1px solid var(--border);border-left:3px solid var(--amber);background:var(--secondary);color:var(--foreground)}
.banner.bad{color:var(--destructive);border-color:var(--destructive);background:var(--card)}
.banner.bad:not(.chat-err){border-left-width:3px}

/* ボットの顔。縁だけがテーマカラー(--c) */
.face{--s:4.5rem;width:var(--s);height:var(--s);border-radius:50%;display:grid;place-items:center;font-size:calc(var(--s) * .56);line-height:1.2;background:var(--background);border:3px solid var(--c,var(--border));flex:none}
.face img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.face.xs{--s:2rem;border-width:2px}
.face.sm{--s:3.2rem}
.face.lg{--s:5.5rem}
.bname{font-family:var(--font-heading);font-size:1.05rem;font-weight:700;line-height:1.35}
.brole{font-size:.84rem;color:var(--muted-foreground)}

.chat{display:flex;flex-direction:column;height:100%;min-height:0;background:var(--card)}
.chat-slot{height:100%;min-height:0}
.chat-head{display:flex;align-items:center;gap:12px;padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top,0px));border-bottom:1px solid var(--border);border-top:4px solid var(--c,var(--border));background:var(--card)}
.chat-id{flex:1;min-width:0}
.chat-id .brole{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.chat-extra{padding:0 12px;background:var(--card)}
.chat-extra:empty{display:none}
.chat-log{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px 12px;display:flex;flex-direction:column;gap:10px;background-color:var(--background);background-image:var(--grid);background-size:28px 28px;background-attachment:local}
.msg{display:flex;align-items:flex-end;gap:8px}
.msg-user{justify-content:flex-end}
.bub{min-width:0;padding:9px 13px;border:1px solid var(--input);white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.65}
.bub-bot{max-width:calc(100% - 2.6rem);background:var(--card);border-radius:.4rem .4rem .4rem var(--radius)}
.bub-user{max-width:88%;background:var(--primary);color:var(--primary-foreground);border-color:var(--primary);border-radius:.4rem .4rem var(--radius) .4rem}
.typing i{display:inline-block;width:6px;height:6px;margin:0 2px;background:var(--muted-foreground);animation:blink 1.2s infinite both}
.typing i:nth-child(2){animation-delay:.2s}
.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.chat-note{margin:0;padding:4px 12px;font-size:.78rem;color:var(--muted-foreground);text-align:center;background:var(--card)}
.chat-err{margin:0;border-left-width:3px;border-radius:0}
.chat-form{display:flex;gap:8px;align-items:flex-end;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border);background:var(--card)}
.chat-input{flex:1;min-width:0;min-height:44px;max-height:120px;resize:none;overflow-y:auto}
.chat-send{min-width:68px}
.plan{padding:0 14px}
.plan summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-size:.88rem;font-weight:600;color:var(--muted-foreground)}
.plan pre{max-height:28dvh;margin-bottom:10px}
.chat-extra .plan{padding:0}

/* スマホでは「ためす」で下から出るシート。開閉の動きだけ付ける */
.side{position:fixed;top:var(--vvt,0px);left:0;width:100%;height:var(--vvh,100dvh);z-index:40;overflow:hidden;border-top:2px solid var(--amber);transform:translateY(100%);visibility:hidden;transition:transform .28s ease,visibility 0s .28s;background:var(--background)}
.side.open{transform:none;visibility:visible;transition:transform .28s ease}
@media(min-width:760px){
.side{position:sticky;top:calc(12px + env(safe-area-inset-top,0px));width:auto;height:min(700px,calc(100dvh - 24px));transform:none;visibility:visible;z-index:auto;background:none;overflow:visible;border-top:0;transition:none}
.side .chat{border:1px solid var(--input);overflow:hidden}
.side .chat-head{padding-top:10px}
.side .chat-close.only-narrow{display:none}
}

.try{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:30;width:calc(100% - 32px);max-width:24rem;min-height:50px;padding:0 24px;font-size:1.02rem}
@media(min-width:760px){.try{display:none}}

.bots-bar{display:flex;align-items:flex-end;flex-wrap:wrap;gap:8px 12px;margin-bottom:16px}
.bots-bar .ttl{flex:1 1 auto;min-width:0}
.bots-bar h2{margin:0;font-size:1.4rem}
.bots-bar .note{margin:0 0 0 auto}
.bgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;counter-reset:bot}
@media(max-width:339px){.bgrid{grid-template-columns:minmax(0,1fr)}}
@media(min-width:600px){.bgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
@media(min-width:900px){.bgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* 名鑑のカード。ボットのテーマカラー(--c)は上の細い帯と顔の縁だけ。面は染めない */
.bcard{--c:var(--border);position:relative;display:flex;flex-direction:column;gap:6px;background:var(--card);border:1px solid var(--border);border-top:6px solid var(--c);border-radius:var(--radius);padding:0 8px 8px;counter-increment:bot}
@media(hover:hover){.bcard:hover{border-color:var(--foreground);border-top-color:var(--c)}}
.bcard.is-hidden{opacity:.5}
.bcard-main{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;min-height:44px;padding:26px 4px 6px;border:0;border-radius:var(--radius);background:none;color:inherit;font:inherit;text-align:center;cursor:pointer}
.bcard-main:active{background:var(--accent)}
.bcard-main::before{content:"No." counter(bot,decimal-leading-zero);position:absolute;top:8px;left:4px;font-family:var(--font-heading);font-size:.6875rem;font-weight:600;letter-spacing:.14em;color:var(--muted-foreground);font-variant-numeric:tabular-nums}
.bcard-main .face{--s:5.8rem;margin-bottom:4px}
.bcard .bname{font-size:1.12rem}
.bcard .brole{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:.86rem}
.tag{display:inline-block;font-size:.76rem;font-weight:600;line-height:1.5;padding:1px 8px;border-radius:var(--radius);border:1px solid var(--input);color:var(--foreground)}
.maker{align-self:stretch;font-size:.78rem;color:var(--muted-foreground);margin-top:auto;padding-top:8px;border-top:1px solid var(--border)}
.badges{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.badge{font-size:.74rem;font-weight:600;line-height:1.5;padding:0 8px;border-radius:var(--radius);border:1px solid var(--amber);color:var(--foreground)}
.badge.warn{border-color:var(--destructive);color:var(--destructive)}
.empty{margin:0;text-align:center;color:var(--muted-foreground);padding:36px 16px;border:1px dashed var(--input);border-radius:var(--radius);background:var(--card)}
.empty::before{content:"";display:block;width:2.6rem;height:2.6rem;margin:0 auto 12px;background:var(--amber);-webkit-mask:var(--ic-bot) center/contain no-repeat;mask:var(--ic-bot) center/contain no-repeat}

dialog{color:var(--foreground);padding:0;border:0;font:inherit}
dialog::backdrop{background:var(--scrim)}
dialog[open]{animation:fade .2s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
dialog.entry{width:min(420px,92vw);max-height:calc(var(--vvh,100dvh) - 24px);overflow:auto;margin:auto;padding:20px;border:1px solid var(--foreground);border-top:4px solid var(--amber);border-radius:var(--radius);background:var(--card)}
dialog.sheetdlg[open]{display:flex;flex-direction:column;margin:0;top:var(--vvt,0px);bottom:auto;left:0;width:100%;max-width:none;height:var(--vvh,100dvh);max-height:none;background:var(--background)}
dialog.sheetdlg .chat-slot{flex:1}
@media(min-width:760px){
dialog.sheetdlg[open]{margin:auto;inset:0;width:min(680px,92vw);height:min(780px,90dvh);border:1px solid var(--foreground);border-radius:var(--radius);overflow:hidden}
dialog.sheetdlg .chat-head{padding-top:10px}
}

@media(prefers-reduced-motion:reduce){
*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
.typing i{opacity:.6}
}
.share-link{margin-top:12px}
.share-row{display:flex;gap:8px;align-items:center}
.share-row input{flex:1;min-width:0;text-overflow:ellipsis}
body.guest .wrap,body.guest #try-btn{display:none}
.guest-miss{width:calc(100% - 32px);max-width:32rem;margin:20vh auto 0}
.guest-note{margin:0;padding:8px 16px;text-align:center;background:var(--secondary);border-bottom:1px solid var(--border);color:var(--foreground)}

/* ---------- 管理画面（admin.html）。上の部品をそのまま使い、足りない分だけここに置く ---------- */
.wrap.adm{max-width:80rem}
.adm-login{max-width:26rem;margin:6vh auto 0}
.adm-grid{display:block}
@media(min-width:1000px){.adm-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px;align-items:start}.adm-grid .card{margin-bottom:16px}}
.adm-bar{display:flex;align-items:center;justify-content:flex-end;gap:8px 12px;flex-wrap:wrap;margin:0 0 12px}
.adm-bar .note{margin:0}

.adm-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:12px}
.adm-tile{padding:14px;border:1px solid var(--border);background:var(--background)}
.adm-tile-l{margin:0;font-size:.8rem;font-weight:600;color:var(--muted-foreground)}
.adm-tile-v{margin:4px 0 0;font-family:var(--font-heading);font-size:1.9rem;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}
.adm-tile-v .of{font-size:1rem;font-weight:600;color:var(--muted-foreground)}
.adm-tile-s{margin:2px 0 0;font-size:.8rem;color:var(--muted-foreground)}
.adm-meter{height:6px;margin-top:8px;background:var(--input)}
.adm-meter i{display:block;height:100%;background:var(--primary)}
.adm-meter.hot i{background:var(--destructive)}

.adm-rows{display:grid;gap:10px;margin-bottom:4px}
.adm-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:12px 14px;border:1px solid var(--border);border-left:6px solid var(--amber);background:var(--background)}
.adm-row.off{border-color:var(--destructive);border-left-width:6px}
.adm-row-t{flex:1 1 12rem;min-width:0}
.adm-row-n{margin:0;font-family:var(--font-heading);font-weight:700}
.adm-row-t .note{margin:2px 0 0}
.adm-state{font-size:.8rem;font-weight:700;line-height:1.5;padding:2px 10px;border:1px solid var(--amber);border-radius:var(--radius);white-space:nowrap}
.adm-row.off .adm-state{background:var(--destructive);border-color:var(--destructive);color:var(--background)}
.adm-sw{position:relative;flex:none;width:4.25rem;height:44px;padding:0;border:1px solid var(--input);border-radius:var(--radius);background:var(--secondary);cursor:pointer}
.adm-knob{position:absolute;top:5px;bottom:5px;left:5px;width:1.7rem;background:var(--muted-foreground)}
.adm-sw[aria-checked="true"]{background:var(--primary);border-color:var(--primary)}
.adm-sw[aria-checked="true"] .adm-knob{left:auto;right:5px;background:var(--primary-foreground)}
.adm-sw:disabled{opacity:.45;cursor:default}

.adm-filter{display:flex;align-items:flex-end;flex-wrap:wrap;gap:8px 12px;margin-bottom:12px}
.adm-q{flex:1 1 14rem;min-width:0}
.adm-q label{margin-top:6px}
.adm-count{margin:0 0 12px}
.adm-table{width:100%;border-collapse:collapse;font-size:.88rem}
.adm-table th{padding:8px 10px;text-align:left;font-size:.75rem;font-weight:600;letter-spacing:.08em;color:var(--muted-foreground);border-bottom:1px solid var(--foreground)}
.adm-table td{padding:10px;vertical-align:middle;border-bottom:1px solid var(--border)}
.adm-table .face{--s:3rem}
.adm-name{font-family:var(--font-heading);font-weight:700}
.adm-ops{display:flex;flex-wrap:wrap;gap:6px}
.adm-ops .btn{min-height:44px;padding:4px 12px;font-size:.82rem}
.adm-detail td{padding:6px 10px 18px;border-bottom:1px solid var(--border)}
.adm-detail .blueprint{margin-top:0}
.blueprint pre{max-height:none;padding:0;border:0;background:none;font-size:.88rem;line-height:1.85}
.adm-st{display:inline-block;font-size:.76rem;font-weight:600;line-height:1.5;padding:1px 8px;border:1px solid var(--input);border-radius:var(--radius);white-space:nowrap}
.adm-st.hid{border-color:var(--destructive);color:var(--destructive)}
@media(max-width:999px){
.adm-table thead{display:none}
.adm-table,.adm-table tbody,.adm-table tr,.adm-table td{display:block}
.adm-bot{margin-bottom:12px;padding:8px 12px;border:1px solid var(--border);background:var(--background)}
.adm-table td{padding:4px 0;border:0}
.adm-table td[data-label]::before{content:attr(data-label);display:block;font-size:.72rem;font-weight:600;letter-spacing:.08em;color:var(--muted-foreground)}
.adm-table td.c-face{display:flex}
.adm-detail td{padding:8px 0 10px}
}

.btn.danger{border-color:var(--destructive);color:var(--destructive)}
@media(hover:hover){.btn.danger:hover{border-color:var(--destructive)}}
.btn.danger:active,.btn.danger.fill{background:var(--destructive);border-color:var(--destructive);color:var(--background)}
.btn.danger:disabled:active{background:var(--card);border-color:var(--destructive);color:var(--destructive)}
.card.danger{border-color:var(--destructive);border-top:4px solid var(--destructive)}
.card.danger .eyebrow{color:var(--destructive)}
.adm-reset{margin-top:18px;padding-top:6px;border-top:1px solid var(--border)}
.adm-reset .adm-row-n{margin-top:10px}
.adm-reset label{margin-top:8px}
@media(max-width:559px){.adm-reset .share-row{flex-wrap:wrap}.adm-reset .share-row .btn{flex:1 1 100%}}
a.btn{text-decoration:none}
.adm-table th{white-space:nowrap}
@media(min-width:1000px){.adm-name{display:inline-block;min-width:5.5em}}
input[type=password]{width:100%;min-height:44px;padding:9px 12px;border:1px solid var(--input);border-radius:var(--radius);background:var(--background);color:var(--foreground);font:inherit;font-size:max(16px,1rem);outline:none}
input[type=password]:focus{border-color:var(--ring);outline:2px solid var(--ring);outline-offset:1px}
.adm-code{margin-bottom:18px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.adm-code-v{margin:2px 0 8px;font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;font-size:2rem;font-weight:700;letter-spacing:.14em;line-height:1.3;overflow-wrap:anywhere}
.adm-code label{margin-top:6px}
.adm-code .share-row{flex-wrap:wrap}
.adm-code .share-row input{flex:1 1 10rem}