/* FRG00533: shared AreaTracker / central-map visual foundation. No data logic. */
.area-ui533{
 --area-paper:#fff;--area-bg:#f4faf8;--area-ink:#204c54;
 --area-accent:#087f72;--area-soft:#e5f6ee;--area-line:#b8d8cf;
 --area-muted:#426b70;--area-scroll:#168e7d;--area-scroll-track:#e1efea;
 --area-font:"Avenir Next",Avenir,"Segoe UI",sans-serif;
 font-family:var(--area-font);color:var(--area-ink);background:var(--area-bg);
}
.area-ui533 :is(button,input,select,textarea){font-family:var(--area-font)}
.area-ui533 :is(button,a,input,select,textarea,[tabindex]):focus-visible{outline:3px solid #217db1;outline-offset:2px}
.area-ui533 :is(aside,.history,dialog,.central-nav,.filter-bar,.modal,.modal-body){scrollbar-width:auto;scrollbar-color:var(--area-scroll) var(--area-scroll-track);scrollbar-gutter:stable both-edges}
.area-ui533 ::-webkit-scrollbar{-webkit-appearance:none;width:12px;height:12px}
.area-ui533 ::-webkit-scrollbar-track{background:var(--area-scroll-track);border-radius:8px}
.area-ui533 ::-webkit-scrollbar-thumb{background:var(--area-scroll);border:3px solid var(--area-scroll-track);border-radius:8px}
.area-ui533 ::-webkit-scrollbar-thumb:hover{background:#086a5e}
.central-ui533 .central-sidebar,.central-ui533 .central-workspace{background:var(--area-paper);border-color:var(--area-line);box-shadow:none}
.central-ui533 .central-layout{display:grid;grid-template-columns:minmax(240px,290px) minmax(0,1fr);height:100dvh;min-height:0;overflow:hidden;background:var(--area-bg)}
.central-ui533 .central-layout::before{display:none}
.central-ui533 .central-sidebar::after{display:none}
.central-ui533 .central-sidebar{min-width:0;min-height:0;overflow:hidden}
.central-ui533 .central-workspace{min-width:0;min-height:0;height:100%;overflow:hidden}
.central-ui533 .central-workspace .app{height:100%;min-height:0;overflow:hidden}
.central-ui533 .central-workspace #map{min-height:80px;flex:1 1 auto}
.central-ui533 .central-nav{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;align-content:start;grid-auto-rows:max-content}
.central-ui533 .central-workspace{border-radius:0}
.central-ui533 .central-brand{background:var(--area-paper)}
.central-ui533 .central-brand strong{color:var(--area-ink);font-family:var(--area-font);letter-spacing:-.02em}
.central-ui533 .area-version533{display:block;margin-top:3px;color:var(--area-muted);font:500 10px/1.2 var(--area-font);letter-spacing:0}
.central-ui533 .central-brand span{color:var(--area-muted);font-weight:500}
.central-ui533 .central-nav{padding-inline:3mm;gap:10px}
.central-ui533 .central-nav .btn{background:var(--area-soft);border:1px solid var(--area-line);border-radius:16px;color:var(--area-ink);box-shadow:none;transform:none;min-height:68px;height:auto;padding:12px 16px;white-space:normal}
.central-ui533 .central-nav .btn:hover,.central-ui533 .central-nav .btn:focus-visible{background:#d9f0e7;border-color:#80bfae;box-shadow:none;transform:none}
.central-ui533 .central-nav .btn.btn-3d{background:var(--area-accent);border-color:var(--area-accent);color:#fff}
.central-ui533 .central-nav-copy strong{font-family:var(--area-font);text-transform:none;letter-spacing:0;font-size:16px;color:var(--area-ink);font-weight:750}
.central-ui533 .central-nav-copy small{font-family:var(--area-font);font-size:12px;line-height:1.4;color:var(--area-muted);font-weight:500}
.central-ui533 .central-nav-copy :is(strong,small){white-space:normal;overflow-wrap:anywhere}
.central-ui533 .btn-3d .central-nav-copy :is(strong,small){color:#fff}
.central-ui533 .topbar{background:var(--area-paper);border-color:var(--area-line);min-height:40px}
.central-ui533 .central-workspace .topbar{padding:4px 12px;min-height:40px}
.central-ui533 .topbar-user{background:var(--area-soft);border-color:var(--area-line);color:var(--area-ink)}
.central-ui533 .topbar-sync-btn.is-ok{background:#e5f6ee;color:#14633e;border-color:#8acba4}
.central-ui533 .topbar-sync-btn.is-wait{background:#fff4c7;color:#665015;border-color:#d5b654}
.central-ui533 .topbar .btn{font-family:var(--area-font);border-radius:12px;letter-spacing:0;text-transform:none;box-shadow:none}
.central-ui533 .topbar .btn-brand{background:var(--area-accent);border-color:var(--area-accent);color:#fff}
.central-ui533 .topbar .btn-dim{background:var(--area-soft);border-color:var(--area-line);color:var(--area-ink)}
.central-ui533 .map-location-picker,.central-ui533 .loc-bar{background:var(--area-paper);border-color:var(--area-line);box-shadow:0 3px 12px #204c5414}
.central-ui533 .map-location-picker :is(label,select){font-family:var(--area-font);letter-spacing:0;text-transform:none;color:var(--area-ink)}
.central-ui533 .login-wrap{background:var(--area-bg)}
.central-ui533 .login-card{background:var(--area-paper);border:1px solid var(--area-line);border-radius:22px;box-shadow:0 12px 40px #204c5418;color:var(--area-ink)}
.central-ui533 .login-card :is(label,.login-sub,.login-logo-tag){color:var(--area-muted);font-family:var(--area-font)}
.central-ui533 .login-card input{background:var(--area-paper);color:var(--area-ink);border:1px solid var(--area-line);border-radius:14px;min-height:48px}
.central-ui533 .login-btn{background:var(--area-accent);color:#fff;border-radius:14px;font-family:var(--area-font);text-transform:none;letter-spacing:0;box-shadow:none}
@media(orientation:portrait){
 .central-ui533 .central-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,32dvh) minmax(0,1fr);gap:8px;padding:8px}
 .central-ui533 .central-sidebar{width:100%;height:100%;padding:8px;gap:8px}
 .central-ui533 .central-brand{display:flex;align-items:center;justify-content:flex-start;flex:0 0 auto;gap:10px;min-height:0;padding:4px 8px;text-align:left;box-shadow:none}
 .central-ui533 .central-brand img{width:42px;max-height:48px;object-fit:contain;margin:0}
 .central-ui533 .central-brand strong{font-size:17px}
 .central-ui533 .central-brand span{display:none}
 .central-ui533 .central-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:0;flex:1 1 auto;min-height:0;overflow-y:auto;padding:2px 3mm}
 .central-ui533 .central-nav .btn{min-height:58px;padding:8px 10px}
 .central-ui533 .central-nav-copy strong{font-size:14px}
 .central-ui533 .central-nav-copy small{font-size:11px}
 .central-ui533 .central-workspace .topbar{padding:4px 8px}
 .central-ui533 .central-workspace .stats-strip{padding:4px 8px}
}
@media(orientation:landscape) and (max-height:480px){
 .central-ui533 .central-layout{grid-template-columns:220px minmax(0,1fr);gap:8px;padding:8px}
 .central-ui533 .central-sidebar{width:auto;padding:8px;gap:8px}
 .central-ui533 .central-brand{display:flex;min-height:0;padding:4px;gap:8px;box-shadow:none}
 .central-ui533 .central-brand img{width:38px;margin:0}
 .central-ui533 .central-brand span{display:none}
 .central-ui533 .central-nav{grid-template-columns:minmax(0,1fr);margin-top:0}
 .central-ui533 .central-nav .btn{min-height:52px;padding:8px 10px}
 .central-ui533 .central-nav-copy strong{font-size:14px}
}
@media(prefers-reduced-motion:reduce){.area-ui533 *{scroll-behavior:auto!important;transition:none!important}}
/* Chromium/Safari: standard scrollbar-color suppresses custom, permanently visible tracks. */
@supports selector(::-webkit-scrollbar){body.area-ui533 :is(aside,.history,dialog,.central-nav,.filter-bar,.modal,.modal-body){scrollbar-color:auto}}
/* Same persistent rail and 3 mm clearance on BOTH sides as APP515/518. */
.area-ui533 .scroll-reserved533{padding-right:max(var(--scroll-base-right533,0px),calc(6mm + 12px))!important}
.area-ui533 .scroll-metric533{position:fixed;display:block;left:0;top:0;width:3mm;height:0;visibility:hidden;pointer-events:none}
.area-ui533 .scroll-rail533{position:absolute;z-index:5000;width:12px;box-sizing:border-box;border:1px solid #bdd7ce;border-radius:7px;background:#e2eee9;touch-action:none;user-select:none;cursor:pointer}
.area-ui533 .scroll-rail533[hidden]{display:none!important}
.area-ui533 .scroll-rail533:focus-visible{outline:3px solid #217db1;outline-offset:1px}
.area-ui533 .scroll-thumb533{position:absolute;left:2px;right:2px;border-radius:5px;background:#178774;pointer-events:auto}
@supports selector(::-webkit-scrollbar){body.area-ui533 .scroll-host533{scrollbar-width:auto;scrollbar-gutter:auto}body.area-ui533 .scroll-host533::-webkit-scrollbar:vertical{width:0}body.area-ui533 .scroll-host533::-webkit-scrollbar:horizontal{height:10px}}
