:root { --ink:#252525; --muted:#77736b; --paper:#f4f1ea; --card:#fffefa; --gold:#caa63a; --line:#ded9ce; --danger:#a43d3d; font-family:Inter,ui-sans-serif,system-ui,sans-serif; }
* { box-sizing:border-box; } body { margin:0; background:var(--paper); color:var(--ink); } button,input,select,textarea { font:inherit; } button { cursor:pointer; border:0; border-radius:999px; padding:11px 17px; font-weight:800; } input,select,textarea { width:100%; padding:12px; border:1px solid var(--line); border-radius:12px; background:#fff; outline:none; } input:focus,select:focus,textarea:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(202,166,58,.14); } label { display:grid; gap:7px; color:#555149; font-size:12px; font-weight:750; } h1,h2,p { margin-top:0; } h1 { margin-bottom:0; } h2 { margin-bottom:14px; font-size:20px; } .hidden { display:none!important; } .muted { color:var(--muted); } .eyebrow { margin:0 0 5px; color:#9e7d1d; font-size:11px; font-weight:850; letter-spacing:2px; } .panel { background:var(--card); border:1px solid var(--line); border-radius:22px; box-shadow:0 14px 40px rgba(48,42,31,.07); } .primary { background:var(--ink); color:#fff; } .secondary { border:1px solid var(--line); background:#fff; color:var(--ink); } .message { min-height:18px; margin:0; color:var(--muted); font-size:12px; } .message.error { color:var(--danger); } .message.success { color:#39734a; } .field-help { color:var(--muted); font-size:10px; font-weight:600; }
.auth-shell { min-height:100vh; display:grid; place-items:center; padding:20px; } .auth-card { width:min(440px,100%); padding:34px; display:grid; gap:16px; } .brand { width:56px; height:56px; display:grid; place-items:center; border-radius:50%; background:var(--ink); color:var(--gold); font:800 28px Georgia,serif; } .auth-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.shell { width:min(1450px,calc(100% - 32px)); margin:auto; padding:24px 0 55px; } .topbar { display:flex; justify-content:space-between; align-items:center; padding:0 5px 20px; } .quota-panel,.map-panel,.form-panel,.active-panel { padding:20px; } .quota-list { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:15px 0; } .quota-card { padding:14px; border:1px solid var(--line); border-radius:14px; background:#fff; } .quota-card strong,.quota-card span { display:block; } .quota-card strong { font-size:18px; } .quota-card span { margin-top:4px; color:var(--muted); font-size:11px; }
.workspace { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(350px,.65fr); gap:16px; margin-top:16px; align-items:start; } .map-panel { position:sticky; top:14px; } .section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; } .section-heading select { width:min(260px,45%); } #map { height:650px; border-radius:16px; overflow:hidden; background:#ddd; } #map .mapboxgl-canvas-container.mapboxgl-interactive { cursor:crosshair; } .map-help { margin:10px 3px 0; font-size:11px; } .forms { display:grid; gap:16px; } .form-panel { display:grid; gap:13px; } .grid { display:grid; gap:10px; } .grid.two { grid-template-columns:1fr 1fr; }
.active-panel { margin-top:16px; } .active-drops { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; } .drop-card { padding:12px; border:1px solid var(--line); border-radius:12px; background:#fff; } .drop-card strong,.drop-card span { display:block; } .drop-card span { margin-top:4px; color:var(--muted); font-size:10px; }
.drop-card.inactive { opacity:.58; background:#f1eee7; } .drop-card button { width:100%; margin-top:10px; padding:8px 10px; font-size:11px; }
.company-drop-marker { width:38px; height:38px; display:grid; place-items:center; padding:0; border:4px solid #fff; border-radius:50%; background:var(--drop-color); color:#fff; box-shadow:0 5px 15px rgba(20,18,14,.28); font-size:13px; line-height:1; font-weight:900; text-align:center; cursor:pointer; transition:width .15s,height .15s,box-shadow .15s,opacity .15s; }
.company-drop-marker:hover { width:42px; height:42px; box-shadow:0 7px 20px rgba(20,18,14,.38); } .company-drop-marker:focus-visible { outline:3px solid rgba(202,166,58,.45); outline-offset:2px; }
.company-drop-marker.inactive { opacity:.42; filter:grayscale(.8); } .drop-popup { min-width:190px; display:grid; gap:7px; padding:4px 2px 2px; color:var(--ink); } .drop-popup strong { font-size:14px; } .drop-popup span { color:#6f6b63; font-size:11px; } .drop-popup button { margin-top:4px; padding:8px 12px; }
.mapboxgl-popup-content { border-radius:14px; padding:14px; box-shadow:0 10px 30px rgba(25,22,18,.18); }
.check-label { display:flex; grid-template-columns:none; align-items:center; gap:9px; font-size:13px; } .check-label input { width:auto; accent-color:var(--gold); }
.reward-fields { display:grid; gap:13px; padding:14px; border:1px solid var(--line); border-radius:15px; background:#faf8f3; }
.reward-panel { margin-top:16px; padding:20px; } .reward-workspace { display:grid; grid-template-columns:minmax(280px,.8fr) minmax(300px,1.2fr); gap:20px; align-items:start; }
#reward-reader { min-height:220px; overflow:hidden; border:1px dashed var(--line); border-radius:16px; background:#f2efe8; margin-bottom:10px; }
.reward-verify { display:grid; gap:12px; } .reward-result { padding:16px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.reward-result strong,.reward-result span { display:block; } .reward-result span { margin-top:6px; color:var(--muted); font-size:12px; }
@media(max-width:900px){ .workspace{grid-template-columns:1fr}.map-panel{position:static}#map{height:480px}.active-drops{grid-template-columns:repeat(2,1fr)}.reward-workspace{grid-template-columns:1fr} }
@media(max-width:560px){ .shell{width:calc(100% - 18px)}.quota-list,.active-drops,.grid.two{grid-template-columns:1fr}.section-heading{align-items:stretch;flex-direction:column}.section-heading select{width:100%}#map{height:390px}.auth-actions{grid-template-columns:1fr} }