body{margin:0}:root{--navy:#1e293b;--navy-dark:#0f172a;--navy-light:#334155;--gold:#c9962c;--gold-light:#e6b94d;--cream:#f7ecda;--cream-light:#fbf6ec;--card-bg:#fff;--border:#e2e8f0;--text:#1e293b;--text-muted:#64748b;--danger:#dc2626;--danger-bg:#fef2f2;--shadow-sm:0 1px 3px #0f172a14;--shadow-md:0 14px 32px -8px #0f172a29, 0 8px 12px -6px #0f172a14;--radius:14px;--font-heading:"Poppins","Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-body:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--font-serif:"Playfair Display",Georgia,"Times New Roman",serif;--ease:cubic-bezier(.25,.8,.25,1);--dir-north:#4a7fb5;--dir-east:#6b9b6e;--dir-south:#c97064;--dir-west:#d4b24c}*{box-sizing:border-box}body{font-family:var(--font-body);color:var(--text);background:radial-gradient(480px 420px at 2% 8%, #c9962c29, transparent 65%), radial-gradient(520px 460px at 98% 22%, #c9962c24, transparent 65%), radial-gradient(480px 420px at 0% 92%, #c9962c24, transparent 65%), radial-gradient(520px 460px at 100% 100%, #c9962c29, transparent 65%), linear-gradient(180deg,var(--cream) 0%,var(--cream-light) 60%);min-height:100vh;margin:0}.key-screen{justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.key-box{border:1px solid var(--border);border-radius:var(--radius);width:100%;max-width:380px;box-shadow:var(--shadow-md);background:var(--card-bg);text-align:center;padding:40px 32px}.key-icon{color:var(--navy);justify-content:center;align-items:center;margin-bottom:8px;display:flex}.key-box h2{font-family:var(--font-heading);color:var(--navy-dark);margin:0 0 6px;font-size:22px;font-weight:700}.key-subtitle{color:var(--text-muted);margin:0 0 24px;font-size:14px}.key-box input{border:1px solid var(--border);border-radius:10px;outline:none;width:100%;margin-bottom:16px;padding:12px 14px;font-size:15px;transition:border-color .15s,box-shadow .15s}.key-box input:focus{border-color:var(--navy);box-shadow:0 0 0 3px #1e293b1a}.key-box .btn{justify-content:center;width:100%}.error{color:var(--danger);background:var(--danger-bg);border-radius:8px;margin-top:14px;padding:8px 12px;font-size:14px}.site-header{background:linear-gradient(135deg,var(--navy-dark),var(--navy));box-shadow:0 6px 20px -6px #0f172a73}.site-header-inner{justify-content:space-between;align-items:center;gap:14px;max-width:1180px;margin:0 auto;padding:14px 20px;display:flex}.logo-badge{background:#fff;border-radius:10px;align-items:center;padding:6px 14px;display:flex;box-shadow:0 2px 6px #0000002e}.site-header-actions{align-items:center;gap:10px;display:flex}.app-shell{text-align:center;max-width:1180px;margin:0 auto;padding:32px 16px 24px}.page-title{margin-bottom:28px;position:relative}.page-title h1{font-family:var(--font-serif);color:var(--navy-dark);letter-spacing:.2px;margin:0;font-size:34px;font-weight:700}.title-divider{justify-content:center;align-items:center;gap:8px;margin-top:14px;display:flex}.divider-line{width:50px;height:1px}.divider-line-left{background:linear-gradient(90deg,transparent,var(--gold))}.divider-line-right{background:linear-gradient(90deg,var(--gold),transparent)}.divider-diamond{background:var(--gold);flex-shrink:0;width:6px;height:6px;transform:rotate(45deg)}.divider-icon{color:var(--gold);flex-shrink:0}.toolbar{background:linear-gradient(165deg,#fdf3df,#fffbf4 55%);border:1.5px solid #c9962c73;border-radius:16px;flex-direction:column;align-items:center;gap:14px;margin-bottom:24px;padding:18px;display:flex;position:relative;box-shadow:inset 0 1px #ffffffe6,inset 0 -1px #b48c3c26,0 12px 28px -10px #b48c3c4d,0 4px 10px -4px #0f172a14}.toolbar-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;width:100%;display:flex}.toolbar-row+.toolbar-row{border-top:1px solid var(--border);padding-top:14px}.field{border:1px solid var(--border);height:42px;font-family:var(--font-heading);color:var(--text-muted);white-space:nowrap;background:#faf7f0;border-radius:10px;align-items:center;gap:8px;padding:0 12px;font-size:13px;font-weight:600;transition:border-color .15s,box-shadow .15s,background .15s;display:flex}.field:focus-within{border-color:var(--navy);background:#fff;box-shadow:0 0 0 3px #1e293b1a}.field select,.field input[type=number]{color:var(--text);background:0 0;border:none;outline:none;width:56px;padding:0;font-size:14px;font-weight:700}.field input[type=number]{-moz-appearance:textfield;text-align:right;width:26px}.field input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.field input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.stepper{flex-direction:column;gap:1px;margin-left:-2px;display:flex}.stepper-btn{width:18px;height:12px;color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:3px;justify-content:center;align-items:center;padding:0;transition:background .15s,color .15s;display:flex}.stepper-btn:hover{background:var(--border);color:var(--navy)}.field select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:100%;background-repeat:no-repeat;width:auto;padding-right:18px}.degree-control{align-items:center;gap:6px;display:flex}.degree-value{align-items:center;gap:2px;display:flex}.field-suffix{color:var(--text-muted);font-weight:600}.file-upload{align-items:center;gap:10px;display:flex}.file-upload-btn{height:42px;font-family:var(--font-heading);color:var(--navy);border:1.5px solid var(--navy);cursor:pointer;transition:background .15s var(--ease),color .15s var(--ease),transform .15s var(--ease);background:#fff;border-radius:9px;align-items:center;gap:8px;padding:0 16px;font-size:13px;font-weight:600;display:inline-flex;position:relative}.file-upload-btn:hover{background:var(--navy);color:#fff;transform:translateY(-2px)}.file-upload-btn input[type=file]{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.file-name{color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap;max-width:200px;font-size:13px;overflow:hidden}.action-buttons{gap:10px}.btn{height:42px;font-family:var(--font-heading);letter-spacing:.1px;cursor:pointer;transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .15s,border-color .15s;white-space:nowrap;border:1px solid #0000;border-radius:11px;justify-content:center;align-items:center;gap:8px;padding:0 18px;font-size:13px;font-weight:600;display:inline-flex}.btn-primary svg{color:var(--gold-light)}.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(0)}.btn:disabled{opacity:1;color:#94a3b8;cursor:not-allowed;box-shadow:none;background:#e2e8f0;border-color:#0000;transform:none}.btn:disabled svg{color:inherit}.btn:disabled:hover{box-shadow:none;transform:none}.btn-primary{background:linear-gradient(180deg,var(--navy-light),var(--navy-dark));color:#fff;border-color:#e6b94d80;box-shadow:0 4px 10px -2px #0f172a59}.btn-primary:hover{box-shadow:0 10px 20px -4px #0f172a73}.btn-outline{background:var(--card-bg);color:var(--navy);border-color:#c9962c4d}.btn-outline:hover{border-color:var(--gold);background:#fdf8ee;box-shadow:0 8px 16px -6px #0f172a2e}.btn-accent{background:linear-gradient(180deg,var(--gold-light),var(--gold));color:var(--navy-dark);box-shadow:0 4px 10px -2px #c9962c73}.btn-accent:hover{box-shadow:0 10px 20px -4px #c9962c8c}.canvas-wrapper{justify-content:center;padding:4px;display:flex;overflow-x:auto}canvas{border:1px solid var(--border);cursor:grab;box-shadow:var(--shadow-md);touch-action:none;background:#fff;border-radius:12px}canvas:active{cursor:grabbing}.site-footer{background:linear-gradient(135deg,var(--navy-dark),var(--navy));flex-direction:column;align-items:center;gap:12px;margin-top:32px;padding:24px 20px;display:flex}.site-footer p{color:#ffffffbf;text-align:center;margin:0;font-size:13px}.zone-panel{text-align:left;background:linear-gradient(165deg,#fdf3df,#fffbf4 55%);border:1.5px solid #c9962c73;border-radius:16px;margin-top:24px;padding:22px;box-shadow:inset 0 1px #ffffffe6,inset 0 -1px #b48c3c26,0 12px 28px -10px #b48c3c4d,0 4px 10px -4px #0f172a14}.zone-panel-loading{text-align:center;color:var(--text-muted);margin:0;padding:20px;font-size:14px}.zone-panel-header{margin-bottom:18px}.zone-panel-header h2{font-family:var(--font-heading);color:var(--navy-dark);align-items:center;gap:8px;margin:0 0 4px;font-size:19px;font-weight:700;display:flex}.zone-panel-header h2 svg{color:var(--gold)}.zone-panel-header p{color:var(--text-muted);margin:0;font-size:13px}.quadrant-grid{grid-template-columns:1fr 1fr;gap:16px;display:grid}.quadrant-card{border:1.5px solid var(--quad-color);background:#fffdf8;border-radius:16px;padding:14px}.quad-north{--quad-color:var(--dir-north);--quad-color-2:var(--dir-east)}.quad-east{--quad-color:var(--dir-east);--quad-color-2:var(--dir-south)}.quad-south{--quad-color:var(--dir-south);--quad-color-2:var(--dir-west)}.quad-west{--quad-color:var(--dir-west);--quad-color-2:var(--dir-north)}.quadrant-header{background:linear-gradient(135deg,var(--quad-color),var(--quad-color-2));color:#fff;border-radius:10px;justify-content:space-between;align-items:center;margin-bottom:12px;padding:10px 14px;display:flex}.quadrant-name{font-family:var(--font-heading);letter-spacing:.2px;font-size:14px;font-weight:700}.quadrant-count-badge{color:#fff;background:#ffffff47;border-radius:999px;padding:3px 10px;font-size:11px;font-weight:700}.quadrant-zones{flex-direction:column;gap:8px;display:flex}.zone-card{background:#fff;border:1px solid #00000014;border-radius:12px;transition:box-shadow .15s}.zone-card.open{box-shadow:0 4px 14px -6px #0f172a26}.zone-card-header{cursor:pointer;width:100%;font-family:var(--font-heading);text-align:left;background:0 0;border:none;border-radius:12px;justify-content:space-between;align-items:center;padding:13px 16px;transition:background .15s;display:flex}.zone-card.open .zone-card-header{border-radius:12px 12px 0 0}.zone-card-header:hover{background:#fdf8ee}.zone-card-title{color:var(--navy-dark);align-items:center;gap:10px;font-size:14px;font-weight:700;display:flex}.zone-name-word{font-weight:800}.zone-name-sep{color:var(--text-muted);margin:0 1px;font-weight:600}.zone-code-badge{background:var(--navy);color:#fff;letter-spacing:.3px;border-radius:6px;justify-content:center;align-items:center;min-width:34px;height:24px;padding:0 6px;font-size:11px;font-weight:700;display:inline-flex}.zone-card-meta{align-items:center;gap:10px;display:flex}.zone-count-badge{color:var(--navy-dark);background:#c9962c2e;border:1px solid #c9962c59;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600}.zone-chevron{color:var(--text-muted);transition:transform .2s var(--ease)}.zone-card.open .zone-chevron{transform:rotate(180deg)}.zone-card-body{animation:zoneBodyIn .18s var(--ease);border-top:1px solid #c9962c33;flex-direction:column;gap:12px;padding:14px 16px 16px;display:flex}@keyframes zoneBodyIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.subzone-row{align-items:center;gap:14px;display:flex}.subzone-label{width:44px;font-family:var(--font-heading);color:#fff;text-align:center;border-radius:7px;flex-shrink:0;padding:6px 0;font-size:13px;font-weight:700}.zone-panel-footer{border-top:1px solid #c9962c40;justify-content:flex-end;align-items:center;gap:14px;margin-top:20px;padding-top:18px;display:flex}.save-success{color:#15803d;align-items:center;gap:6px;font-size:13px;font-weight:600;display:flex}.multi-select{flex:1;min-width:0;position:relative}.multi-select-control{border:1px solid var(--border);cursor:pointer;width:100%;min-height:40px;font-family:var(--font-body);background:#fff;border-radius:9px;justify-content:space-between;align-items:center;gap:8px;padding:6px 10px;transition:border-color .15s,box-shadow .15s;display:flex}.multi-select-control:hover,.multi-select-control.open{border-color:var(--gold);box-shadow:0 0 0 3px #c9962c1f}.multi-select-chips{flex-wrap:wrap;flex:1;gap:5px;min-width:0;display:flex}.multi-select-placeholder{color:var(--text-muted);padding:2px 0;font-size:13px}.ms-chip{color:var(--navy-dark);white-space:nowrap;background:linear-gradient(135deg,#e6b94d47,#c9962c33);border:1px solid #c9962c66;border-radius:999px;align-items:center;gap:5px;padding:3px 6px 3px 10px;font-size:12px;font-weight:700;display:inline-flex}.ms-chip-remove{width:15px;height:15px;color:var(--navy-dark);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;transition:background .15s;display:inline-flex}.ms-chip-remove:hover{background:#c9962c66}.multi-select-caret{color:var(--text-muted);flex-shrink:0;transition:transform .15s}.multi-select-control.open .multi-select-caret{transform:rotate(180deg)}.multi-select-dropdown{z-index:20;animation:msDropdownIn .15s var(--ease);background:#fff;border:1px solid #c9962c59;border-radius:12px;position:absolute;top:calc(100% + 6px);left:0;right:0;overflow:hidden;box-shadow:0 14px 32px -8px #0f172a33}@keyframes msDropdownIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.multi-select-search{border-bottom:1px solid var(--border);color:var(--text-muted);align-items:center;gap:8px;padding:10px 12px;display:flex}.multi-select-search input{font-size:13px;font-family:var(--font-body);color:var(--text);border:none;outline:none;flex:1}.multi-select-options{max-height:220px;padding:6px;overflow-y:auto}.multi-select-empty{text-align:center;color:var(--text-muted);padding:14px;font-size:13px}.multi-select-option{cursor:pointer;color:var(--text);border-radius:8px;align-items:center;gap:10px;padding:8px 10px;font-size:13px;transition:background .1s;display:flex}.multi-select-option:hover{background:#fdf8ee}.multi-select-option input{opacity:0;width:0;height:0;position:absolute}.ms-checkbox{border:1.5px solid var(--border);border-radius:4px;flex-shrink:0;width:16px;height:16px;transition:background .15s,border-color .15s;position:relative}.multi-select-option input:checked+.ms-checkbox{background:var(--navy);border-color:var(--navy)}.multi-select-option input:checked+.ms-checkbox:after{content:"";border:2px solid #fff;border-width:0 2px 2px 0;width:4px;height:8px;position:absolute;top:1px;left:4px;transform:rotate(45deg)}@media (width<=900px){.canvas-wrapper canvas{max-width:100%;height:auto}}@media (width<=640px){.key-box{padding:32px 22px}.app-shell{padding:24px 10px 16px}.site-header-inner{gap:10px;padding:10px 14px}.logo-badge{padding:4px 10px}.logo-badge img{height:22px}.site-header-actions{gap:6px}.site-header-actions .btn{gap:5px;height:32px;padding:0 10px;font-size:12px}.site-header-actions .btn svg{width:14px;height:14px}.page-title h1{font-size:24px}.toolbar{gap:12px;padding:14px}.toolbar-row{flex-direction:column;align-items:stretch;gap:10px}.file-upload{width:100%}.file-name{flex:1;max-width:none}.field{justify-content:space-between;width:100%}.field select,.field input[type=number]{flex:1;width:auto}.action-buttons{grid-template-columns:1fr 1fr;gap:8px;width:100%;display:grid}.action-buttons .btn{justify-content:center;width:100%}.action-buttons .btn-primary{grid-column:1/-1}.canvas-wrapper{padding:0}.site-footer{padding:20px 16px}.zone-panel{padding:16px}.quadrant-grid{grid-template-columns:1fr}.subzone-row{flex-direction:column;align-items:stretch;gap:6px}.subzone-label{align-self:flex-start;width:auto;padding:4px 10px}.zone-panel-footer{justify-content:stretch}.zone-panel-footer .btn{justify-content:center;width:100%}}