:root { --ink:#243330; --muted:#65736f; --canvas:#f4f7f5; --paper:#fff; --line:#dce5e1; --brand:#176f62; --brand-dark:#0e5148; --soft:#e6f2ee; }
body[data-theme="purple"] { --ink:#302838; --muted:#746b7d; --canvas:#f7f4f9; --brand:#76518d; --brand-dark:#503663; --soft:#eee6f3; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; min-width:320px; color:var(--ink); background:var(--canvas); font-family:Heebo,sans-serif; }
button,input,select { font:inherit; }
.topbar { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 max(20px,calc((100vw - 920px)/2)); color:#fff; background:var(--brand-dark); }
.top-actions { display:flex; gap:6px; }
.brand { display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; font:600 1.3rem Newsreader,serif; }
.brand-mark { width:32px; height:32px; display:grid; place-items:center; border:1px solid rgb(255 255 255 / 45%); border-radius:50%; font-family:Heebo,sans-serif; }
.icon-button { width:40px; height:40px; display:grid; place-items:center; color:inherit; border:1px solid rgb(255 255 255 / 25%); border-radius:5px; text-decoration:none; }
.icon-button svg { width:19px; }
.settings-shell { width:min(920px,calc(100% - 28px)); margin:24px auto 48px; overflow:hidden; background:var(--paper); border:1px solid var(--line); border-radius:7px; }
.page-heading { display:flex; align-items:center; justify-content:space-between; padding:24px 28px; color:#fff; background:var(--brand); }
.page-heading > svg { width:30px; height:30px; }
.eyebrow { margin:0 0 3px; font-size:.72rem; font-weight:800; opacity:.8; }.page-heading h1 { margin:0; font-size:1.7rem; letter-spacing:0; }
.settings-section { padding:26px 28px; border-bottom:1px solid var(--line); }
.section-title { display:flex; align-items:flex-start; gap:12px; margin-bottom:20px; }
.section-title > svg { width:21px; margin-top:3px; color:var(--brand); }
.section-title h2 { margin:0; font-size:1.15rem; }.section-title p { margin:2px 0 0; color:var(--muted); font-size:.83rem; }
label { display:grid; gap:6px; color:var(--ink); font-size:.84rem; font-weight:700; }
input,select { width:100%; min-height:42px; padding:8px 10px; color:var(--ink); background:#fff; border:1px solid #b9c9c4; border-radius:5px; }
input:focus,select:focus { outline:3px solid rgb(23 111 98 / 15%); border-color:var(--brand); }
input:disabled,select:disabled { background:#f0f0f0; color:#999; cursor:not-allowed; }
.field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }.coordinates { margin-top:16px; }
.location-search { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:end; }
.primary-button,.secondary-button { min-height:42px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:8px 15px; border-radius:5px; font-weight:700; cursor:pointer; }
.primary-button { color:#fff; background:var(--brand); border:0; }.secondary-button { color:var(--brand); background:var(--soft); border:1px solid #9bc4bb; }
button:disabled { cursor:wait; opacity:.6; }
button svg { width:17px; }
.search-results { display:grid; max-height:220px; margin-top:4px; overflow:auto; border:1px solid var(--line); border-radius:5px; }
.search-results:empty { display:none; }
.locality-option { display:flex; justify-content:space-between; gap:12px; padding:10px 12px; color:var(--ink); background:#fff; border:0; border-bottom:1px solid var(--line); text-align:right; cursor:pointer; }.locality-option:hover { background:#f3f8f6; }.locality-option small { color:var(--muted); }
.notification-list { display:grid; gap:0; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.notification-row { display:grid; grid-template-columns:1fr 150px 150px 130px; align-items:center; gap:10px; padding:13px 15px; border-bottom:1px solid var(--line); }.notification-row:last-child { border:0; }
.notification-text-select { width:100%; min-height:42px; padding:8px 10px; color:var(--ink); background:#fff; border:1px solid #b9c9c4; border-radius:5px; }
.notification-text-select:focus { outline:3px solid rgb(23 111 98 / 15%); border-color:var(--brand); }
.notification-custom-input { width:100%; min-height:42px; padding:8px 10px; color:var(--ink); background:#fff; border:1px solid #b9c9c4; border-radius:5px; }
.notification-custom-input:focus { outline:3px solid rgb(23 111 98 / 15%); border-color:var(--brand); }
.notification-custom-input[hidden] { display:none !important; }
.toggle-label { display:flex; align-items:center; gap:10px; }.toggle-label input { width:20px; min-height:20px; accent-color:var(--brand); }
.compact-field { max-width:220px; }
.collapsible-group { margin-top:16px; border:1px solid var(--line); border-radius:5px; overflow:hidden; }
.collapsible-toggle { width:100%; min-height:42px; display:flex; align-items:center; gap:10px; padding:10px 12px; color:var(--ink); background:var(--soft); border:0; border-bottom:1px solid var(--line); text-align:right; cursor:pointer; font-weight:600; font-size:.95rem; transition:background 0.2s; }
.collapsible-toggle:hover { background:rgb(230 242 238 / 70%); }
.collapsible-toggle svg { width:20px; height:20px; transition:transform 0.2s; }
.collapsible-toggle[aria-expanded="true"] { background:rgb(230 242 238 / 100%); border-bottom-color:transparent; }
.collapsible-toggle[aria-expanded="true"] svg { transform:rotate(-180deg); }
.collapsible-content { padding:16px 12px; background:#fff; }
.collapsible-content[hidden] { display:none !important; }
.subscription-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.subscription-option { position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:82px; padding:14px; color:var(--ink); background:#fff; border:1px solid #b9c9c4; border-radius:6px; text-align:right; cursor:pointer; }
.subscription-option:hover { border-color:var(--brand); background:#f3f8f6; }.subscription-option span { display:grid; gap:3px; }.subscription-option small { color:var(--muted); }.subscription-option b { color:var(--brand); font-size:1.15rem; }.subscription-option em { position:absolute; inset-block-start:7px; inset-inline-start:auto; inset-inline-end:8px; padding:2px 7px; color:#fff; background:var(--brand); border-radius:999px; font-size:.68rem; font-style:normal; font-weight:800; }.subscription-option.current { border:2px solid var(--brand); background:var(--brand-soft); }.featured-option { border:2px solid var(--brand); }.subscription-current { min-height:21px; margin:12px 0 0; color:var(--muted); font-size:.86rem; }.checkout-status { min-height:21px; margin:12px 0 0; color:var(--muted); font-size:.86rem; }.checkout-status[data-type="error"] { color:#a43c34; }
.save-bar { position:sticky; bottom:0; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 28px; background:#f8faf9; border-top:1px solid var(--line); }
.save-actions { display:flex; gap:8px; }
.save-bar p { min-height:22px; margin:0; color:var(--muted); font-size:.86rem; }.save-bar p[data-type="success"] { color:#27754b; }.save-bar p[data-type="error"] { color:#a43c34; }
@media(max-width:600px){ .settings-shell{width:calc(100% - 20px);margin-top:12px}.page-heading,.settings-section{padding:20px 16px}.field-grid,.subscription-options{grid-template-columns:1fr}.location-search{grid-template-columns:1fr}.notification-row{grid-template-columns:1fr 130px;gap:10px}.save-bar{padding:13px 16px;align-items:stretch;flex-direction:column}.save-actions{display:grid}.save-bar .primary-button,.save-bar .secondary-button{width:100%} }