:root { color-scheme: dark; font: 13px system-ui,sans-serif; background:#181b20; color:#d7dbe2; }
* { box-sizing:border-box; }
body { margin:0; overflow:hidden; }
main { height:100dvh; display:flex; flex-direction:column; }
.toolbar { height:44px; flex-shrink:0; display:flex; align-items:center; gap:12px; padding:6px 12px; background:#242830; border-bottom:1px solid #3c424d; }
.toolbar strong { margin-right:16px; }
.toolbar button { width:auto; }
.status { margin-left:auto; font-size:12px; color:#a8c4b1; }
.workspace { flex:1; min-height:0; display:grid; grid-template-columns:300px minmax(0,1fr); }
aside { grid-column:1; grid-row:1; overflow:auto; background:#242830; border-right:1px solid #3c424d; }
.map-panel { grid-column:2; grid-row:1; position:relative; min-width:0; min-height:0; display:flex; flex-direction:column; overflow:hidden; background:#070c0b; }
.map-tabs { height:34px; flex-shrink:0; background:#242830; border-bottom:1px solid #3c424d; padding:8px 16px; }
.map-tabs span { float:right; color:#8f98a6; font-size:11px; }
#map { width:100%; flex:1; min-height:0; display:block; cursor:grab; }
#map:active { cursor:grabbing; }
.map-overlay { position:absolute; padding:6px 10px; background:#20252dde; font:11px ui-monospace,monospace; pointer-events:none; display:flex; gap:12px; }
.top-left { top:44px; left:10px; }
.bottom-left { bottom:10px; left:10px; flex-direction:column; gap:3px; }
.card { padding:12px; border-bottom:1px solid #3c424d; }
h2 { margin:0 0 10px; font-size:12px; color:#adb7c6; text-transform:uppercase; letter-spacing:.05em; }
label { display:grid; gap:5px; margin:10px 0; color:#b6bfcd; font-size:12px; }
label.check { display:flex; align-items:center; }
label output { float:right; }
button,input,select { font:inherit; }
button,select,input[type=url],input[type=file],input[type=number] { width:100%; background:#303640; border:1px solid #4a5361; color:#e0e5ed; border-radius:3px; padding:6px 8px; }
button { cursor:pointer; }
button:hover { background:#3d4654; }
button:disabled { opacity:.5; }
button.accent { background:#345371; }
input[type=range] { width:100%; accent-color:#79a8d9; }
input[type=file] { font-size:11px; }
.button-row { display:flex; gap:6px; margin:6px 0; }
dl { margin:8px 0; }
dl div { display:flex; justify-content:space-between; gap:8px; border-bottom:1px solid #343b45; padding:5px 0; font-size:11px; }
dt { color:#929eae; }
dd { margin:0; font:11px ui-monospace,monospace; text-align:right; }
#raster-bounds,#raster-window { max-width:160px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.note,#style-status { font-size:11px; color:#94a2b4; }
pre { font:11px/1.5 ui-monospace,monospace; white-space:pre-wrap; overflow:auto; max-height:220px; }
.separator { display:none; }
.progress { height:3px; background:#516e90; }
[hidden] { display:none!important; }
#diagnostics { position:fixed; z-index:5; top:44px; right:0; bottom:0; width:340px; overflow:auto; background:#242830; border-left:1px solid #4a5361; }
.pass { color:#a5d3b3; } .fail { color:#eeaaa6; }
@media(max-width:650px) { .workspace { grid-template-columns:230px minmax(0,1fr); } .toolbar { gap:6px; } }

.toolbar select { width:145px; } #projection-status { font-size:11px; color:#eeaaa6; max-width:260px; }

.layer-row { display:flex; align-items:center; gap:6px; margin:4px 0; } .layer-select { text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .layer-select[aria-pressed=true] { background:#345371; } input[type=text] { width:100%; background:#303640; color:#e0e5ed; border:1px solid #4a5361; padding:6px; }

:root { --panel:#242830; --field:#303640; --border:#3c424d; --text:#d7dbe2; --muted:#adb7c6; --selection:#345371; }
:root[data-theme=light] { color-scheme:light; --panel:#f1f2f4; --field:#fff; --border:#c5c9d0; --text:#252a32; --muted:#535e6d; --selection:#d4e5f7; }
body,.toolbar,aside,.map-tabs,#diagnostics { background:var(--panel); color:var(--text); }
.toolbar,aside,.map-tabs,.card { border-color:var(--border); }
button,select,input[type=text],input[type=number],input[type=url],input[type=file] { background:var(--field); color:var(--text); border-color:var(--border); border-radius:5px; }
h2,label,dt { color:var(--muted); }
.layer-select[aria-pressed=true] { background:var(--selection); }
.sidebar-tabs { display:flex; position:sticky;top:0;background:var(--panel);z-index:2;border-bottom:1px solid var(--border); }
.sidebar-tabs button { border:0;border-radius:0;padding:10px; background:transparent; }
.sidebar-tabs button[aria-selected=true] { border-bottom:2px solid #649bd1; }
.map-surface { flex:1; position:relative; min-height:0; }
#map,#basemap-canvas { position:absolute;inset:0;width:100%;height:100%; }
#basemap-canvas { pointer-events:none; }
#attribution { position:absolute;right:5px;bottom:5px;max-width:65%;padding:3px 5px;background:#ffffffdf;color:#222;font-size:10px;z-index:1; }
#attribution:empty { display:none; }
.toolbar #theme-select { width:72px; }
#basemap-status { font-size:11px; color:#bb706a; }

:root[data-theme=light] { --panel:#fafafa; --field:#fff; --border:#e1e1e1; --text:#242424; --muted:#777; --selection:#20a5da; }
.workspace { grid-template-columns:348px minmax(0,1fr); }
.toolbar { height:34px;gap:8px; } .toolbar button { border:0;background:transparent;font-weight:400; }
.toolbar strong { font-size:11px;font-weight:400; }
.sidebar-tabs { height:36px; } .map-tabs { height:32px;background:var(--panel); }
.status-bar { height:24px;flex-shrink:0;border-top:1px solid var(--border);display:flex;justify-content:space-between;padding:4px 10px;font-size:10px;color:var(--muted); }
.map-overlay { display:none; }
.layer-card .note,.layer-card > label.check { display:none; }
.layer-card:has(#layer-list:empty) > label,.layer-card:has(#layer-list:empty) .button-row { display:none; }
#empty-inspector { margin:30px 0;font-size:13px; }

.status-bar select { width:130px;padding:0 5px;font-size:10px;height:19px; }
.basemap-card { padding:5px 8px;display:flex;align-items:center;justify-content:space-between; }
.basemap-card h2 { margin:0;font-weight:400;font-size:10px; }
#basemap-select { width:150px;padding:2px 5px;font-size:11px; }
#basemap-status:empty { display:none; }

.map-tabs { display:flex;padding:0 8px;align-items:center;gap:8px; }
.map-tab { display:flex;align-items:center; }
.map-tab button,#new-map-view { border:0;background:transparent;width:auto;padding:6px; }
.map-tab button[aria-selected=true] { border-bottom:2px solid #20a5da; }
#new-map-view { margin-left:auto; }
#layer-context { position:fixed;z-index:10;width:160px;background:var(--panel);padding:4px;border:1px solid var(--border);box-shadow:0 4px 16px #0003; }
#layer-context button { border:0;text-align:left; }
dialog { background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:6px;max-width:90vw; }
textarea { background:var(--field);color:var(--text);border:1px solid var(--border);max-width:100%; }

.toolbar { gap:8px;padding:3px 12px; }
.toolbar-spacer { flex:1; }
.readiness { display:flex;align-items:center;gap:4px;font-size:10px;color:var(--muted); }
#ready-dot { width:7px;height:7px;border-radius:50%;background:#2aca68; }
#ready-dot[data-state=busy] { background:#e8a328; }
#ready-dot[data-state=error] { background:#db4949; }
#header-fit { border:1px solid var(--border);border-radius:5px; }
#theme-toggle { margin-left:2px; }
#projection-status:empty { display:none; }

.selected-layer-heading { display:flex;align-items:center;gap:4px;margin-top:10px; }
.selected-layer-heading #layer-rename { flex:1;min-width:0;border:0;background:transparent;padding:4px;font-size:12px; }
.selected-layer-heading #layer-rename:focus { outline:1px solid var(--border); }
.layer-tools { display:flex;gap:2px;flex-shrink:0; }
.layer-tools button { width:24px;height:26px;padding:0;border:0;background:transparent;font-size:16px; }
.layer-tools button:hover { background:var(--selection); }
.layer-card:has(#layer-list:empty) .selected-layer-heading { display:none; }

.layer-row .layer-select { flex:1;min-width:0;width:auto; }
.layer-row .layer-tools { gap:0; }
.layer-row .layer-tools button { width:22px; }

.layer-select::before { content:attr(data-type);font-size:9px;margin-right:7px;color:var(--muted); }
.channel-card { background:var(--field);padding:12px;margin:10px 0;border-radius:5px; }
.channel-card > button { width:auto;float:right;border:0;font-size:11px; }
.channel-card select { margin-top:10px; }
.inspector-heading { display:flex;justify-content:space-between;align-items:center; }
.inspector-heading button { width:auto;font-size:11px; }
#mode-rgb[aria-pressed=true],#mode-gray[aria-pressed=true] { background:var(--selection); }

.zoom-box { position:absolute;pointer-events:none;border:1px solid #209bd2;background:#209bd225;z-index:3; }
.footer-right { display:flex;align-items:center;gap:10px;min-width:0; }
.footer-popover { position:fixed;bottom:32px;right:10px;z-index:30;width:310px;max-height:75vh;overflow:auto;padding:12px;background:var(--panel);color:var(--text);border:1px solid var(--border);box-shadow:0 4px 16px #0005;border-radius:7px; }
.footer-popover button { display:block;width:100%;text-align:left;margin:4px 0; }
.footer-popover button[aria-pressed=true] { font-weight:bold;border-color:var(--accent); }
.footer-popover input { width:100%;box-sizing:border-box;margin-top:6px; }
#crs-error { color:#c33; }
@media(max-width:800px) { #extent-status { display:none; } }