:root{--text:#33403a;--bg:#f5f7f3;--border:#d7e1d3;--accent:#5b8a82;--error:#b97562;--card-bg:#e7efe6;--correct:#5f8f56;--correct-bg:#5f8f5624;--incorrect:#b97562;--incorrect-bg:#b9756221;--overlay-bg:#f5f7f3eb;--font-body:system-ui, "Segoe UI", Roboto, sans-serif;--font-heading:"Zen Maru Gothic", "Yu Gothic UI", "Meiryo", sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--text:#e3ebe4;--bg:#1a1f1c;--border:#333f38;--accent:#7fb0a7;--error:#cf8c78;--card-bg:#212a24;--correct:#86bf78;--correct-bg:#86bf782e;--incorrect:#cf8c78;--incorrect-bg:#cf8c7829;--overlay-bg:#1a1f1ceb}}body{font:16px/1.6 var(--font-body);color:var(--text);background:var(--bg);margin:0}h1,button{font-family:var(--font-heading)}#root{max-width:640px;margin:0 auto;padding:24px 16px}h1{font-size:24px}button{font-family:var(--font-heading);border:1px solid var(--border);background:var(--card-bg);min-height:44px;color:var(--text);cursor:pointer;border-radius:10px;padding:10px 18px;font-size:16px}.login-page form{flex-direction:column;gap:12px;max-width:320px;display:flex}.login-page label{flex-direction:column;gap:4px;font-size:14px;display:flex}.login-page input,.login-page button{border:1px solid var(--border);border-radius:10px;padding:8px 10px;font-size:16px}.login-page input{font-family:var(--font-body);width:100%}.login-page button{background:var(--accent);color:#fff;cursor:pointer;border:none}.session-expired-notice{color:var(--accent);background:var(--card-bg);border-radius:10px;padding:10px 12px;font-size:14px}.password-field{display:flex;position:relative}.password-field input{padding-right:40px}.login-page button.password-toggle{width:32px;height:32px;color:var(--text);opacity:.6;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;padding:0;display:flex;position:absolute;top:50%;right:4px;transform:translateY(-50%)}.login-page button.password-toggle:hover{opacity:1;background:var(--card-bg)}.problem-page header,.history-page header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;display:flex}.header-actions{align-items:center;gap:12px;display:flex}.header-actions a,.header-actions button{min-height:auto;color:var(--text);white-space:nowrap;background:0 0;border-radius:20px;padding:6px 14px;font-size:14px;text-decoration:none}.problem-card{background:var(--card-bg);border-radius:16px;padding:16px}.problem-meta{opacity:.7;margin-bottom:8px;font-size:13px}.problem-question{white-space:pre-wrap}.option-list{flex-direction:column;gap:8px;padding:0;list-style:none;display:flex}.option{text-align:left;border:1px solid var(--border);background:var(--bg);width:100%;color:var(--text);font-size:15px;font-family:var(--font-body);cursor:pointer;border-radius:12px;padding:10px 12px}.option:disabled{cursor:default;opacity:.85}.option-selected{border-color:var(--accent)}.option-correct{border-color:var(--correct);background:var(--correct-bg);color:var(--correct)}.option-incorrect{border-color:var(--incorrect);background:var(--incorrect-bg);color:var(--incorrect)}.explanation-panel{margin-top:16px}.explanation-panel button{background:var(--accent);color:#fff;border:none;width:100%;margin-top:16px;padding:14px 20px;font-size:17px;font-weight:600;display:block}.result-correct{color:var(--correct);font-weight:600}.result-incorrect{color:var(--incorrect);font-weight:600}.explanation-text{white-space:pre-wrap}.similar-heading{margin-bottom:8px;font-weight:600}.history-list{flex-direction:column;gap:8px;padding:0;list-style:none;display:flex}.history-item{background:var(--card-bg);border-radius:16px;padding:12px 16px}.history-row{align-items:center;gap:12px;display:flex}.history-similar-row{border-top:1px solid var(--border);margin-top:6px;padding-top:6px}.history-date,.history-elapsed{opacity:.7;font-size:13px}.error{color:var(--error)}.celebration{pointer-events:none;z-index:50;position:fixed;inset:0;overflow:hidden}.confetti-piece{opacity:.9;width:8px;height:14px;animation-name:confetti-fall;animation-timing-function:ease-in;animation-fill-mode:forwards;position:absolute;top:-14px}@keyframes confetti-fall{0%{opacity:1;transform:translateY(-10px)translate(0)rotate(0)}to{transform:translateY(110vh) translateX(var(--drift,0px)) rotate(540deg);opacity:0}}.celebration-floater{font-size:32px;animation-name:celebration-float-up;animation-timing-function:ease-out;animation-fill-mode:forwards;position:absolute;bottom:-48px}@keyframes celebration-float-up{0%{opacity:1;transform:translateY(0)translate(0)scale(.8)}to{transform:translateY(-110vh) translateX(var(--drift,0px)) scale(1.2);opacity:0}}.celebration-message{text-align:center;pointer-events:none;z-index:60;background:var(--overlay-bg);border-radius:20px;padding:16px 28px;animation:1.5s ease-out forwards celebration-pop-fade;position:fixed;top:30%;left:50%;transform:translate(-50%,-50%);box-shadow:0 4px 20px #0000002e}.celebration-emoji{font-size:64px;display:block}.celebration-message p{color:var(--accent);white-space:nowrap;margin-top:8px;font-size:24px;font-weight:700}@keyframes celebration-pop-fade{0%{opacity:0;transform:translate(-50%,-50%)scale(0)}20%{opacity:1;transform:translate(-50%,-50%)scale(1.15)}30%{opacity:1;transform:translate(-50%,-50%)scale(1)}75%{opacity:1;transform:translate(-50%,-50%)scale(1)}to{opacity:0;transform:translate(-50%,-50%)scale(1)}}@media (width<=480px){#root{padding:16px 12px}h1{font-size:20px}.problem-page header,.history-page header{flex-direction:column;align-items:flex-start}.header-actions{justify-content:flex-end;width:100%}}.attribute-grid-card *{box-sizing:border-box}.attribute-grid-card{margin-top:12px}.grid-card-title{margin:0 0 10px;font-weight:600}.tray-list{flex-direction:column;gap:8px;margin-bottom:14px;display:flex}.tray-row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.tray-label{opacity:.7;flex:0 0 44px;width:44px;font-size:12px;font-weight:700}.tray-chips{flex-wrap:wrap;flex:1;gap:6px;min-height:34px;display:flex}.chip{touch-action:none;-webkit-user-select:none;user-select:none;font-family:var(--font-body);border:1px solid var(--border);background:var(--bg);min-height:0;color:var(--text);cursor:grab;border-radius:999px;padding:6px 12px;font-size:14px;line-height:1.2}.chip:active{cursor:grabbing}.chip.ghost{z-index:100;pointer-events:none;border-color:var(--accent);opacity:.95;position:fixed;top:0;left:0;box-shadow:0 6px 16px #0000002e}.chip.placed{text-align:center;border-color:var(--accent);width:100%;color:var(--accent);background:var(--bg);border-radius:10px;font-weight:700;display:block}.chip.placed.locked{background:var(--accent);color:#fff}.chip.chip-correct{border-color:var(--correct);background:var(--correct-bg);color:var(--correct)}.chip.chip-incorrect{border-color:var(--incorrect);background:var(--incorrect-bg);color:var(--incorrect)}.lock-icon{vertical-align:1px;margin-right:3px;font-size:11px;display:inline-block}.grid-scroll{margin-bottom:14px;overflow-x:auto}table.assign-grid{border-collapse:collapse;table-layout:fixed;width:100%}.assign-grid th,.assign-grid td{border:1px solid var(--border);padding:0}.assign-grid .corner-cell{background:var(--card-bg);width:22%}.assign-grid .group-head{background:var(--bg);text-align:center;padding:8px 4px;font-size:13px;font-weight:700}.assign-grid .person-head{text-align:left;background:var(--bg);white-space:nowrap;padding:8px;font-size:13px;font-weight:700}.cell-drop{text-align:center;vertical-align:middle;height:52px;transition:background-color .12s}.cell-drop.drop-hover{background:#5b8a821f}.cell-drop.drop-blocked{background:var(--incorrect-bg)}.cell-drop .chip.placed{border:none;border-radius:0;justify-content:center;align-items:center;height:100%;display:flex}.conditions-card{background:var(--card-bg);border-radius:16px;margin-bottom:14px;padding:16px}.conditions-title{margin:0 0 8px;font-weight:600}.conditions-list{flex-direction:column;gap:6px;margin:0;padding-left:1.3em;font-size:14px;display:flex}.action-row{gap:10px;margin-bottom:10px;display:flex}.action-row button{cursor:pointer;border-radius:12px;flex:1;min-height:44px;padding:11px 12px;font-size:15px}.action-row .btn-secondary{background:var(--bg);color:var(--text);border:1px solid var(--border)}.action-row .btn-primary{background:var(--accent);color:#fff;border:none}.action-row .btn-primary:disabled{opacity:.5;cursor:default}.btn-help{min-height:0;color:var(--accent);cursor:pointer;opacity:.85;background:0 0;border:none;align-items:center;gap:6px;padding:6px 4px;font-size:13px;display:inline-flex}.btn-help:hover{opacity:1}.help-icon{border:1px solid var(--accent);border-radius:50%;justify-content:center;align-items:center;width:16px;height:16px;font-size:11px;line-height:1;display:inline-flex}.help-panel{border:1px dashed var(--border);opacity:.85;border-radius:12px;margin-top:8px;padding:10px 12px;font-size:13px}.help-panel p{margin:0}
