:root{
  --burgundy:#651b33;
  --burgundy-2:#7a2040;
  --burgundy-dark:#4a1325;
  --gold:#b38e5d;
  --cream:#f7f3ef;
  --paper:#ffffff;
  --ink:#272124;
  --muted:#6c6267;
  --line:#ded6d9;
  --soft:#f4eff1;
  --danger:#9f183b;
  --success:#287a54;
  --shadow:0 12px 32px rgba(64,20,37,.12);
  font-family:"Noto Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--cream);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--cream);color:var(--ink)}
body{font-family:"Noto Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:var(--burgundy)}
button,input,select{font:inherit}
button{border:0;border-radius:8px;background:var(--burgundy);color:#fff;padding:10px 13px;cursor:pointer;font-weight:700;transition:transform .12s ease,background .12s ease,box-shadow .12s ease}
button:hover:not(:disabled){background:var(--burgundy-2);box-shadow:0 5px 14px rgba(101,27,51,.18)}
button:active:not(:disabled){transform:translateY(1px)}
button:disabled{opacity:.45;cursor:not-allowed}
button.secondary{background:#6e6267}
button.secondary:hover:not(:disabled){background:#554c50}
button.ghost{background:transparent;color:var(--burgundy);border:1px solid var(--line)}
button.danger{background:var(--danger)}
.primary-wide{width:100%}
.linkbtn{padding:0;background:transparent;text-decoration:underline;box-shadow:none!important}

.app-header{height:68px;background:linear-gradient(90deg,var(--burgundy-dark),var(--burgundy));color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:4px solid var(--gold);position:relative;z-index:20}
.compact-header{height:64px}
.brand-lockup{display:flex;align-items:center;gap:12px;min-width:0}
.brand-symbol{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;background:#fff;color:var(--burgundy);font-weight:900;letter-spacing:-.5px;box-shadow:inset 0 0 0 1px rgba(101,27,51,.08)}
.brand-title{font-weight:800;font-size:18px;letter-spacing:-.2px;line-height:1.1}
.brand-subtitle{font-size:11px;opacity:.8;margin-top:3px;white-space:nowrap}
.header-actions{display:flex;gap:12px;align-items:center;font-size:13px}
.header-actions form{margin:0}
.header-link{color:#fff;text-decoration:none;font-weight:700}
.user-chip{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:6px 10px}

.layout{display:grid;grid-template-columns:330px 1fr;height:calc(100vh - 68px);min-height:560px}
.sidebar{background:var(--paper);border-right:1px solid var(--line);overflow:auto;box-shadow:4px 0 20px rgba(65,39,48,.05);z-index:10}
.panel-section{padding:17px 18px;border-bottom:1px solid var(--line)}
.panel-section h3{margin:3px 0 13px;font-size:16px;color:var(--burgundy-dark)}
.section-kicker{font-size:10px;font-weight:800;letter-spacing:1.35px;color:var(--gold)}
.field-label{display:block;margin:10px 0 6px;font-size:12px;font-weight:700;color:#544a4e}
.control-input{width:100%;border:1px solid #cfc5c9;border-radius:8px;background:#fff;padding:9px 10px;color:var(--ink);outline:none}
.control-input:focus{border-color:var(--burgundy);box-shadow:0 0 0 3px rgba(101,27,51,.10)}
.layer-list{margin-top:12px;padding:10px 11px;background:var(--soft);border-radius:10px;border:1px solid #eadfe3}
.layer-list label{display:flex;align-items:center;gap:8px;margin:8px 0;font-size:12px;cursor:pointer}
.layer-list input{accent-color:var(--burgundy)}
.range-label{display:flex;justify-content:space-between;align-items:center}
input[type="range"]{width:100%;accent-color:var(--burgundy)}
.button-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.button-grid button{font-size:11px;padding:9px 7px}
.coordinate-search{margin-top:13px;padding-top:12px;border-top:1px solid var(--line)}
.coord-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:8px}
.coordinate-search button{width:100%;font-size:12px}
.section-title-row{display:flex;align-items:start;justify-content:space-between;gap:12px}
.count-badge{display:inline-grid;place-items:center;min-width:27px;height:27px;padding:0 7px;border-radius:999px;background:var(--soft);color:var(--burgundy);font-weight:800;font-size:12px;border:1px solid #eadfe3}

.map-shell{position:relative;min-width:0;background:#e8e4e2;overflow:hidden}
#map{height:100%;width:100%}
.basemap-grayscale{filter:grayscale(1) contrast(.92) brightness(1.04)}
.ol-control button{background:var(--burgundy)!important}
.ol-control button:hover{background:var(--burgundy-2)!important}
.ol-scale-line{background:rgba(74,19,37,.8)!important;border-radius:4px}
.ol-zoomslider{background:rgba(255,255,255,.78)!important}
.map-brand-card{position:absolute;top:14px;left:14px;z-index:4;background:rgba(255,255,255,.94);backdrop-filter:blur(7px);border:1px solid rgba(101,27,51,.12);border-radius:10px;padding:9px 12px;display:flex;gap:9px;align-items:center;box-shadow:0 7px 20px rgba(67,25,41,.12);pointer-events:none}
.map-brand-card b{font-size:12px;color:var(--burgundy-dark);display:block}
.map-brand-card small{display:block;font-size:10px;color:var(--muted);margin-top:1px}
.map-brand-dot{width:11px;height:11px;border-radius:50%;background:var(--burgundy);box-shadow:0 0 0 4px rgba(101,27,51,.12)}
.map-legend{position:absolute;right:14px;top:14px;z-index:4;background:rgba(255,255,255,.94);border:1px solid rgba(101,27,51,.12);border-radius:9px;padding:8px 10px;display:flex;gap:13px;box-shadow:0 7px 20px rgba(67,25,41,.10);font-size:10px;color:#51474b;pointer-events:none}
.map-legend span{display:flex;align-items:center;gap:6px}
.legend-dot{width:9px;height:9px;border-radius:50%;background:var(--burgundy);border:2px solid #fff;box-shadow:0 0 0 1px var(--burgundy)}
.legend-line{width:19px;height:3px;border-radius:3px;background:var(--burgundy)}
.map-statusbar{position:absolute;left:14px;right:14px;bottom:13px;z-index:5;display:flex;justify-content:space-between;gap:14px;pointer-events:none;background:rgba(74,19,37,.86);color:#fff;border-radius:8px;padding:7px 10px;font-size:10px;box-shadow:0 5px 16px rgba(0,0,0,.16)}

.pair-card{margin:12px 0;padding:12px;border:1px solid var(--line);border-radius:12px;text-align:center;background:#fff;box-shadow:0 5px 16px rgba(65,27,41,.06)}
.pair-qr{width:220px;max-width:100%;display:block;margin:0 auto 8px;background:#fff;border-radius:8px}
.break-link{display:block;word-break:break-all;margin-top:8px}
.hidden{display:none!important}
.small{font-size:11px;color:var(--muted);line-height:1.5}
.small.strong,.strong{font-weight:700;color:#4e4247}
.devices{font-size:12px}
.device{border:1px solid #eadfe3;background:#fcfafb;border-radius:10px;padding:10px;margin:8px 0}
.device b{color:var(--burgundy-dark);font-size:12px}
.device .device-meta{color:var(--muted);font-size:10px;margin-top:4px;line-height:1.45}
.device .device-actions{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.device button{padding:5px 8px;font-size:10px;margin:0}
.device-state{display:inline-flex;align-items:center;gap:5px;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--success)}
.device-state::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--success)}

.login-body,.phone-body{min-height:100vh}
.login-body{display:grid;place-items:center;padding:24px;background:
 radial-gradient(circle at 15% 15%,rgba(179,142,93,.15),transparent 28%),
 linear-gradient(135deg,#f7f2ef 0%,#eee5e8 100%)}
.login-card,.phone-card{width:min(460px,calc(100% - 28px));background:#fff;border:1px solid var(--line);border-radius:15px;padding:26px;box-shadow:var(--shadow)}
.institutional-login{padding-top:20px}
.login-identity{text-align:center;border-bottom:1px solid var(--line);padding-bottom:15px;margin-bottom:18px;position:relative}
.institution-logo{display:block;width:min(100%,380px);height:auto;margin:0 auto}
.prototype-ribbon{display:inline-block;margin-top:10px;padding:4px 8px;border-radius:999px;background:#f4e8ec;color:var(--burgundy);font-size:9px;font-weight:800;letter-spacing:1px}
.login-heading h1{font-size:28px;line-height:1.05;margin:5px 0 8px;color:var(--burgundy-dark);letter-spacing:-.6px}
.login-heading p{margin:0 0 17px;color:var(--muted);font-size:13px}
.login-card label,.phone-card label{display:block;margin:14px 0;font-weight:700;font-size:12px;color:#51474b}
.login-card input,.phone-card input{display:block;width:100%;margin-top:6px;padding:11px;border:1px solid #cfc5c9;border-radius:8px;font-size:15px;outline:none}
.login-card input:focus,.phone-card input:focus{border-color:var(--burgundy);box-shadow:0 0 0 3px rgba(101,27,51,.10)}
.error{background:#f9e5e9;color:#7d1734;border:1px solid #edc8d2;padding:10px;border-radius:8px;font-size:12px}
.legal-note{font-size:10px;line-height:1.5;color:#877b80;margin:16px 0 0;border-top:1px solid var(--line);padding-top:12px}
.phone-body{background:var(--cream)}
.phone-card{margin:28px auto}
.phone-card h2{color:var(--burgundy-dark);margin:5px 0 12px}
.phone-actions{display:flex;gap:7px;flex-wrap:wrap}
.status{margin-top:18px;padding:12px;background:var(--soft);border:1px solid #e7dce0;border-left:4px solid var(--gold);border-radius:8px;font-size:12px;line-height:1.5}
.coords{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;margin-top:12px;white-space:pre-wrap;font-size:12px;color:#41383b}
.mobile-brand{display:flex;align-items:center;gap:10px;padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.pair-claim-card p{font-size:13px;line-height:1.55;color:#5c5256}

@media(max-width:900px){
  .layout{grid-template-columns:285px 1fr}
  .map-legend{display:none}
}
@media(max-width:760px){
  .app-header{padding:0 12px;height:62px}
  .brand-title{font-size:15px}.brand-subtitle{display:none}.brand-symbol{width:35px;height:35px}
  .header-actions{gap:8px}.user-chip{display:none}
  .layout{grid-template-columns:1fr;grid-template-rows:auto 68vh;height:auto;min-height:auto}
  .sidebar{border-right:0;border-bottom:1px solid var(--line);max-height:none}
  .panel-section{padding:15px}
  .map-shell{min-height:68vh}
  #map{min-height:68vh}
  .map-statusbar{left:8px;right:8px;bottom:8px}
  .map-brand-card{left:8px;top:8px}
}