/* Shared visual system for weather, tools, and settings. Loaded after module CSS. */
#module-content:has(.utility-page) { max-width: 1480px; margin: 0 auto; padding: 22px 28px 52px; color: #e6f0ef; }
.utility-page { --u-bg: #0a1012; --u-panel: rgba(13, 22, 25, .78); --u-line: rgba(151, 220, 211, .16); --u-muted: #89a2a1; --u-mint: #5de0cb; --u-ice: #72c7e8; --u-coral: #ff8075; min-width: 0; }
.utility-hero { position: relative; overflow: hidden; padding: 30px 34px 26px; border: 1px solid var(--u-line); border-radius: 6px; background: linear-gradient(115deg, rgba(13, 27, 30, .96), rgba(9, 15, 18, .88)); box-shadow: inset 0 1px rgba(255,255,255,.05), 0 22px 56px rgba(0,0,0,.22); }
.utility-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .6; background: repeating-linear-gradient(90deg, transparent 0 46px, rgba(135, 220, 211, .035) 47px 48px), linear-gradient(120deg, transparent 15%, rgba(93,224,203,.1), transparent 42%); }
.utility-hero::after { content: ''; position: absolute; width: 360px; height: 360px; right: -90px; top: -250px; border: 1px solid rgba(114,199,232,.22); border-radius: 50%; box-shadow: 0 0 0 36px rgba(114,199,232,.025), 0 0 0 82px rgba(114,199,232,.018); }
.utility-kicker, .panel-heading span, .lab-section-heading span, .settings-section-title span, .station-meta, .weather-source { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; color: var(--u-mint); font: 700 10px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .13em; }
.utility-kicker i { width: 7px; height: 7px; background: var(--u-mint); box-shadow: 0 0 14px var(--u-mint); }
.utility-hero-row { position: relative; z-index: 1; display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-top: 20px; }
.utility-hero h2 { margin: 0; color: #f0f7f5; font-size: clamp(27px, 3vw, 40px); line-height: 1.05; letter-spacing: 0; }
.utility-hero p { margin: 10px 0 0; color: var(--u-muted); font-size: 14px; }
.utility-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; margin-top: 16px; }
.utility-panel, .signal-panel, .settings-section, .toolbox-category { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--u-line); border-radius: 5px; background: var(--u-panel); box-shadow: inset 0 1px rgba(255,255,255,.035); }
.utility-panel { padding: 22px; }
.panel-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(151,220,211,.13); }
.panel-heading h3, .lab-section-heading h3, .settings-section-title h3 { margin: 7px 0 0; color: #e8f6f2; font-size: 18px; letter-spacing: 0; }
.utility-page .loading, .utility-page .empty-state { display: grid; min-height: 150px; place-items: center; color: var(--u-muted); font-size: 13px; text-align: center; }

/* Weather station */
.weather-hero { background: linear-gradient(115deg, rgba(8, 28, 30, .98), rgba(13, 20, 25, .9)); }
.weather-scanline { position: relative; z-index: 1; height: 2px; margin-top: 24px; overflow: hidden; background: rgba(93,224,203,.15); }
.weather-scanline::after { content: ''; display: block; width: 34%; height: 100%; background: var(--u-mint); box-shadow: 0 0 16px var(--u-mint); animation: utility-scan 4s linear infinite; }
.weather-search { display: grid; gap: 7px; min-width: min(100%, 330px); color: var(--u-muted); font: 700 10px ui-monospace, monospace; letter-spacing: .1em; }
.weather-search > div { display: flex; }
.weather-search input, .toolbox-search input { min-width: 0; width: 100%; border: 1px solid rgba(114,199,232,.25); border-radius: 4px 0 0 4px; background: rgba(1, 8, 10, .5); color: #e8f6f2; outline: none; }
.weather-search input { height: 40px; padding: 0 12px; }
.weather-search .btn-primary:disabled { opacity: .58; cursor: wait; }
.weather-history { display: flex !important; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.weather-history button { min-height: 26px; padding: 3px 9px; border: 1px solid rgba(114,199,232,.2); border-radius: 3px; background: rgba(7,16,18,.55); color: var(--u-muted); font-size: 11px; cursor: pointer; }
.weather-history button:hover { border-color: var(--u-mint); color: #c9fff6; }
.utility-page .btn-primary, .utility-page .btn-secondary, .utility-page .btn-danger { min-height: 40px; padding: 0 14px; border-radius: 4px; font-weight: 700; letter-spacing: .02em; box-shadow: none; }
.weather-search .btn-primary, .utility-page .btn-primary { border: 1px solid rgba(93,224,203,.55); background: rgba(93,224,203,.16); color: #bffcf2; }
.weather-search .btn-primary:hover, .utility-page .btn-primary:hover { background: var(--u-mint); color: #082022; transform: none; }
.signal-panel { grid-row: span 2; min-height: 440px; padding: 28px; background: radial-gradient(circle at 90% 11%, rgba(114,199,232,.14), transparent 32%), var(--u-panel); }
.aqi-section { padding: 22px; }
.aqi-card { padding: 18px 0 0; border: 0; background: transparent; box-shadow: none; }
.aqi-main { margin-bottom: 14px; padding-bottom: 14px; }
.aqi-value { border: 1px solid rgba(93,224,203,.35); background: rgba(93,224,203,.09); color: #bffcf2; }
.aqi-details { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.weather-station .life-section { grid-column: 1 / -1; }
.signal-panel::after { content: ''; position: absolute; inset: auto -15% -55% 28%; aspect-ratio: 1; border: 1px solid rgba(93,224,203,.15); border-radius: 50%; box-shadow: 0 0 0 55px rgba(93,224,203,.025), 0 0 0 120px rgba(93,224,203,.014); pointer-events: none; }
.station-readout, .today-details, .weather-source { position: relative; z-index: 1; }
.station-meta { justify-content: flex-start; color: var(--u-muted); }
.station-meta b { color: var(--u-ice); font-weight: 700; }
.live-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--u-mint); box-shadow: 0 0 13px var(--u-mint); }
.today-main { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 43px 0 26px; }
.today-icon { font-size: 62px; filter: drop-shadow(0 0 18px rgba(114,199,232,.35)); }
.today-city { color: #f1f8f6; font-size: 26px; font-weight: 700; }
.today-condition, .today-range { margin-top: 6px; color: var(--u-muted); font-size: 13px; }
.today-temp { color: #f3fffc; white-space: nowrap; }
.temp-value { font-size: clamp(58px, 7vw, 92px); line-height: .75; font-weight: 300; letter-spacing: 0; }
.temp-unit { margin-left: 4px; color: var(--u-mint); font: 700 15px ui-monospace, monospace; }
.today-details { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; border: 1px solid rgba(151,220,211,.13); background: rgba(151,220,211,.13); }
.detail-item { display: flex; flex-direction: column; gap: 8px; min-height: 83px; padding: 16px; background: rgba(7,16,18,.72); }
.detail-label { color: var(--u-muted); font-size: 12px; }
.detail-value { color: #e9f9f5; font: 700 16px ui-monospace, monospace; }
.weather-source { justify-content: flex-end; margin-top: 21px; color: rgba(137,162,161,.65); font-size: 9px; }
.forecast-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 1px; margin-top: 15px; background: rgba(151,220,211,.11); }
.forecast-day { min-width: 0; padding: 13px 7px; background: rgba(7,16,18,.68); text-align: center; }
.forecast-day.today { background: rgba(93,224,203,.1); box-shadow: inset 0 2px var(--u-mint); }
.forecast-day-name, .forecast-condition { overflow: hidden; color: var(--u-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.forecast-icon { padding: 11px 0 8px; font-size: 24px; }.forecast-temp { display: flex; justify-content: center; gap: 6px; margin-top: 9px; font: 700 11px ui-monospace, monospace; }.forecast-temp .high { color: #ef8075; }.forecast-temp .low { color: var(--u-ice); }
.life-index { display: grid; gap: 1px; margin-top: 15px; background: rgba(151,220,211,.11); }.life-item { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 12px; background: rgba(7,16,18,.68); }.life-icon { display: grid; place-items: center; font-size: 19px; }.life-type { color: #d9eee9; font-size: 13px; font-weight: 700; }.life-level { display: inline-block; margin: 4px 0; color: var(--u-mint); font-size: 11px; }.life-desc { overflow: hidden; color: var(--u-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

/* Tool laboratory */
.tool-lab { --u-line: rgba(114,199,232,.17); }.tools-hero { background: linear-gradient(115deg, rgba(9, 24, 30, .97), rgba(12, 17, 23, .93)); }.toolbox-search { display: flex; align-items: center; min-width: min(100%, 290px); border: 1px solid rgba(114,199,232,.25); border-radius: 4px; background: rgba(0,8,11,.55); }.toolbox-search span { padding: 0 11px; color: var(--u-ice); font-size: 21px; }.toolbox-search input { height: 43px; padding: 0 12px 0 0; border: 0; border-radius: 0; }.toolbox-search:focus-within { border-color: var(--u-mint); box-shadow: 0 0 0 3px rgba(93,224,203,.08); }.lab-metrics { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 22px; margin-top: 25px; color: var(--u-muted); font: 10px ui-monospace, monospace; letter-spacing: .08em; }.lab-metrics b { margin-right: 6px; color: var(--u-ice); }
.toolbox-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }.toolbox-tab { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px 16px; border: 1px solid rgba(114,199,232,.16); border-radius: 4px; background: rgba(7,16,20,.72); color: #dcefed; text-align: left; cursor: pointer; }.toolbox-tab:hover { border-color: rgba(93,224,203,.5); background: rgba(17,42,45,.9); }.toolbox-tab.active { border-color: var(--u-mint); background: rgba(93,224,203,.11); box-shadow: inset 3px 0 var(--u-mint); }.toolbox-tab-index { color: var(--u-ice); font: 10px ui-monospace, monospace; }.toolbox-tab-icon { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(114,199,232,.25); background: rgba(114,199,232,.07); }.toolbox-tab-copy { display: grid; gap: 3px; min-width: 0; }.toolbox-tab-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.toolbox-tab-copy small { color: var(--u-muted); font-size: 11px; }.toolbox-categories { display: grid; gap: 16px; margin-top: 16px; }.toolbox-category { padding: 22px; }.lab-section-heading { display: flex; align-items: end; gap: 12px; padding-bottom: 17px; border-bottom: 1px solid rgba(114,199,232,.13); }.lab-section-heading span { color: var(--u-ice); }.lab-section-heading h3 { margin-right: auto; }.lab-section-heading em { color: var(--u-muted); font-size: 11px; font-style: normal; }.toolbox-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 1px; margin-top: 16px; border: 1px solid rgba(114,199,232,.13); background: rgba(114,199,232,.13); }.toolbox-empty { display: grid; gap: 6px; place-items: center; min-height: 150px; border: 1px dashed rgba(114,199,232,.22); color: #dcefed; text-align: center; }.toolbox-empty span { color: var(--u-muted); font-size: 12px; }
button.toolbox-card { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 12px; min-height: 116px; padding: 18px; border: 0; border-radius: 0; background: rgba(7,16,20,.86); color: #dcefed; text-align: left; cursor: pointer; transition: background .18s ease, box-shadow .18s ease; }.toolbox-card:hover { background: rgba(17,42,45,.88); box-shadow: inset 3px 0 var(--u-mint); transform: none; }.toolbox-card-index { align-self: start; color: rgba(137,162,161,.7); font: 9px ui-monospace, monospace; }.toolbox-card-icon { display: grid; place-items: center; width: 37px; height: 37px; border: 1px solid rgba(114,199,232,.32); background: rgba(114,199,232,.07); font-size: 19px; }.toolbox-card-copy { display: grid; gap: 7px; min-width: 0; }.toolbox-card-name { color: #eaf8f5; font-weight: 700; }.toolbox-card-desc { overflow: hidden; color: var(--u-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.toolbox-card-go { color: var(--u-coral); font: 18px ui-monospace, monospace; }
.tool-modal { padding: 18px; }.tool-modal-backdrop { background: rgba(2,8,10,.78); backdrop-filter: blur(8px); }.tool-modal-content { max-width: 820px; max-height: 90vh; border: 1px solid rgba(114,199,232,.27); border-radius: 5px; background: #0c1518; box-shadow: 0 32px 90px rgba(0,0,0,.65), inset 0 1px rgba(255,255,255,.05); }.tool-modal-header { padding: 18px 22px; border-bottom: 1px solid rgba(114,199,232,.16); background: rgba(114,199,232,.035); }.tool-modal-header span { color: var(--u-mint); font: 700 9px ui-monospace, monospace; letter-spacing: .12em; }.tool-modal-header h3 { margin: 6px 0 0; color: #ebf7f5; }.tool-modal-header .btn-close { border-radius: 3px; background: transparent; border-color: rgba(114,199,232,.23); }.tool-modal-body { background: #0c1518; color: #dcefed; }.tool-modal-body input, .tool-modal-body textarea, .tool-modal-body select { border-radius: 3px; border-color: rgba(114,199,232,.28); background: #071012; color: #e5f4f0; }.tool-modal-body .btn-primary { background: rgba(93,224,203,.16); color: #bffcf2; border-color: rgba(93,224,203,.5); }.tool-modal-body .btn-secondary { background: rgba(114,199,232,.1); color: #d7f0fa; border-color: rgba(114,199,232,.3); }

/* System console */
.system-console { --u-line: rgba(114,199,232,.16); }.settings-hero { background: linear-gradient(115deg, rgba(10,22,28,.98), rgba(15,18,21,.9)); }.system-status { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; color: var(--u-mint); font: 700 10px ui-monospace, monospace; letter-spacing: .1em; }.console-track { position: relative; z-index: 1; display: grid; grid-template-columns: 2fr 1fr 3fr 1fr; gap: 3px; margin-top: 24px; }.console-track span { height: 3px; background: var(--u-ice); }.console-track span:nth-child(2), .console-track span:nth-child(4) { background: var(--u-coral); }.console-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: none; margin-top: 16px; padding: 0; }.settings-section { padding: 22px; margin: 0; background: var(--u-panel); }.settings-section::before { display: none; }.settings-section:hover { transform: none; border-color: rgba(114,199,232,.32); box-shadow: inset 0 1px rgba(255,255,255,.035), 0 18px 35px rgba(0,0,0,.14); }.settings-section-title { padding-bottom: 17px; border-bottom: 1px solid rgba(114,199,232,.13); }.settings-section-title span { color: var(--u-ice); }.settings-section-title h3 { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }.settings-section-title h3::before { display: none; }.settings-item { min-height: 58px; padding: 14px 0; border-color: rgba(114,199,232,.13); }.settings-item:hover { padding-left: 0; }.settings-item label { color: #dcefed; }.settings-item label small { display: block; margin-top: 4px; color: var(--u-muted); font-size: 11px; font-weight: 400; }.settings-item > span { color: var(--u-ice); }.settings-item.toggle input[type="checkbox"] { width: 44px; height: 24px; border-radius: 3px; border-color: rgba(114,199,232,.28); background: #071012; }.settings-item.toggle input[type="checkbox"]::before { left: 3px; width: 16px; height: 16px; border-radius: 2px; background: #7b9699; }.settings-item.toggle input[type="checkbox"]:checked { background: rgba(93,224,203,.22); border-color: var(--u-mint); box-shadow: 0 0 14px rgba(93,224,203,.15); }.settings-item.toggle input[type="checkbox"]:checked::before { left: 23px; background: var(--u-mint); }.settings-section #theme-select { min-width: 148px; height: 38px; border-radius: 3px; border-color: rgba(114,199,232,.25); background-color: #071012; color: #e3f1ee; }.settings-actions { gap: 9px; margin-top: 16px; }.utility-page .btn-secondary { border-color: rgba(114,199,232,.31); background: rgba(114,199,232,.08); color: #d9f2fa; }.utility-page .btn-secondary:hover { background: rgba(114,199,232,.2); border-color: var(--u-ice); transform: none; }.utility-page .btn-danger { border-color: rgba(255,128,117,.5); background: rgba(255,128,117,.1); color: #ffb8b1; }.utility-page .btn-danger:hover { background: var(--u-coral); color: #22110f; transform: none; }.console-note { margin: 17px 0 0; color: var(--u-muted); font-size: 12px; line-height: 1.7; }.danger-zone { border-color: rgba(255,128,117,.29); background: linear-gradient(135deg, rgba(255,128,117,.07), var(--u-panel)); }.danger-zone .btn-danger { width: 100%; height: 42px; }

@keyframes utility-scan { from { transform: translateX(-130%); } to { transform: translateX(390%); } }
@media (max-width: 900px) { #module-content:has(.utility-page) { padding: 18px 16px 40px; }.utility-grid { grid-template-columns: 1fr; }.signal-panel { grid-row: auto; min-height: 0; }.console-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .utility-hero { padding: 23px 18px; }.utility-hero-row { align-items: stretch; flex-direction: column; }.utility-hero h2 { font-size: 29px; }.weather-search, .toolbox-search { width: 100%; min-width: 0; }.today-main { grid-template-columns: auto 1fr; padding: 28px 0 22px; }.today-temp { grid-column: 1 / -1; }.temp-value { font-size: 68px; }.today-details { grid-template-columns: 1fr 1fr; }.utility-panel, .signal-panel, .toolbox-category, .settings-section { padding: 17px; }.forecast-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.toolbox-tabs { grid-template-columns: 1fr; overflow: visible; }.toolbox-tab { min-height: 58px; }.toolbox-grid { grid-template-columns: 1fr; }.toolbox-card { min-height: 96px; }.lab-metrics { gap: 12px; }.settings-actions { flex-direction: column; }.utility-page .settings-actions button { width: 100%; }.settings-item { flex-direction: row; align-items: center; }.settings-item > span { max-width: 52%; text-align: right; }.settings-section #theme-select { max-width: 52%; }.tool-modal { padding: 10px; }.tool-modal-body { padding: 16px; } }
@media (prefers-reduced-motion: reduce) { .weather-scanline::after { animation: none; }.utility-page *, .utility-page *::before, .utility-page *::after { transition: none !important; } }