:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#233b46;background:#f2f5f5;font-synthesis:none;line-height:1.5;--cyan:#087b88;--cyan-light:#e4f5f5;--amber:#855818;--line:#cfdbdf;--muted:#526975;--radius:20px}
*{box-sizing:border-box}
body{margin:0;min-width:280px;background:radial-gradient(ellipse at 10% 0%,#e4f0f1,transparent 55%),#f2f5f5}
button,input,select{font:inherit;min-width:0}
button{cursor:pointer;border:1px solid #bdcdd3;border-radius:10px;background:#fff;color:#29444f;padding:.64rem .86rem;line-height:1.3;min-height:44px;transition:background .16s,border-color .16s;overflow-wrap:anywhere}
button:hover:not(:disabled){background:#edf7f7;border-color:#55a5ad}
button:disabled{cursor:default;opacity:.5}
button:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid #007d93;outline-offset:3px}
input[type=text],select{width:100%;padding:.7rem .75rem;border:1px solid #b9ccd3;border-radius:10px;background:#fff;color:#203d49;min-height:44px}
input[type=checkbox],input[type=radio]{accent-color:#087b88;min-width:18px;width:18px;height:18px;margin:0;flex-shrink:0}
h1,h2,h3,p{margin:0}
h1{font-size:clamp(1.9rem,3vw,3rem);font-weight:750;letter-spacing:-.045em;line-height:1.1;margin:.3rem 0 .65rem;color:#1c3642}
h2{font-size:1.12rem;letter-spacing:-.02em;font-weight:700}
h3{font-size:1.15rem}
label{display:block;font-weight:600;font-size:.87rem}
small,.help{font-size:.79rem;line-height:1.55;color:var(--muted)}
.help{margin:.5rem 0 .8rem;overflow-wrap:anywhere}
[hidden]{display:none!important}
.app{max-width:1540px;margin:auto;padding:clamp(14px,2.8vw,40px)}
.header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:26px;flex-wrap:wrap}
.heading{flex:1 1 430px;min-width:0}
.eyebrow{font-size:.69rem;font-weight:750;letter-spacing:.14em;color:#337582}
.intro{max-width:640px;color:var(--muted);font-size:.94rem}
.preferences{display:flex;align-items:flex-start;gap:14px;flex:0 1 350px;min-width:0}
.language{flex:1 1 140px;min-width:0}
.language span{display:block;margin-bottom:5px}
.music{flex:1 1 180px;min-width:0;padding-top:26px}
.music button{width:100%;font-size:.83rem;font-weight:700;background:#f9fcfc}
.music button[aria-pressed=true]{background:#def2ef;border-color:#43988c;color:#19534c}
.music small{display:block;margin-top:6px;font-size:.68rem}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,350px);gap:20px;align-items:start}
.scene-card,.panel,.bottom-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);min-width:0;box-shadow:0 8px 26px #304b5710}
.scene-card{overflow:hidden;padding:18px}
.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.floor-label,.summary{font-size:.75rem;color:var(--muted)}
.stage{position:relative;isolation:isolate;height:clamp(460px,46vw,650px);width:100%;border:1px solid #cad8dd;border-radius:14px;background:#e8eef0;overflow:hidden}
#scene{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
#scene:active{cursor:grabbing}
#connectors,#badges{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#connectors{z-index:1;overflow:hidden}
#connectors line{stroke:#718f99;stroke-width:1;stroke-opacity:.7}
#badges{z-index:2}
.robot-badge{position:absolute;pointer-events:auto;width:136px;min-height:44px;padding:6px 9px;background:#fcfdf3ed;border-color:#b39055;box-shadow:0 3px 10px #243d4920;border-radius:9px;text-align:left;font-size:.73rem;line-height:1.3}
.robot-badge strong{font-size:.73rem;display:block;color:#6a501f}
.badge-task{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;margin-top:2px;color:#544a38}
.robot-badge.is-assigned{background:#f3fffff2;border-color:#5ca4ac}
.robot-badge.is-assigned strong,.robot-badge.is-assigned .badge-task{color:#18555e}
.robot-badge.is-selected{outline:2px solid #087b88;outline-offset:2px}
.mode-selector{border:0;padding:0;margin:10px 0;display:flex;flex-wrap:wrap;gap:8px 18px;min-width:0}
.mode-selector legend{font-size:.74rem;color:var(--muted);padding:0;margin-bottom:6px}
.mode-selector label{display:flex;align-items:center;gap:7px;min-height:38px}
.camera-controls{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 16px}
.camera-controls button{font-size:.73rem;padding:.48rem .64rem;flex:1 0 auto}
.scene-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid #e2e9ec;padding-top:13px}
.legend{display:flex;align-items:center;gap:7px;font-size:.72rem;color:var(--muted);flex-wrap:wrap}
.legend span:nth-child(3){margin-left:10px}
.cyan-dot,.amber-dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:#14a5b6}
.amber-dot{background:#b38438}
.quality{display:flex;align-items:center;gap:8px;font-size:.74rem;color:var(--muted);min-height:30px}
.controls{display:grid;gap:18px;min-width:0}
.panel{padding:20px}
.step{font-size:.66rem;letter-spacing:.12em;font-weight:750;color:#648690;margin-bottom:6px}
.controls h2{margin-bottom:16px}
#task-form label{margin-bottom:6px}
.input-row{display:flex;gap:7px}
.input-row input{flex:1;width:0}
.input-row button{flex-shrink:0;font-size:.85rem}
#task-picker{margin-top:6px}
.primary{display:block;width:100%;background:#136876;color:#fff;border-color:#136876;font-weight:700;padding:.85rem}
.primary:hover:not(:disabled){background:#0c5360;color:#fff;border-color:#0c5360}
.robot-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.robot-button{display:grid;text-align:left;gap:3px;padding:10px;min-width:0;border-left:3px solid #b88a42;background:#fdfbf6}
.robot-button strong{font-size:.86rem}
.robot-button.is-assigned{border-left-color:#159bab;background:#f5fbfc}
.robot-button.is-selected{outline:2px solid #087b88;outline-offset:1px}
.robot-task{font-size:.72rem;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;color:#3d5661}
.coordinates{font-size:.64rem;color:#647782}
.movement{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;border:0;border-top:1px solid #e1e9ec;margin:14px 0 0;padding:12px 0 0;min-width:0}
.movement legend{font-size:.74rem;color:var(--muted);padding:0 5px 0 0}
.movement button{font-size:.72rem;padding:.5rem .3rem;min-width:0}
.move-forward{grid-column:2;grid-row:1}.move-left{grid-column:1;grid-row:2}.move-right{grid-column:3;grid-row:2}.move-back{grid-column:2;grid-row:3}
.correspondence{margin-top:20px}
.empty{border:1px dashed #bfcfd5;background:#f6fafb;border-radius:12px;color:#56717c;padding:22px;text-align:center;font-size:.87rem}
.task-list{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:0;margin:0}
.task-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:12px;border:1px solid #d8e2e6;border-radius:12px;min-width:0;background:#fcfdfd}
.task-row.is-selected{border-color:#70aab3;background:#f4fafb}
.task-name{min-height:32px;grid-column:1;text-align:left;background:transparent;border:0;padding:0;font-size:.88rem;font-weight:650;overflow-wrap:anywhere;white-space:pre-wrap}
.task-owner{grid-column:1;font-size:.74rem;color:#85601f;align-self:center}
.task-owner.has-owner{color:#08717d}
.task-actions{grid-column:2;grid-row:1 / span 2;display:flex;flex-direction:column;gap:4px;justify-content:center;align-items:stretch;max-width:140px}
.small-button{font-size:.71rem;padding:5px 8px;min-height:36px}
.danger{color:#8b4c42}
.bottom-panel{padding:20px;margin-top:18px}
.status-box{display:flex;gap:10px;align-items:baseline;min-width:0}
.status-mark{width:8px;height:8px;border-radius:50%;background:#278794;flex-shrink:0}
#state{font-size:.89rem;font-weight:600;overflow-wrap:anywhere;white-space:pre-wrap}
.error{color:#963d30;background:#fff2ed;border:1px solid #e5bfb5;border-radius:9px;padding:10px;margin-top:10px;font-size:.85rem;overflow-wrap:anywhere}
.storage-controls{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 12px}
.storage-controls button{font-size:.81rem}
#reset{margin-left:auto;background:#f5f7f8}
.bottom-panel .help{max-width:1000px;margin-bottom:0}
footer{font-size:.72rem;color:#647c86;text-align:center;padding:22px 10px 4px}
#fallback{position:absolute;inset:0;z-index:3;background:#eef4f5;padding:clamp(16px,3vw,30px);overflow:auto}
#fallback h3{color:#355764;margin-bottom:8px}
#fallback p{font-size:.85rem;color:#456572;max-width:620px}
#fallback .map-caption{font-size:.72rem;margin:17px 0 7px}
#fallback-map{height:240px;max-width:440px;position:relative;border:1px solid #b5cbd3;border-radius:10px;background-color:#dce8eb;background-image:linear-gradient(#bdcfd54d 1px,transparent 1px),linear-gradient(90deg,#bdcfd54d 1px,transparent 1px);background-size:12.5% 16.6667%}
.map-robot{position:absolute;transform:translate(-50%,-50%);width:42px;height:42px;min-height:42px;padding:0;border-radius:50%;font-size:.75rem;border:2px solid #b48536;background:#fff9eb;z-index:1}
.map-robot.is-assigned{border-color:#0f98a5;background:#e5fbff}
.map-robot.is-selected{outline:3px solid #2a5a6b;outline-offset:3px;z-index:2}
.webgl-failed #scene,.webgl-failed #badges,.webgl-failed #connectors{visibility:hidden}
noscript{display:block;padding:20px;text-align:center;color:#843e30}
@media(min-width:1250px){.controls .panel{padding:22px}.stage{height:650px}}
@media(max-width:950px){.workspace{grid-template-columns:minmax(0,1fr)}.controls{grid-template-columns:repeat(2,minmax(0,1fr))}.stage{height:530px}.preferences{flex-basis:340px}.heading{flex-basis:390px}}
@media(max-width:620px){.app{padding:14px}.header{gap:16px;margin-bottom:18px}.heading{flex-basis:100%}.preferences{flex-basis:100%;gap:12px}.music{padding-top:26px}.scene-card{padding:12px;border-radius:16px}.panel,.bottom-panel{padding:16px;border-radius:16px}.controls{grid-template-columns:minmax(0,1fr)}.stage{height:450px}.robot-badge{width:116px;font-size:.68rem;padding:5px 7px}.robot-badge strong{font-size:.7rem}.camera-controls button{flex:1 1 28%;font-size:.7rem}.task-list{grid-template-columns:minmax(0,1fr)}.scene-footer{gap:9px}.storage-controls button{flex:1 1 44%}#reset{margin-left:0}.task-actions{max-width:100px}.floor-label{font-size:.67rem}.section-heading{gap:6px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}