:root { --ink:#172033; --muted:#65708a; --brand:#6254e7; --aqua:#38c6bd; --paper:#fff; --line:#e5e8f1; --wash:#f5f6fb; --danger:#d34565; }
.result-controls { margin:18px 0;padding:14px;border:1px solid var(--line);border-radius:10px; }
.results-hidden { padding:50px 20px;border:2px dashed var(--line);border-radius:14px; }
.word-cloud { display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 24px;padding:30px 12px;min-height:180px; }
.cloud-word { font-weight:800;line-height:1.35;overflow-wrap:anywhere;max-width:100%; }
.cloud-word small { font-size:.8rem;margin-left:6px;font-weight:500;opacity:.75; }
.tone-0 { color:#6254e7; }.tone-1 { color:#097f79; }.tone-2 { color:#a33f70; }
.projection .tone-0 { color:#c8c1ff; }.projection .tone-1 { color:#70e4d7; }.projection .tone-2 { color:#ffbbd8; }
.ranking-list { list-style:none;padding:0;display:grid;gap:10px; }
.ranking-list li { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px solid var(--line);border-radius:10px; }
.ranking-list strong { overflow-wrap:anywhere;min-width:0; }.ranking-list .actions { flex-shrink:0; }.ranking-list button { min-height:44px; }
.ranking-results .bar-row { grid-template-columns:minmax(90px,180px) 1fr 78px; }
.answer-preview { border:0;padding:0;min-width:0; }
#response-form label>textarea { width:100%;min-height:110px;margin-top:8px; }
@media(max-width:500px) { .ranking-list li { flex-wrap:wrap; }.word-cloud { gap:10px 16px;padding:20px 0; } }
/* Personal workspace */
.connection { padding:8px 12px; background:#e9f8f6; color:#126d68; border-radius:8px; margin-bottom:16px; font-size:.85rem; }
.account-actions { justify-content:flex-end; margin-bottom:15px; }
.share-panel { display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px; margin-bottom:20px; align-items:center; }
.share-panel>div { flex:1; min-width:200px; overflow-wrap:anywhere; }
.share-panel img { max-width:100%; object-fit:contain; }
.join-code { font-size:1.6rem; letter-spacing:.12em; }
a.button-link { display:inline-block; padding:.68rem 1rem; border-radius:10px; font-weight:700; text-decoration:none; white-space:nowrap; }
[hidden] { display:none !important; }
.group-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px; }
.groups-panel,.teacher-notes,.projection-groups { margin-top:22px; }
.group-card { padding:18px;border:1px solid var(--line);border-radius:12px;background:#fafbff; }
.group-card h3 { margin:0; }.group-card.complete { border-color:#86caba;background:#eefbf6; }
.group-card progress { width:100%;height:12px;accent-color:var(--brand);margin-bottom:16px; }
.detail-grid { grid-template-columns:1fr 1fr; }.member-row { display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:14px 0; }
.member-row label { display:grid;gap:6px; }.member-row select { max-width:180px; }
.teacher-notes label { display:grid;gap:8px; }.teacher-notes textarea { width:100%;padding:12px;border:1px solid var(--line);border-radius:8px;margin-bottom:12px; }
.record-filters { display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:14px; }.record-filters label { display:grid;gap:7px; }
.record-filters input { width:100%;padding:10px;border:1px solid var(--line);border-radius:9px; }.records-grid,.membership-panel { margin:20px 0; }
.note-preview,.response-detail { white-space:pre-wrap;overflow-wrap:anywhere; }.file-picker { display:grid;gap:12px;padding:16px;background:#f4f3ff;border-radius:9px; }
.projection .group-card { background:#ffffff0d;border-color:#ffffff30; }.projection .projection-groups { margin-top:26px; }
@media(max-width:850px) { .detail-grid { grid-template-columns:1fr; }.record-filters { grid-template-columns:1fr 1fr; } }
@media(max-width:500px) { .record-filters { grid-template-columns:1fr; }.member-row { flex-wrap:wrap; } }
h1 { font-size:1.8rem; } h2 { font-size:1.25rem; overflow-wrap:anywhere; }
.toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:20px 0; }
.toolbar>input { flex:1; min-width:200px; }
.toolbar input:not([type=checkbox]),select,textarea { border:1px solid var(--line); border-radius:9px; padding:10px; max-width:100%; font:inherit; }
.project-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:18px; }
.editor-grid { grid-template-columns:minmax(300px,420px) minmax(0,1fr); align-items:start; }
.editor-grid>.grid,.editor-grid>aside { align-content:start; }
.tags { display:flex; flex-wrap:wrap; gap:6px; }
.section-list { padding:20px 0; border-bottom:1px solid var(--line); }
.section-list:last-child { border-bottom:0; }
.section-list .top { flex-wrap:wrap; }
.block-row { margin:14px 0; }
.qrow { gap:8px; } .qrow>span:first-child { min-width:0; overflow-wrap:anywhere; } .qrow .badge { flex-shrink:0; }
.small-actions { margin-top:7px; gap:6px; } .small-actions button { padding:5px 8px; font-size:.8rem; }
.import-card { margin-top:20px; } .import-row { display:flex; gap:12px; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); }
.import-row>span { overflow-wrap:anywhere; min-width:0; } .import-row button { flex-shrink:0; }
dialog { border:1px solid var(--line); border-radius:16px; padding:24px; width:min(550px,calc(100% - 30px)); color:var(--ink); }
dialog::backdrop { background:#17203388; } dialog .actions { margin-top:20px; }
.card>textarea { width:100%; min-height:90px; } #response-form>textarea { width:100%; min-height:140px; }
.notice { margin-bottom:16px; } button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid #988df7; outline-offset:3px; }
button { white-space:nowrap; }
.qrow { white-space:normal; }
.grid>* { min-width:0; }
.form-grid label { min-width:0; }
dialog label { display:grid; gap:8px; }
dialog input { width:100%; padding:10px; border:1px solid var(--line); border-radius:9px; font:inherit; }
@media(max-width:900px) { .editor-grid { grid-template-columns:minmax(0,1fr); } }
@media(max-width:600px) { .top { flex-wrap:wrap; } .top>div { min-width:0; } .bar-row { grid-template-columns:minmax(65px,100px) 1fr 28px; } }
* { box-sizing:border-box; } body { margin:0; background:var(--wash); color:var(--ink); font:16px/1.45 Inter, ui-sans-serif, system-ui, "Microsoft JhengHei", sans-serif; }
button,input,textarea,select { font:inherit; } button { cursor:pointer; border:0; border-radius:10px; padding:.68rem 1rem; font-weight:700; } .primary { background:var(--brand); color:#fff; } .secondary { background:#e9e7ff; color:#4538b7; } .danger { color:var(--danger); background:#ffe9ee; } button:disabled { cursor:not-allowed; opacity:.55; }
.shell { width:min(1180px,calc(100% - 32px)); margin:auto; padding:26px 0 48px; }.top { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; }.top.compact { margin-bottom:0; }.brand { font-size:1.35rem; font-weight:900; letter-spacing:-.04em; }.brand span { color:var(--brand); }.sub { color:var(--muted); font-size:.9rem; }.card { background:var(--paper); border:1px solid var(--line); box-shadow:0 4px 18px #20305b0a; border-radius:16px; padding:22px; }.grid { display:grid; gap:18px; }.host-grid { grid-template-columns:330px 1fr; }.host-guide { margin:-8px 0 18px; padding:12px 14px; background:#e9f8f6; color:#126d68; border-radius:10px; }.question-list { display:grid; gap:9px; margin-top:14px; }.qrow { width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between; background:#fafaff; color:var(--ink); border:1px solid var(--line); }.qrow.selected { border-color:#a69ef6; background:#f5f3ff; }.qrow.active { border-color:var(--brand); background:#e7e4ff; box-shadow:inset 3px 0 0 var(--brand); }.badge { font-size:.75rem; padding:3px 8px; border-radius:999px; background:#e8ebf4; color:#536079; }.badge.live { background:#d9f8f2; color:#087f78; }.muted { color:var(--muted); }.eyebrow { color:var(--brand); font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.section-title { margin:0 0 4px; font-size:1.15rem; }.prompt { margin:8px 0 18px; font-size:1.35rem; line-height:1.3; }.actions { display:flex; flex-wrap:wrap; gap:9px; }.statline { display:flex; gap:14px; margin:14px 0; }.stat { background:#f5f4ff; padding:10px 14px; border-radius:10px; }.stat b { display:block; font-size:1.25rem; }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.form-grid label { display:grid; gap:5px; color:#3d4760; font-size:.9rem; font-weight:700; }.form-grid input,.form-grid select,.form-grid textarea { width:100%; border:1px solid var(--line); border-radius:9px; padding:9px; background:#fff; color:var(--ink); }.form-grid textarea { min-height:104px; resize:vertical; }.full { grid-column:1/-1; }.divider { border:0; border-top:1px solid var(--line); margin:20px 0; }
.choice { display:flex; align-items:center; gap:10px; padding:13px 14px; border:1px solid var(--line); background:#fff; color:var(--ink); text-align:left; width:100%; margin:9px 0; }.choice:has(input:checked) { border-color:var(--brand); background:#f4f2ff; }.choice input { accent-color:var(--brand); }.scale { display:flex; justify-content:space-between; gap:7px; }.scale label { flex:1; text-align:center; padding:10px 3px; border:1px solid var(--line); border-radius:9px; }.scale label:has(input:checked) { background:#f1efff; border-color:var(--brand); }.scale input { display:none; }.submit { width:100%; margin-top:15px; }.notice { padding:10px 13px; background:#eafaf7; color:#13776f; border-radius:9px; margin-top:12px; }.error { background:#fff0f2; color:#b53552; }.bar-row { display:grid; grid-template-columns:minmax(90px,180px) 1fr 48px; gap:10px; align-items:center; margin:12px 0; }.bar-track { height:22px; overflow:hidden; border-radius:5px; background:#eef0f7; }.bar { height:100%; min-width:0; border-radius:5px; background:linear-gradient(90deg,var(--brand),#988df7); transition:width .3s; }.pie-wrap { display:grid; grid-template-columns:170px 1fr; gap:20px; align-items:center; }.pie { width:165px; aspect-ratio:1; border-radius:50%; background:conic-gradient(#e5e8f1 0 100%); }.legend { display:grid; gap:8px; }.dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:7px; }.texts { display:grid; gap:8px; }.text-response { padding:10px 12px; background:#f7f8fc; border-radius:9px; }.count { font-size:.88rem; color:var(--muted); }.empty { color:var(--muted); text-align:center; padding:30px; }
.projection { min-height:100vh; background:radial-gradient(circle at top right,#302875,#10152b 60%); color:#fff; padding:4.8vw 6vw; }.projection .top { margin-bottom:4vh; }.projection .brand { color:#fff; }.projection .card { background:#ffffff10; border-color:#ffffff24; box-shadow:none; }.projection .muted,.projection .sub { color:#c3c8dd; }.projection .prompt { font-size:clamp(1.8rem,4vw,4rem); max-width:1000px; }.projection .bar-track { background:#ffffff22; }.projection .stat { background:#ffffff16; }.projection .bar-row { grid-template-columns:minmax(100px,220px) 1fr 56px; font-size:clamp(1rem,1.8vw,1.35rem); }.projection .bar-track { height:28px; }.projection .text-response { background:#ffffff15; font-size:clamp(1rem,1.8vw,1.4rem); }.projection .pie-wrap { grid-template-columns:220px 1fr; }.projection .pie { width:210px; }.projection .legend { font-size:1.2rem; }
@media (max-width:760px) { .shell { width:min(100% - 22px,600px); padding-top:14px; }.host-grid { grid-template-columns:1fr; }.top { align-items:flex-start; }.form-grid { grid-template-columns:1fr; }.full { grid-column:auto; }.pie-wrap { grid-template-columns:1fr; }.projection { padding:28px 22px; }.projection .pie-wrap { grid-template-columns:1fr; }.projection .prompt { font-size:2rem; } }