:root{--bg:#111419;--panel:#1a1f25;--panel2:#222930;--line:#343d46;--text:#edf2f2;--muted:#9da8ad;--cyan:#54d4c5;--cyan2:#2b958b;--amber:#f1b968;--danger:#e47878;--radius:14px}
    *{box-sizing:border-box}html,body{height:100%;margin:0}body{font:15px/1.35 "Segoe UI",Inter,system-ui,sans-serif;background:radial-gradient(circle at 75% -20%,#25343b 0,transparent 38%),var(--bg);color:var(--text);overflow:hidden}
    button,input,select{font:inherit}button{color:inherit}.app{height:100%;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:10px;padding:12px 16px}
    header,.toolbar,.sessionbar{display:flex;align-items:center;gap:10px;background:color-mix(in srgb,var(--panel) 93%,transparent);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 12px 32px #0005}
    header{padding:10px 14px}.brand{display:flex;align-items:center;gap:11px}.mark{width:30px;height:30px;border:2px solid var(--cyan);border-radius:50%;position:relative}.mark:after{content:"";position:absolute;inset:7px;border:2px solid var(--cyan);transform:rotate(45deg)}
    h1{font-size:17px;margin:0;letter-spacing:.02em}.sub{color:var(--muted);font-size:12px}.presence{margin-left:auto;display:flex;align-items:center;gap:8px}.pill{display:flex;align-items:center;gap:7px;padding:6px 10px;border:1px solid var(--line);border-radius:99px;background:#12171b}.dot{width:8px;height:8px;border-radius:50%;background:#6e777d}.dot.online{background:var(--cyan);box-shadow:0 0 9px var(--cyan)}.room{display:flex;gap:6px;align-items:center}.room input{width:92px;height:36px;border:1px solid var(--line);border-radius:9px;background:#11161a;color:var(--text);padding:0 9px;text-transform:uppercase;letter-spacing:.12em}.room-code{color:var(--cyan);font-weight:700;letter-spacing:.12em}.room-actions{display:none;gap:6px}.room-actions.show{display:flex}
    .toolbar{padding:9px 10px;overflow-x:auto}.group{display:flex;align-items:center;gap:7px;padding-right:10px;border-right:1px solid var(--line);white-space:nowrap}.group:last-child{border:0;padding-right:0}.spacer{margin-left:auto}.label{color:var(--muted);font-size:13px}.tool,.action,.shape{border:1px solid var(--line);background:#151a1f;border-radius:9px;min-height:36px;padding:7px 11px;cursor:pointer;transition:.15s}.tool:hover,.action:hover,.shape:hover{border-color:#5e6b73;background:#20272d}.tool.active,.shape.active{background:#183d3b;border-color:var(--cyan);color:#d9fffa;box-shadow:inset 0 0 0 1px #54d4c533}.action.danger:hover{border-color:var(--danger);color:#ffd9d9}
    input[type=range]{accent-color:var(--cyan);width:112px}input[type=color]{width:38px;height:36px;border:1px solid var(--line);border-radius:9px;background:#151a1f;padding:4px}.value{min-width:38px;color:var(--cyan);font-variant-numeric:tabular-nums}.swatches{display:flex;gap:5px}.swatch{width:25px;height:25px;border-radius:50%;border:2px solid #ffffff28;cursor:pointer}.swatch.active{outline:2px solid var(--cyan);outline-offset:2px}
    .workspace{min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:10px}.stage{min-height:0;position:relative;display:grid;place-items:center;background:#0a0d10;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 18px 50px #0008}.stage:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff07 1px,transparent 1px),linear-gradient(90deg,#ffffff07 1px,transparent 1px);background-size:28px 28px}.paper{position:relative;width:min(100%,calc((100vh - 244px)*1.6));aspect-ratio:16/10;max-height:100%;background:#f6f5f1;box-shadow:0 8px 40px #000b;cursor:crosshair;touch-action:none}.paper canvas{display:block;width:100%;height:100%}.emptyhint{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;color:#778087;text-align:center;font-size:14px}.emptyhint strong{display:block;color:#50595f;font-size:19px;margin-bottom:5px;font-weight:600}
    .sessionbar{padding:10px 12px}.play{width:38px;padding:7px 0}.timeline{flex:1;min-width:120px}.time{font-variant-numeric:tabular-nums;color:var(--muted);min-width:92px;text-align:center}.session-info{min-width:110px;color:var(--muted);font-size:13px;text-align:right}.file{display:none}.toast{position:fixed;left:50%;bottom:82px;translate:-50% 12px;background:#263038;border:1px solid #50606a;border-radius:10px;padding:9px 14px;opacity:0;pointer-events:none;transition:.2s;box-shadow:0 10px 30px #0008}.toast.show{opacity:1;translate:-50% 0}
    .morph-panel{min-height:0;background:color-mix(in srgb,var(--panel) 93%,transparent);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 12px 32px #0005;overflow:hidden}.morph-panel summary{padding:10px 14px;cursor:pointer;font-weight:650;letter-spacing:.03em;list-style:none;display:flex;align-items:center;gap:9px}.morph-panel summary::-webkit-details-marker{display:none}.morph-panel summary:before{content:'▸';color:var(--cyan);transition:.15s}.morph-panel[open] summary:before{transform:rotate(90deg)}.morph-content{min-height:0;display:grid;grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:12px;padding:0 12px 12px}.morph-controls{display:flex;align-items:center;align-content:flex-start;gap:8px;flex-wrap:wrap}.morph-controls select{height:36px;border:1px solid var(--line);border-radius:9px;background:#11161a;color:var(--text);padding:0 9px}.morph-slider{flex:1;min-width:180px}.morph-preview{min-height:0;background:#090c0e;border:1px solid var(--line);border-radius:10px;padding:7px;display:grid;place-items:center;overflow:hidden}.morph-preview canvas{display:block;width:auto;height:auto;max-width:100%;max-height:100%;aspect-ratio:16/10;background:#f6f5f1}.morph-note{width:100%;color:var(--muted);font-size:12px}
    .video-export{width:100%;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:4px;border-top:1px solid var(--line)}.video-export input[type=number]{width:68px;height:36px;border:1px solid var(--line);border-radius:9px;background:#11161a;color:var(--text);padding:0 8px}.export-progress{width:140px;height:7px;accent-color:var(--cyan)}.export-status{color:var(--muted);font-size:12px;min-width:150px}
    @media(min-width:1100px){.workspace:has(.morph-panel[open]){grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1fr)}.workspace:has(.morph-panel[open]) .stage{grid-column:1;grid-row:1}.morph-panel[open]{grid-column:2;grid-row:1;display:grid;grid-template-rows:auto minmax(0,1fr)}}
    @media(max-width:1099px){body{overflow:auto}.app{height:auto;min-height:100%;grid-template-rows:auto auto auto auto}.workspace{grid-template-rows:minmax(420px,65vh) auto}header{flex-wrap:wrap}.presence{margin-left:0;width:100%;flex-wrap:wrap}.toolbar{flex-wrap:wrap;overflow:visible}.group{border:0}.spacer{margin-left:0}.paper{width:100%}.sub{display:none}.sessionbar{flex-wrap:wrap}.timeline{order:2;flex-basis:100%}.morph-preview canvas{width:100%;height:auto;max-height:none}}
  
.open-reflection-btn{
  margin-left:auto;
  border:1px solid rgba(84,212,197,.55);
  background:rgba(84,212,197,.10);
  color:var(--cyan,#54d4c5);
  border-radius:10px;
  padding:9px 13px;
  font-weight:800;
  letter-spacing:.035em;
  cursor:pointer;
  white-space:nowrap;
  transition:.16s ease;
}
.open-reflection-btn:hover{
  background:rgba(84,212,197,.18);
  border-color:var(--cyan,#54d4c5);
  transform:translateY(-1px);
}
@media(max-width:700px){
  .open-reflection-btn{width:100%;margin:8px 0 0}
}


.reflection-modules{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:18px 0 8px;
}
.reflection-module{
  text-align:left;
  border:1px solid rgba(84,212,197,.28);
  background:#171c22;
  color:#eef5f4;
  border-radius:14px;
  padding:16px;
  cursor:pointer;
  transition:.16s ease;
}
.reflection-module:hover{
  border-color:var(--cyan,#54d4c5);
  background:#1c242a;
  transform:translateY(-1px);
}
.reflection-module strong{display:block;color:var(--cyan,#54d4c5);font-size:1.03rem;margin-bottom:5px}
.reflection-module span{display:block;color:#aeb9b8;font-size:.9rem;line-height:1.35}
.reflection-module.active{border-color:var(--cyan,#54d4c5);box-shadow:0 0 0 1px rgba(84,212,197,.18) inset}
@media(max-width:700px){.reflection-modules{grid-template-columns:1fr}}


.reflection-topicbar{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 18px;
  padding:10px 12px;
  border:1px solid rgba(84,212,197,.22);
  background:#14191f;
  border-radius:12px;
}
.reflection-topicbar label{
  color:#91a09f;
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}
.reflection-topic-select{
  flex:1;
  min-width:0;
  appearance:none;
  -webkit-appearance:none;
  border:1px solid rgba(84,212,197,.45);
  border-radius:10px;
  background:
    linear-gradient(45deg,transparent 50%,#54d4c5 50%) calc(100% - 18px) 50%/6px 6px no-repeat,
    linear-gradient(135deg,#54d4c5 50%,transparent 50%) calc(100% - 13px) 50%/6px 6px no-repeat,
    #1a2026;
  color:#eef5f4;
  padding:10px 34px 10px 12px;
  font:inherit;
  font-weight:750;
  cursor:pointer;
  outline:none;
}
.reflection-topic-select:hover,.reflection-topic-select:focus{
  border-color:var(--cyan,#54d4c5);
  box-shadow:0 0 0 2px rgba(84,212,197,.08);
}
.reflection-topic-desc{
  margin:-9px 0 17px;
  color:#8f9b9a;
  font-size:.88rem;
  line-height:1.4;
}
@media(max-width:700px){
  .reflection-topicbar{align-items:stretch;flex-direction:column;gap:7px}
  .reflection-topicbar label{font-size:.75rem}
}


.reflection-privacy{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin:12px 0 2px;
  padding:10px 12px;
  border:1px solid rgba(84,212,197,.18);
  border-radius:10px;
  background:rgba(84,212,197,.055);
  color:#aab8b7;
  font-size:.84rem;
  line-height:1.4;
}
.reflection-privacy .privacy-icon{
  color:var(--cyan,#54d4c5);
  flex:0 0 auto;
}
.reflection-privacy strong{color:#dce8e7;font-weight:700}