/* OiKiln — clay, glaze, and fire. Semi-transparent glaze panels over earthen ground. */
:root{
  --clay:#2b1d16; --clay2:#3a2719; --terra:#c96f4a; --terra2:#e08a5a;
  --ash:#e8ded2; --ash-dim:#b8a893; --celadon:#9db89a; --tenmoku:#4a2f35;
  --glaze:rgba(232,222,210,.08); --glaze2:rgba(232,222,210,.14); --line:rgba(232,222,210,.18);
  --fire:#ff9a3c; --ember:#ff5f2e; --good:#8fce7e; --bad:#ff7a6b;
  --radius:18px; --font:"Avenir Next","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{
  font-family:var(--font); color:var(--ash); min-height:100vh;
  background:
    radial-gradient(1100px 520px at 85% -10%, rgba(255,122,46,.20), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(157,184,154,.12), transparent 55%),
    linear-gradient(160deg,#1d130d 0%, var(--clay) 45%, #241611 100%);
  background-attachment:fixed;
}
body::before{content:""; position:fixed; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(232,222,210,.05) 1px, transparent 1.4px); background-size:22px 22px;}
a{color:var(--terra2)} button,input,select,textarea{font:inherit}
.wrap{max-width:1220px;margin:0 auto;padding:26px 20px 70px}
header.bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ash)}
.logo .mark{width:44px;height:44px;border-radius:50% 50% 46% 46%/62% 62% 38% 38%;
  background:radial-gradient(circle at 50% 78%, #ffb066 0 18%, var(--ember) 34%, #7a2d18 62%, #3a1c10 100%);
  box-shadow:inset 0 -8px 14px rgba(0,0,0,.55), 0 6px 18px rgba(255,95,46,.35); border:2px solid rgba(232,222,210,.25)}
.logo b{font-size:24px;letter-spacing:.5px} .logo span{display:block;font-size:12px;color:var(--ash-dim);letter-spacing:1.6px;text-transform:uppercase}
.panel{background:var(--glaze); border:1px solid var(--line); border-radius:var(--radius);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); padding:20px; box-shadow:0 14px 40px rgba(0,0,0,.35)}
.panel h2,.panel h3{margin:.1em 0 .5em} .muted{color:var(--ash-dim)} .small{font-size:13px}
.grid{display:grid;gap:16px} .grid2{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.btn{background:linear-gradient(180deg,var(--terra2),var(--terra)); color:#fff7ef; border:1px solid rgba(255,255,255,.25);
  padding:9px 16px;border-radius:999px;cursor:pointer;font-weight:600;box-shadow:0 6px 16px rgba(201,111,74,.35)}
.btn:hover{filter:brightness(1.08)} .btn:disabled{opacity:.5;cursor:default}
.btn.ghost{background:var(--glaze2);color:var(--ash);box-shadow:none}
.btn.fire{background:linear-gradient(180deg,#ffb066,var(--ember)); box-shadow:0 6px 22px rgba(255,95,46,.5)}
.btn.sm{padding:5px 11px;font-size:13px}
input[type=text],input[type=password],input[type=url],input[type=number],textarea,select{
  width:100%;background:rgba(20,12,7,.55);color:var(--ash);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
label{display:block;font-size:13px;color:var(--ash-dim);margin:10px 0 5px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;border:1px solid var(--line);background:var(--glaze);font-size:12px}
.stamp{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;color:#fff;font-weight:800;font-size:11px;transform:rotate(-4deg);box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.stage{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 2px}
.stage i{font-style:normal;font-size:12px;letter-spacing:1px;text-transform:uppercase;padding:5px 12px;border-radius:999px;border:1px solid var(--line);color:var(--ash-dim);background:rgba(0,0,0,.22)}
.stage i.on{color:#fff;border-color:rgba(255,154,60,.7);background:linear-gradient(180deg,rgba(255,154,60,.38),rgba(255,95,46,.28));box-shadow:0 0 18px rgba(255,122,46,.35)}
table{width:100%;border-collapse:collapse;font-size:14px} td,th{padding:8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.pyro{height:10px;border-radius:99px;background:rgba(0,0,0,.4);overflow:hidden;border:1px solid var(--line)}
.pyro i{display:block;height:100%;background:linear-gradient(90deg,#7a2d18,var(--ember),var(--fire),#ffd27a);transition:width .6s}
.kcard{cursor:pointer;transition:transform .15s,border-color .15s} .kcard:hover{transform:translateY(-2px);border-color:rgba(255,154,60,.55)}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tool{background:var(--glaze2);border:1px solid var(--line);color:var(--ash);border-radius:12px;padding:8px 13px;cursor:pointer}
.tool.on{background:linear-gradient(180deg,rgba(255,176,102,.85),rgba(255,95,46,.85));color:#fff;border-color:#ffb066}
.modal{position:fixed;inset:0;background:rgba(12,6,3,.72);display:flex;align-items:center;justify-content:center;z-index:60;padding:18px}
.modal .panel{max-width:560px;width:100%;max-height:92vh;overflow:auto;background:rgba(43,29,22,.92)}
.hidden{display:none!important}
pre.brief{white-space:pre-wrap;background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:12px;padding:14px;max-height:420px;overflow:auto;font-size:13px}
/* studio */
.studio{display:grid;grid-template-columns:250px 1fr 330px;gap:14px;align-items:start}
@media(max-width:1000px){.studio{grid-template-columns:1fr}}
.pagesList button{display:block;width:100%;text-align:left;margin:0 0 7px;background:var(--glaze);border:1px solid var(--line);color:var(--ash);border-radius:12px;padding:9px 11px;cursor:pointer}
.pagesList button.on{border-color:var(--fire);background:rgba(255,122,46,.16)}
.shotWrap{position:relative;background:#14100c;border:1px solid var(--line);border-radius:16px;overflow:auto;max-height:82vh}
.shotInner{position:relative;margin:0 auto}
.shotInner img{display:block;width:100%}
.shotInner svg{position:absolute;inset:0;width:100%;height:100%}
.markpin{position:absolute;transform:translate(-50%,-100%);cursor:pointer;z-index:5}
.thread{border:1px solid var(--line);border-radius:12px;padding:10px;margin:0 0 9px;background:rgba(0,0,0,.22);cursor:pointer}
.thread.on{border-color:var(--fire)} .thread.done{opacity:.55}
.legend{display:flex;gap:7px;flex-wrap:wrap}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:rgba(43,29,22,.95);border:1px solid var(--line);color:var(--ash);padding:10px 18px;border-radius:999px;z-index:99;box-shadow:0 10px 30px rgba(0,0,0,.5)}
:focus-visible{outline:2px solid var(--fire);outline-offset:2px}