:root{
  --bg:#090c0a; --bg-2:#0d120f; --panel:#121a15; --panel-2:#16201a;
  --ink:#eef3ef; --muted:#9bb0a3; --green:#36d399; --green-dk:#1f9e72;
  --gold:#e2b65c; --gold-dk:#c1933a; --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.06); --shadow:0 16px 40px rgba(0,0,0,.45);
  --radius:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:
  radial-gradient(1000px 500px at 12% -8%,rgba(54,211,153,.10),transparent 60%),
  radial-gradient(900px 480px at 100% 0,rgba(226,182,92,.08),transparent 55%),
  var(--bg);
  color:var(--ink);font-family:-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif;
  line-height:1.7;-webkit-font-smoothing:antialiased}
.gold{color:var(--gold)} .green{color:var(--green)} .muted{color:var(--muted)}

/* ---------- login ---------- */
.login-wrap{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{width:100%;max-width:400px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:36px 32px}
.brand{font-weight:800;font-size:1.35rem;letter-spacing:.02em;margin-bottom:4px}
.brand .dot{color:var(--gold)}
.login-card .sub{color:var(--muted);font-size:.9rem;margin-bottom:26px}
label{display:block;font-size:.8rem;color:var(--muted);margin:16px 0 6px}
input{width:100%;background:var(--bg-2);border:1px solid var(--line);border-radius:10px;
  color:var(--ink);padding:13px 14px;font-size:1rem;outline:none;transition:border-color .15s}
input:focus{border-color:var(--green-dk)}
.btn{width:100%;margin-top:24px;background:var(--green);color:#062015;font-weight:800;
  border:none;border-radius:10px;padding:14px;font-size:1.02rem;cursor:pointer;transition:opacity .15s}
.btn:hover{opacity:.9} .btn:disabled{opacity:.5;cursor:default}
.err{color:#ff8f8f;font-size:.86rem;margin-top:14px;min-height:1.2em}
.foot{color:var(--muted);font-size:.75rem;text-align:center;margin-top:22px}

/* ---------- chat ---------- */
.app{display:flex;flex-direction:column;height:100vh}
.topbar{display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px;border-bottom:1px solid var(--line);background:rgba(13,18,15,.7);
  backdrop-filter:blur(8px);position:sticky;top:0;z-index:5}
.topbar .name{font-weight:800}
.topbar .name small{display:block;color:var(--muted);font-weight:400;font-size:.72rem}
.quota{color:var(--muted);font-size:.82rem}
.quota b{color:var(--gold)}
.linkbtn{background:none;border:1px solid var(--line);color:var(--muted);border-radius:8px;
  padding:7px 12px;font-size:.8rem;cursor:pointer;margin-left:10px}
.linkbtn:hover{color:var(--ink);border-color:var(--green-dk)}

.stream{flex:1;overflow-y:auto;padding:26px 0}
.thread{max-width:820px;margin:0 auto;padding:0 22px;display:flex;flex-direction:column;gap:18px}
.msg{display:flex;gap:12px;max-width:100%}
.msg .av{flex:0 0 30px;height:30px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;font-size:.9rem;font-weight:800}
.msg.user{flex-direction:row-reverse}
.msg.user .av{background:var(--gold);color:#1a1206}
.msg.ai .av{background:var(--panel-2);border:1px solid var(--green-dk);color:var(--green)}
.bubble{padding:13px 16px;border-radius:14px;font-size:.98rem;white-space:pre-wrap;word-break:break-word}
.msg.user .bubble{background:var(--green-dk);color:#eafff5;border-top-right-radius:4px}
.msg.ai .bubble{background:var(--panel);border:1px solid var(--line);border-top-left-radius:4px}
.hint{color:var(--muted);text-align:center;font-size:.9rem;margin-top:40px}
.hint b{color:var(--ink)}

.composer{border-top:1px solid var(--line);padding:14px 0 20px;background:var(--bg)}
.composer .inner{max-width:820px;margin:0 auto;padding:0 22px;display:flex;gap:10px;align-items:flex-end}
.composer .inner.col{flex-direction:column;align-items:stretch;gap:8px}
.composer .row{display:flex;gap:10px;align-items:flex-end}
.composer textarea{flex:1;resize:none;max-height:160px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;color:var(--ink);padding:13px 15px;font-size:1rem;outline:none;font-family:inherit}
.composer textarea:focus{border-color:var(--green-dk)}
.send{flex:0 0 auto;background:var(--green);color:#062015;font-weight:800;border:none;
  border-radius:12px;padding:13px 20px;cursor:pointer;font-size:1rem}
.send:disabled{opacity:.45;cursor:default}
.blink::after{content:"▋";color:var(--green);animation:bl 1s steps(2) infinite}
@keyframes bl{50%{opacity:0}}



/* ---------- demo（見本）表示 ---------- */
.demo-note{background:rgba(226,182,92,.12);border:1px solid rgba(226,182,92,.45);color:var(--gold);
  border-radius:10px;padding:10px 12px;font-size:.84rem;font-weight:700;margin-bottom:18px;line-height:1.55}
.demo-banner{background:rgba(226,182,92,.10);border-bottom:1px solid rgba(226,182,92,.35);
  padding:9px 22px;font-size:.82rem;color:var(--muted);line-height:1.6}
.demo-banner b{color:var(--gold);margin-right:8px}
.topbar .actions{display:flex;align-items:center;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.topbar .actions .linkbtn{margin-left:4px}

/* ---------- サンプル値ボタン・取扱資材 ---------- */
.hint{text-align:left;max-width:640px;margin:28px auto 0}
.hint .steps{margin:10px 0 12px;font-size:.88rem}
.samples{display:flex;flex-wrap:wrap;gap:8px}
.samples.compact{gap:6px}
.chip{background:var(--panel-2);border:1px solid var(--green-dk);color:var(--green);border-radius:999px;
  padding:8px 14px;font-size:.86rem;font-weight:700;cursor:pointer;font-family:inherit}
.chip:hover{background:rgba(54,211,153,.12)}
.samples.compact .chip{padding:5px 11px;font-size:.78rem;font-weight:600}
.shop{margin-top:18px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 16px}
.shop summary{cursor:pointer;color:var(--ink);font-weight:700;font-size:.9rem}
.shop ul{list-style:none;margin-top:8px;font-size:.84rem}
.shop li{padding:5px 0;border-bottom:1px solid var(--line-2)}
.shop li:last-child{border-bottom:none}
.small{font-size:.8rem;margin-top:8px}
.disclaimer{color:var(--muted);font-size:.72rem;text-align:center}

@media(max-width:640px){
  .login-card{padding:28px 22px}
  .topbar{padding:10px 16px;align-items:flex-start;gap:8px}
  .topbar .name{font-size:.92rem}
  .quota{font-size:.75rem;width:100%;text-align:right}
  .linkbtn{padding:6px 9px;font-size:.74rem}
  .demo-banner{padding:8px 16px;font-size:.76rem}
  .thread,.composer .inner{padding:0 16px}
  .bubble{font-size:.93rem}
}