/* ============================================================
   TPSS · CREATION STUDIO - shared activity shell
   Dark cinematic workspace: topbar HUD + stage + rail + toast.
   Loaded by every Creation Studio activity page.
   ============================================================ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:#0a0713;
  color:#f1dcf0;
  font-family:var(--font-body);
  overflow:hidden;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.mi{font-family:'Material Symbols Outlined';font-variation-settings:'FILL' 0,'wght' 300,'opsz' 24;line-height:1;user-select:none}

/* ===== COSMIC STAGE ===== */
.stage{position:fixed;inset:0;overflow:hidden;display:flex;flex-direction:column}
.sky{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(46% 40% at 14% -8%, var(--sky1,rgba(255,45,187,.30)) 0%, transparent 58%),
    radial-gradient(48% 44% at 92% 6%, var(--sky2,rgba(150,80,255,.24)) 0%, transparent 58%),
    radial-gradient(58% 52% at 84% 96%, var(--sky3,rgba(80,190,255,.18)) 0%, transparent 56%),
    linear-gradient(180deg,#160b22 0%,#100819 44%,#0a0713 100%);
}
.sky::after{content:none}
@keyframes studioSwirl{to{transform:rotate(360deg)}}
#stars{position:absolute;inset:0;z-index:1;pointer-events:none}
.vign{position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 200px 40px rgba(6,3,14,.85)}

/* ===== TOPBAR ===== */
.sbar{position:relative;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:20px 40px;background:linear-gradient(180deg,rgba(10,6,20,.72),transparent);flex-shrink:0}
.sbar .back{display:flex;align-items:center;gap:11px;color:#f6d9f4;font-family:var(--font-label);
  font-size:11px;letter-spacing:.32em;text-transform:uppercase;font-weight:700;opacity:.82;transition:all .3s}
.sbar .back:hover{opacity:1;gap:15px;color:#fff}
.sbar .back .mi{font-size:18px}
.sbar .id{text-align:center;line-height:1.4}
.sbar .id .n{font-family:var(--font-label);font-size:9px;letter-spacing:.5em;color:var(--accent,#ff5cc8);font-weight:700;text-transform:uppercase}
.sbar .id .t{font-family:var(--font-headline);font-style:italic;font-weight:400;font-size:20px;color:#fff}
.hud{display:flex;gap:12px}
.chip{display:flex;align-items:center;gap:11px;padding:9px 17px 9px 13px;border-radius:40px;
  background:rgba(16,10,30,.55);backdrop-filter:blur(20px);border:1px solid rgba(255,150,230,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 8px 24px rgba(0,0,0,.4)}
.chip .mi{font-size:19px;color:var(--accent,#ff5cc8)}
.chip .v{font-family:var(--font-headline);font-style:italic;font-weight:400;font-size:19px;color:#fff;line-height:1}
.chip .l{font-family:var(--font-label);font-size:8px;letter-spacing:.24em;color:#e6bfe0;text-transform:uppercase;margin-top:2px;font-weight:700}
.chip .bump{animation:bump .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.34)}100%{transform:scale(1)}}

/* ===== WORKSPACE LAYOUT ===== */
.work{position:relative;z-index:10;flex:1;display:grid;gap:26px;padding:8px 40px 34px;min-height:0}
.work-2{grid-template-columns:1fr 380px}
.work-c{grid-template-columns:1fr;place-items:center}

.brief{max-width:440px}
.brief .k{font-family:var(--font-label);font-size:10px;letter-spacing:.42em;color:var(--accent,#ff5cc8);font-weight:700;text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:12px}
.brief .k::before{content:'';width:34px;height:1px;background:linear-gradient(90deg,var(--accent,#ff5cc8),transparent)}
.brief h1{font-family:var(--font-headline);font-style:italic;font-weight:400;font-size:clamp(34px,4vw,52px);line-height:1.02;color:#fff;margin-bottom:16px;text-shadow:0 2px 30px rgba(255,45,187,.22)}
.brief h1 em{font-style:italic;background:linear-gradient(120deg,#ffd6f4,var(--accent,#ff5cc8) 55%,#c07bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.brief p{font-size:14px;line-height:1.66;color:rgba(240,214,240,.8);font-weight:500;max-width:410px}

/* ===== GLASS PANEL (surfaces inside stage) ===== */
.glass{position:relative;background:linear-gradient(155deg,rgba(38,20,46,.6),rgba(16,9,26,.72));
  backdrop-filter:blur(26px);border:1px solid rgba(255,150,230,.18);border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06)}
.glass-top{position:relative;overflow:hidden}
.glass-top::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent,#ff5cc8),#5cc8ff,transparent);opacity:.85}

/* ===== SIDE RAIL CARDS ===== */
.rail{display:flex;flex-direction:column;gap:16px;min-height:0}
.rcard{padding:22px 24px;border-radius:14px;background:linear-gradient(155deg,rgba(34,18,42,.58),rgba(14,8,24,.66));
  backdrop-filter:blur(24px);border:1px solid rgba(255,150,230,.16)}
.rcard .eye{font-family:var(--font-label);font-size:9px;letter-spacing:.4em;color:var(--accent,#ff5cc8);font-weight:700;text-transform:uppercase;margin-bottom:11px}
.rcard h3{font-family:var(--font-headline);font-style:italic;font-weight:400;font-size:21px;color:#fff;margin-bottom:9px;line-height:1.12}
.rcard p{font-size:12.5px;line-height:1.62;color:rgba(240,214,240,.76);font-weight:500}
.rcard.feat{background:linear-gradient(155deg,rgba(255,45,187,.16),rgba(16,9,26,.7));border-color:rgba(255,92,200,.42)}

/* mini metric grid */
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.metric{padding:13px 14px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,150,230,.14)}
.metric .v{font-family:var(--font-headline);font-style:italic;font-weight:400;font-size:26px;color:var(--accent,#ff5cc8);line-height:.95}
.metric .l{font-family:var(--font-label);font-size:8px;letter-spacing:.28em;color:#c9a9c4;font-weight:700;text-transform:uppercase;margin-top:6px}

/* progress spine */
.bar{height:8px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden;position:relative}
.bar > i{position:absolute;inset:0 auto 0 0;width:0;border-radius:6px;
  background:linear-gradient(90deg,#c40f8f,var(--accent,#ff5cc8),#5cc8ff);box-shadow:0 0 16px rgba(255,92,200,.7);
  transition:width .7s cubic-bezier(.2,1,.3,1)}

/* ===== BUTTONS ===== */
.btn{font-family:var(--font-label);font-weight:700;font-size:11px;letter-spacing:.34em;text-transform:uppercase;
  padding:15px 30px;border-radius:6px;transition:all .3s cubic-bezier(.4,0,.2,1);display:inline-flex;align-items:center;gap:10px;justify-content:center}
.btn-p{background:linear-gradient(135deg,#e60d9c,#ff2dbb);color:#fff;box-shadow:0 8px 26px rgba(255,45,187,.44)}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 12px 36px rgba(255,45,187,.66)}
.btn-g{background:transparent;border:1px solid rgba(255,150,230,.34);color:#f6d9f4}
.btn-g:hover{border-color:#ff5cc8;box-shadow:0 0 20px rgba(255,92,200,.3)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
.btn .mi{font-size:17px}

/* ===== TEACHING TOAST ===== */
.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,140%);z-index:60;max-width:560px;width:calc(100% - 80px);
  display:flex;gap:14px;padding:17px 22px;border-radius:12px;backdrop-filter:blur(24px);
  box-shadow:0 20px 50px rgba(0,0,0,.55);transition:transform .5s cubic-bezier(.2,1.2,.4,1);pointer-events:none}
.toast.show{transform:translate(-50%,0)}
.toast .mi{font-size:22px;flex-shrink:0;margin-top:1px}
.toast .msg{font-size:13.5px;line-height:1.56;font-weight:500}
.toast .msg b{font-weight:700}
.toast.ok{background:linear-gradient(155deg,rgba(12,52,44,.86),rgba(14,7,26,.9));border:1px solid rgba(90,255,200,.42);color:#d0ffee}
.toast.ok .mi{color:#5affc8}.toast.ok b{color:#fff}
.toast.err{background:linear-gradient(155deg,rgba(66,10,46,.86),rgba(22,5,26,.9));border:1px solid rgba(255,100,160,.5);color:#ffd6e6}
.toast.err .mi{color:#ff6fa4}.toast.err b{color:#fff}
.toast.info{background:linear-gradient(155deg,rgba(30,20,60,.86),rgba(14,7,26,.9));border:1px solid rgba(150,150,255,.4);color:#e0ddff}
.toast.info .mi{color:#a9a9ff}.toast.info b{color:#fff}

/* ===== SLIDE PANEL (science / field notes) ===== */
.panel{position:fixed;inset:0;z-index:80;display:none;justify-content:flex-end}
.panel.show{display:flex}
.panel-scrim{position:absolute;inset:0;background:rgba(6,3,14,.62);backdrop-filter:blur(6px);animation:fade .3s both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.panel-card{position:relative;width:min(460px,94vw);height:100%;overflow-y:auto;
  background:linear-gradient(160deg,rgba(28,14,40,.98),rgba(12,7,24,.99));border-left:1px solid rgba(255,120,220,.4);
  box-shadow:-30px 0 80px rgba(0,0,0,.6);padding:40px 36px 48px;animation:slidein .5s cubic-bezier(.2,1,.3,1)}
@keyframes slidein{from{transform:translateX(46px);opacity:0}to{transform:none;opacity:1}}
.panel-card::-webkit-scrollbar{width:8px}.panel-card::-webkit-scrollbar-thumb{background:rgba(255,120,220,.4);border-radius:8px}
.panel-close{position:absolute;top:22px;right:24px;font-size:24px;color:#e6bfe0;cursor:pointer;transition:color .2s}
.panel-close:hover{color:#fff}
.panel-eye{font-family:var(--font-label);font-size:10px;letter-spacing:.4em;color:var(--accent,#ff5cc8);font-weight:700;text-transform:uppercase;margin-bottom:12px}
.panel-title{font-family:var(--font-headline);font-style:italic;font-weight:400;font-size:32px;line-height:1.06;color:#fff;margin-bottom:18px}
.panel-title em{background:linear-gradient(120deg,#ffd6f4,var(--accent,#ff5cc8) 55%,#c07bff);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic}
.panel-card p{font-size:13.5px;line-height:1.7;color:rgba(240,214,240,.84);margin-bottom:13px}
.panel-card p b{color:#ffbfef}
.panel-card h4{font-family:var(--font-label);font-size:10px;letter-spacing:.32em;color:#5cc8ff;font-weight:700;text-transform:uppercase;margin:22px 0 11px;padding-top:18px;border-top:1px solid rgba(255,150,230,.16)}
.chiprow{display:flex;flex-wrap:wrap;gap:8px}
.tchip{font-family:var(--font-mono);font-size:11px;color:#ffd9f4;background:rgba(255,92,200,.14);border:1px solid rgba(255,92,200,.34);border-radius:40px;padding:7px 13px}

/* ===== REWARD OVERLAY ===== */
.reward{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;background:rgba(6,3,14,.82);backdrop-filter:blur(18px)}
.reward.show{display:flex}
.reward-card{position:relative;max-width:520px;margin:20px;text-align:center;padding:54px 48px 44px;border-radius:16px;
  background:linear-gradient(160deg,rgba(40,16,52,.97),rgba(14,7,26,.98));border:1px solid rgba(255,120,220,.5);
  box-shadow:0 0 100px rgba(255,45,187,.42);animation:rin .8s cubic-bezier(.2,1.3,.3,1)}
@keyframes rin{from{opacity:0;transform:scale(.86) translateY(28px)}to{opacity:1;transform:none}}
.reward-card .e{font-family:var(--font-label);font-size:10px;letter-spacing:.5em;color:var(--accent,#ff5cc8);font-weight:700;text-transform:uppercase;margin-bottom:16px}
.reward-card .medal{width:120px;height:120px;border-radius:50%;margin:0 auto 24px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 34% 26%,rgba(255,255,255,.5),transparent 46%),conic-gradient(from 0deg,#ff2dbb,#c07bff,#5cc8ff,#ff2dbb);
  animation:spin 6s linear infinite;box-shadow:0 0 54px rgba(255,45,187,.55)}
.reward-card .medal .mi{font-size:52px;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.4)}
@keyframes spin{to{transform:rotate(360deg)}}
.reward-card h2{font-family:var(--font-headline);font-style:italic;font-weight:400;font-size:38px;line-height:1.08;color:#fff;margin-bottom:18px}
.reward-card h2 em{background:linear-gradient(120deg,#ffd6f4,var(--accent,#ff5cc8) 55%,#c07bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.reward-card p{font-size:14px;line-height:1.68;color:rgba(240,214,240,.86);margin-bottom:16px}
.reward-card .sp-line{font-family:var(--font-mono);font-size:13px;color:#5affc8;margin-bottom:26px;letter-spacing:.03em}

/* ===== RAIL BUTTONS (top-right utility) ===== */
.util{display:flex;gap:9px}
.ubtn{display:flex;align-items:center;gap:7px;padding:9px 14px;border-radius:40px;background:rgba(16,10,30,.5);
  backdrop-filter:blur(20px);border:1px solid rgba(255,150,230,.2);color:#f6d9f4;font-family:var(--font-label);
  font-size:9px;letter-spacing:.22em;font-weight:700;text-transform:uppercase;transition:all .25s}
.ubtn .mi{font-size:16px;color:#5cc8ff}
.ubtn:hover{border-color:#ff5cc8;color:#fff;transform:translateY(-2px)}

@media (prefers-reduced-motion:reduce){.sky::after,.reward-card .medal{animation:none}}