:root{color-scheme:dark;--bg:#0f1612;--panel:#16201a;--raised:#1e2a23;--line:#2c3a32;--text:#edf2ee;--muted:#9fb0a5;--accent:#c6ee86;--ink:#172312;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}button,input,select{font:inherit}button{cursor:pointer;border:1px solid var(--line);background:var(--raised);color:var(--text);border-radius:7px;padding:10px 13px;transition:background .15s}button:hover:not(:disabled){background:#30434e}button:disabled{cursor:default;opacity:.35}button:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button.primary{background:var(--accent);border-color:var(--accent);color:var(--ink);font-weight:650}button.primary:hover:not(:disabled){background:#dafaad}button.quiet{background:transparent}input,select{background:#10191f;border:1px solid var(--line);border-radius:6px;color:var(--text);padding:10px;min-width:0;width:100%}input[type=color]{height:40px;padding:4px;cursor:pointer}input[type=range]{padding:0;accent-color:var(--accent)}input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent)}label{display:block;color:#c9d3d8;font-size:14px;margin-bottom:18px}label>input,label>select{margin-top:8px}label.check{display:flex;align-items:center;justify-content:space-between}label.check input{margin:0}label output{float:right;color:var(--muted)}.topbar{height:76px;display:flex;align-items:center;padding:0 24px;border-bottom:1px solid var(--line);gap:30px}.brand{color:var(--text);text-decoration:none;display:flex;align-items:center;font-size:22px;font-weight:700;letter-spacing:-.8px;white-space:nowrap}.brand svg{width:31px;height:31px;stroke:var(--accent);stroke-width:1.8;fill:none;margin-right:10px}.brand>span{font-weight:350}.brand small{font-size:10px;letter-spacing:1.8px;color:var(--muted);border-left:1px solid var(--line);margin-left:20px;padding-left:20px;font-weight:500}.project{margin-right:auto;border-left:1px solid var(--line);padding-left:25px;min-width:120px}.project input{border:0;background:transparent;padding:0 0 4px;font-weight:600}.project span{font-size:12px;color:var(--muted)}.top-actions{display:flex;gap:8px}.workspace{display:grid;grid-template-columns:80px minmax(0,1fr) 290px;grid-template-rows:minmax(0,1fr);height:calc(100vh - 76px);height:calc(100dvh - 76px);min-height:520px}.tools{border-right:1px solid var(--line);display:flex;align-items:center;flex-direction:column;padding:18px 7px;gap:9px;min-height:0;overflow-x:hidden;overflow-y:auto}.tool{position:relative;border:0;background:transparent;width:66px;padding:8px 2px;font-size:12px;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:5px}.tool span{font-size:25px;height:29px;font-weight:400}.tool.active{color:var(--accent);background:#27352b;box-shadow:inset 2px 0 var(--accent)}.tool kbd{display:none}.tool-separator{height:1px;background:var(--line);width:30px;margin:8px 0}.tool.help{margin-top:auto}.center{display:flex;flex-direction:column;min-width:0;min-height:0}.canvas-bar{height:69px;flex-shrink:0;display:flex;align-items:center;padding:12px 22px;gap:20px;border-bottom:1px solid var(--line)}.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:650;color:var(--muted)}.canvas-bar strong{display:block;font-size:14px;margin-top:5px;max-width:28vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.canvas-bar #dimensions{font-size:12px;color:var(--muted);margin-left:auto}.zoom{display:flex;align-items:center;gap:2px}.zoom button{background:transparent;border:0;padding:7px 10px}.zoom output{font:12px monospace;min-width:40px;text-align:center}.viewport{flex:1;min-height:100px;overflow:auto;position:relative;background:#0b1116;background-image:radial-gradient(#26323a 1px,transparent 1px);background-size:20px 20px;display:flex;align-items:flex-start}.empty{margin:auto;text-align:center;padding:35px 20px}.empty-symbol{border:1px solid #50633d;border-radius:50%;width:59px;height:59px;font-size:31px;color:var(--accent);display:grid;place-items:center;margin:0 auto 30px}.empty .eyebrow{color:var(--accent)}h1{font-size:clamp(30px,3.3vw,52px);font-weight:500;letter-spacing:-2px;line-height:1.12;margin:17px 0}.empty>p:not(.eyebrow){font-size:16px;line-height:1.65;color:var(--muted);margin:20px 0 27px}.empty>span{display:block;margin-top:18px;font-size:12px;color:var(--muted)}#canvas-wrap{flex-shrink:0;margin:auto;padding:32px;line-height:0}canvas{display:block;touch-action:none;box-shadow:0 10px 40px #0007}#drop-overlay{position:absolute;inset:12px;border:2px dashed var(--accent);border-radius:12px;background:#14221def;z-index:10;place-content:center;text-align:center;font-size:20px;pointer-events:none}#drop-overlay:not([hidden]){display:grid}.canvas-status{min-height:37px;display:flex;align-items:center;gap:10px;padding:6px 18px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}.canvas-status button{font-size:12px;padding:3px 7px;color:var(--accent)}.local-note{margin-left:auto;font-size:9px;letter-spacing:1.3px;white-space:nowrap}.filmstrip{height:125px;display:flex;align-items:center;gap:15px;padding:16px 20px;border-top:1px solid var(--line);flex-shrink:0}.add-tile{height:83px;width:105px;flex-shrink:0;border-style:dashed;background:transparent;font-size:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}.add-tile span{font-size:22px}.photos{display:flex;gap:12px;overflow:auto;min-width:0;height:100px;align-items:center}.photo{width:112px;flex-shrink:0;padding:0;background:none;border:2px solid transparent;text-align:left;position:relative}.photo img{width:108px;height:62px;object-fit:cover;border-radius:4px;display:block}.photo.active{border-color:var(--accent)}.photo small{display:block;font-size:10px;padding:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.photo .badge{position:absolute;top:4px;left:4px;background:#0f1612e0;padding:2px 5px;border-radius:3px;font-size:10px}#photo-count{margin-left:auto;font-size:12px;color:var(--muted);white-space:nowrap}.inspector{background:var(--panel);border-left:1px solid var(--line);overflow:auto;display:flex;flex-direction:column}.panel-heading{display:flex;align-items:center;justify-content:space-between;padding:23px 20px 18px}.panel-heading h2{font-size:15px;margin:0;font-weight:600}.panel-heading>span{font-size:12px;color:var(--muted);background:var(--raised);padding:3px 7px;border-radius:4px}.layers{padding:0 10px 15px;max-height:235px;min-height:105px;overflow:auto}.layers .muted{padding:0 10px;font-size:14px;line-height:1.65}.muted{color:var(--muted)}.layer{display:flex;align-items:center;gap:10px;width:100%;background:transparent;border-color:transparent;text-align:left;margin-bottom:3px;padding:10px;font-size:14px}.layer.active{background:var(--raised);border-color:#455a68}.layer .layer-icon{display:grid;place-items:center;color:var(--text);width:20px;height:22px;flex-shrink:0}.layer .layer-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer small{font-size:10px;color:var(--muted);margin-left:auto}.inspector-heading{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:15px 20px}.properties{padding:20px}.properties h3{font-size:23px;line-height:1.35;letter-spacing:-.5px;font-weight:450;margin:18px 0}.tip>span{font:10px monospace;color:var(--accent);letter-spacing:1px}.tip p,.panel-bottom p{color:var(--muted);font-size:14px;line-height:1.7}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.danger{color:#ffb4a8;background:transparent;width:100%;margin-top:10px}.section-label{font-size:10px;letter-spacing:1.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:18px;margin:6px 0 18px}.panel-bottom{padding:20px;margin-top:auto;border-top:1px solid var(--line)}.panel-bottom>span{font-size:9px;letter-spacing:1.5px;color:var(--muted)}.panel-bottom p{font-size:12px;margin-bottom:0}dialog{background:var(--panel);color:var(--text);border:1px solid #445862;border-radius:14px;width:min(460px,calc(100vw - 32px));padding:25px;max-height:90vh;max-height:90dvh;overflow:auto;box-shadow:0 30px 100px #0009}dialog::backdrop{background:#050a10bb;backdrop-filter:blur(5px)}dialog header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}dialog h2{font-size:22px;margin:0}dialog p,dialog dd{font-size:14px;color:var(--muted);line-height:1.6}dialog p{margin-bottom:24px}dialog dt{margin-top:18px;color:var(--accent)}dialog dd{margin:6px 0}.icon-button{background:none;border:0;font-size:25px;padding:0 6px}.wide{width:100%}/* Above the filmstrip, so a message never hides the photos it is about. */
.toast{position:fixed;bottom:141px;left:50%;transform:translateX(-50%);background:#edf2f3;color:#132019;border-radius:8px;padding:12px 20px;z-index:50;box-shadow:0 6px 25px #0007;max-width:calc(100vw - 30px)}[hidden]{display:none!important}@media(max-width:1100px){.brand small{display:none}.topbar{gap:18px;padding:0 15px}.project{padding-left:15px}.workspace{grid-template-columns:70px minmax(0,1fr) 240px}.canvas-bar{padding:12px;gap:8px}.local-note,#dimensions{display:none}.tool{width:58px}.properties{padding:16px}}@media(max-width:760px){.topbar{height:auto;min-height:110px;flex-wrap:wrap;gap:12px;padding:14px}.brand{font-size:20px}.project{flex:1}.top-actions{width:100%}.top-actions>button{flex:1;padding:8px}.workspace{height:auto;min-height:calc(100dvh - 110px);grid-template-columns:55px minmax(0,1fr);grid-template-rows:none}.tools{grid-row:1 / 3;padding:12px 3px}.tool{width:48px;font-size:10px}.center{height:70vh;height:70dvh;min-height:480px}.inspector{grid-column:2;border-top:1px solid var(--line);border-left:0;max-height:none}.canvas-bar strong{max-width:42vw}.canvas-bar{height:62px}.canvas-bar .eyebrow{font-size:9px}.zoom button{padding:5px}.zoom output{font-size:10px;min-width:29px}.canvas-status{font-size:10px;padding:6px 10px}.filmstrip{height:108px;padding:10px;gap:10px}.filmstrip #photo-count{display:none}.empty{padding:20px 12px}.empty-symbol{margin-bottom:20px}.empty p br{display:none}.empty>p:not(.eyebrow){font-size:14px}.empty>span{font-size:10px}.empty .eyebrow{font-size:9px}#canvas-wrap{padding:14px}.layers{max-height:170px}.panel-bottom{display:none}.field-row{grid-template-columns:1fr 1fr}}

/* Editable swatches and export naming controls. */
.color-field { margin-bottom: 18px; color: #c9d3d8; }
.color-field > span { display: block; margin-bottom: 8px; }
.color-inputs { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; }
.color-inputs input[type="text"] { font-family: ui-monospace, monospace; letter-spacing: .04em; }
input[aria-invalid="true"] { border-color: #ffb4a8; }
input:disabled, select:disabled { opacity: .5; cursor: not-allowed; }
dialog .field-help { font-size: 12px; line-height: 1.55; margin: -7px 0 19px; }
.filename-preview { background: #10191f; border: 1px solid var(--line); border-radius: 7px; padding: 12px; margin: 0 0 14px; }
.filename-preview output { display: block; font-family: ui-monospace, monospace; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 7px; line-height: 1.7; }
dialog .field-error { color: #ffb4a8; font-size: 13px; margin: 0 0 14px; }
dialog .field-error:empty { display: none; }

/* Separate sibling buttons keep row selection and deletion independently accessible. */
.layer-row { display: flex; align-items: center; gap: 2px; border: 1px solid transparent; border-radius: 7px; margin-bottom: 3px; }
.layer-row.active { background: var(--raised); border-color: #455a68; }
.layer-row .layer { flex: 1; min-width: 0; width: auto; margin: 0; padding-right: 3px; }
.layer-row .layer small { flex-shrink: 0; }
.layer-delete { flex: 0 0 32px; width: 32px; height: 34px; margin-right: 3px; padding: 0; border: 0; background: transparent; color: #ff9292; font-size: 23px; line-height: 1; }
.layer-delete:hover:not(:disabled), .layer-delete:focus-visible { background: #62333b; color: #ffd2d2; }
.marker-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:16px}.marker-choice{display:flex;align-items:center;flex-direction:column;padding:4px;font-size:12px;min-width:0}.marker-choice canvas{width:36px;height:36px}.marker-choice[aria-pressed=true],.asset-choice[aria-pressed=true]{border-color:var(--lime,#c6ee86);background:#2c3d32}.asset-library{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0;max-height:260px;overflow:auto}.asset-choice{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px;min-width:0}.asset-choice img{width:100%;height:58px;object-fit:contain;background:repeating-conic-gradient(#d7dde1 0% 25%,#fff 0% 50%) 50%/16px 16px}.asset-choice span{font-size:12px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#brand-preview{display:block;max-width:100%;height:auto;margin:18px auto;border-radius:6px}#export-dialog{max-height:90vh;max-height:90dvh;overflow:auto}#marker-editor{border-top:1px solid #30434e;margin-top:20px}
.projects-dialog{width:min(1080px,94vw);max-width:1080px;max-height:92vh;max-height:92dvh;overflow:auto}.projects-dialog h2{font-size:28px;margin:5px 0}.account-panel{display:flex;align-items:center;justify-content:space-between;gap:20px;background:#10191f;padding:16px;border-radius:8px;margin:20px 0}.account-panel p{margin:0;color:#aabcc4;font-size:14px}.project-tools{display:grid;grid-template-columns:1fr 200px auto;align-items:end;gap:14px}.project-tools label{margin:0}.project-tools button{height:43px}.project-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:22px 0}.project-card{padding:20px;background:#14222b;border:1px solid #30434e;border-radius:10px;min-width:0}.project-card h3{font-size:18px;margin:12px 0 8px;overflow-wrap:anywhere}.project-card p{font-size:14px;line-height:1.5;margin:8px 0}.project-card .status{font-size:12px;background:#263831;color:#c6ee86;padding:4px 8px;border-radius:4px}.project-card .card-actions{display:flex;gap:8px;margin-top:16px}.project-card .card-actions button{flex:1}textarea{resize:vertical;width:100%;padding:12px;color:inherit;background:#10191f;border:1px solid #30434e;border-radius:6px;font:inherit}.project-empty{grid-column:1/-1;padding:48px 20px;text-align:center;border:1px dashed #30434e;color:#aabcc4}#project-details-dialog{width:min(620px,94vw);max-width:620px;max-height:90vh;max-height:90dvh;overflow:auto}@media(max-width:800px){.project-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.project-tools{grid-template-columns:1fr 1fr}.project-tools button{grid-column:1/-1}.top-actions{flex-wrap:wrap}}@media(max-width:500px){.project-cards{grid-template-columns:1fr}.account-panel{align-items:start;flex-direction:column}}

/* Keep account identity visible without competing with editing controls. */
.account-button{display:flex;align-items:center;gap:10px;text-align:left;flex-shrink:0;background:transparent;padding:7px 10px}.account-copy{display:grid;gap:3px;max-width:150px}.account-copy strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.account-copy small{font-size:12px;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#account-initials{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#30432c;color:var(--accent);font-size:14px;font-weight:650}.settings-dialog{width:min(540px,calc(100vw - 32px))}.settings-identity{display:flex;gap:12px;align-items:center;padding:16px;background:var(--bg);border:1px solid var(--line);border-radius:8px}.settings-identity strong,.settings-identity span#settings-email{display:block;overflow-wrap:anywhere}.settings-identity span#settings-email{color:var(--muted);margin-top:5px}.signed-in-dot{height:9px;width:9px;border-radius:50%;background:var(--accent);flex-shrink:0}.settings-actions{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:18px}#settings-message{min-height:22px}.topbar{gap:16px}.top-actions{flex-wrap:wrap}@media(min-width:761px) and (max-width:1250px){.brand small{display:none}.account-copy{max-width:105px}.top-actions{gap:5px}.top-actions button{padding:8px}.project{max-width:160px}.topbar{height:auto;min-height:90px;padding-top:8px;padding-bottom:8px}.workspace{height:calc(100vh - 90px);height:calc(100dvh - 90px)}}@media(max-width:760px){.top-actions{order:4}.account-copy{max-width:105px}.account-button{margin-left:auto}.project{min-width:90px}.settings-dialog .field-row{grid-template-columns:1fr;gap:0}}

.palette-swatches{display:flex;gap:6px;margin:-8px 0 12px}.palette-swatches span{height:20px;flex:1;border:1px solid #ffffff40;border-radius:4px}#location-icon-preview{width:72px;height:72px;box-shadow:none;margin:0 auto 18px}

/* Subscription tab and sandbox billing panel. */
.subscription-tab{white-space:nowrap}.subscription-tab span{color:var(--accent);font-size:11px;margin-left:5px}.subscription-dialog{width:min(530px,calc(100vw - 28px));max-width:530px}.billing-test-note{display:flex;gap:12px;align-items:center;padding:12px;border:1px solid #574b2f;background:#29251c;border-radius:8px;font-size:12px;color:#eee0b9}.billing-test-badge{font-size:10px;letter-spacing:1px;font-weight:750;color:#ffd77f}.billing-plan{margin:22px 0;border:1px solid #4c6243;background:linear-gradient(150deg,#26362a,#16201a 65%);border-radius:12px;padding:24px}.billing-price{font-size:58px;line-height:1.15;font-weight:700;letter-spacing:-2px;margin:14px 0}.billing-price span{font-size:14px;font-weight:400;letter-spacing:0;color:var(--muted);margin-left:10px}.billing-plan ul{padding-left:20px;line-height:1.65}.billing-plan li{padding:4px 0}.billing-plan .billing-terms{font-size:12px;color:var(--muted);margin:18px 0 0}.billing-status-row{display:flex;justify-content:space-between;gap:15px}.billing-status-row strong{color:var(--accent)}#billing-message{min-height:20px;color:#ffd77f}#billing-manage,#billing-refresh{margin-top:10px}.billing-test-help{font-size:12px;line-height:1.6;margin-top:20px;color:var(--muted)}.billing-test-help summary{cursor:pointer}.billing-test-help strong{color:var(--text)}
#billing-detail{margin:10px 0 18px;line-height:1.55}#billing-detail:empty{display:none}

/* The editor opens in a light workspace. Setting data-theme="dark" on html
   restores the original dark palette above, including its canvas surrounds. */
:root:not([data-theme="dark"]){
  color-scheme:light;
  --bg:#f7f9f6;
  --panel:#fff;
  --raised:#eef3ec;
  --line:#d5dfd2;
  --text:#203028;
  --muted:#617368;
  --accent:#4d7d25;
  --ink:#fff;
}
:root:not([data-theme="dark"]) button:hover:not(:disabled){background:#e2eddd}
:root:not([data-theme="dark"]) button.primary:hover:not(:disabled){background:#3d681b}
:root:not([data-theme="dark"]) input,
:root:not([data-theme="dark"]) select,
:root:not([data-theme="dark"]) textarea{background:#fff}
:root:not([data-theme="dark"]) label,
:root:not([data-theme="dark"]) .color-field{color:#33453a}
:root:not([data-theme="dark"]) .tool.active{background:#e3f0d9}
:root:not([data-theme="dark"]) .viewport{background:#edf2ed;background-image:radial-gradient(#cdd9cf 1px,transparent 1px)}
:root:not([data-theme="dark"]) .empty-symbol{border-color:#a9c49a}
:root:not([data-theme="dark"]) canvas{box-shadow:0 10px 36px #2434292b}
:root:not([data-theme="dark"]) #drop-overlay{background:#edf5e9f2}
:root:not([data-theme="dark"]) .photo .badge{background:#203028e8;color:#fff}
:root:not([data-theme="dark"]) .layer.active,
:root:not([data-theme="dark"]) .layer-row.active{border-color:#a8c5a1}
:root:not([data-theme="dark"]) .danger,
:root:not([data-theme="dark"]) dialog .field-error{color:#b02d39}
:root:not([data-theme="dark"]) input[aria-invalid="true"]{border-color:#b02d39}
:root:not([data-theme="dark"]) dialog{border-color:var(--line);box-shadow:0 25px 80px #20302833}
:root:not([data-theme="dark"]) dialog::backdrop{background:#15241a85}
:root:not([data-theme="dark"]) dialog dt{color:var(--accent)}
:root:not([data-theme="dark"]) .toast{background:#203028;color:#fff;box-shadow:0 6px 24px #20302833}
:root:not([data-theme="dark"]) .filename-preview,
:root:not([data-theme="dark"]) .account-panel{background:#f4f7f2}
:root:not([data-theme="dark"]) .account-panel p,
:root:not([data-theme="dark"]) .project-empty{color:var(--muted)}
:root:not([data-theme="dark"]) .layer-delete{color:#b02d39}
:root:not([data-theme="dark"]) .layer-delete:hover:not(:disabled),
:root:not([data-theme="dark"]) .layer-delete:focus-visible{background:#fce4e6;color:#8a1723}
:root:not([data-theme="dark"]) .marker-choice[aria-pressed=true],
:root:not([data-theme="dark"]) .asset-choice[aria-pressed=true]{border-color:var(--accent);background:#e3f0d9}
:root:not([data-theme="dark"]) #marker-editor{border-color:var(--line)}
:root:not([data-theme="dark"]) .project-card{background:#fff;border-color:var(--line)}
:root:not([data-theme="dark"]) .project-card .status{background:#e8f3df;color:#426d20}
:root:not([data-theme="dark"]) textarea{border-color:var(--line)}
:root:not([data-theme="dark"]) .project-empty{border-color:var(--line)}
:root:not([data-theme="dark"]) #account-initials{background:#e5f0db;color:var(--accent)}
:root:not([data-theme="dark"]) .billing-test-note{border-color:#e4d4aa;background:#fff8e8;color:#70521b}
:root:not([data-theme="dark"]) .billing-test-badge{color:#8d6010}
:root:not([data-theme="dark"]) .billing-plan{border-color:#bbd0b0;background:linear-gradient(150deg,#f0f7e9,#fff 68%)}
:root:not([data-theme="dark"]) #billing-message{color:#8d6010}

/* Keep the pricing preview honest while checkout and access remain in sandbox. */
.subscription-dialog{width:min(780px,calc(100vw - 28px));max-width:780px}
.billing-overview{display:grid;gap:8px;margin:18px 0 20px;padding:15px 18px;background:var(--raised);border:1px solid var(--line);border-radius:9px}
.billing-overview .billing-status-row{align-items:baseline}
.billing-overview .billing-status-row strong{text-align:right}
.billing-overview #billing-detail{margin:4px 0 0}
.billing-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.billing-option{display:flex;flex-direction:column;min-width:0;padding:22px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);text-align:left;line-height:1.45;transition:border-color .15s,box-shadow .15s,transform .15s}
.billing-option[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.billing-option:hover:not(:disabled){border-color:var(--accent);background:var(--raised)}
.billing-option-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:22px}
.billing-option-heading .eyebrow{font-size:10px;letter-spacing:1.2px}
.billing-current-badge{flex-shrink:0;border-radius:100px;padding:4px 8px;background:var(--accent);color:var(--ink);font-size:10px;font-weight:700}
.billing-current-badge[hidden]{display:none}
.billing-option-title{font-size:23px;font-weight:700;line-height:1.2;margin:18px 0 0}
.billing-option .billing-price{font-size:46px;margin:7px 0 13px;line-height:1.1}
.billing-option .billing-price span{font-size:13px}
.billing-option-description{color:var(--muted);margin:0 0 14px;min-height:44px}
.billing-option-list{display:grid;gap:2px;margin:0 0 20px}
.billing-option-list [role="listitem"]{position:relative;padding:5px 0 5px 19px}
.billing-option-list [role="listitem"]::before{content:'✓';position:absolute;left:0;color:var(--accent);font-weight:800}
.billing-option-action{display:block;width:100%;margin-top:auto;padding:10px 12px;border:1px solid var(--line);border-radius:7px;background:var(--raised);font-weight:700;text-align:center}
.billing-option-featured .billing-option-action{border-color:var(--accent);background:var(--accent);color:var(--ink)}
.billing-credit-note{margin:18px 0 10px;padding:11px 14px;border:1px dashed var(--line);border-radius:8px;background:var(--raised)}
.billing-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin:12px 0}
.billing-actions #billing-manage,.billing-actions #billing-refresh{margin-top:0}
.subscription-dialog #billing-message{margin:10px 0;min-height:0}
.subscription-dialog #billing-message:empty{display:none}
:root:not([data-theme="dark"]) .billing-option:hover:not(:disabled){background:#f2f7ef}
.billing-confirm-dialog{width:min(440px,calc(100vw - 32px))}
.billing-confirm-dialog h2{font-size:22px;margin:0 0 12px}
.billing-confirm-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px}
@media(max-width:620px){.billing-options{grid-template-columns:1fr}.billing-option{padding:18px}}

/* Distinct, compact section starts in the narrow editor inspector and dialogs. */
.section-label{margin:24px 0 14px;padding:10px 11px;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:7px;background:var(--raised);color:var(--text);font-size:11px;font-weight:800;letter-spacing:.8px;line-height:1.4}
.properties>.section-label:first-child{margin-top:0}
#marker-editor{border-top:0;margin-top:2px}

/* Details cards follow the supplied section-card design in both themes. */
.properties{--card-surface:#192630;--card-header:#243440;--card-border:#435967;--card-input:#101b23;--card-hover:#2c404d;display:grid;gap:22px;align-content:start;padding:18px 12px}
:root:not([data-theme="dark"]) .properties{--card-surface:#ffffff;--card-header:#edf2f6;--card-border:#c5d1db;--card-input:#f7f9fb;--card-hover:#e2eaf0}
.property-section{min-width:0;border:1px solid var(--card-border);border-radius:12px;background:var(--card-surface)}
.property-section>summary{padding:15px 13px;border-radius:11px;background:var(--card-header);color:var(--text);font-size:15px;font-weight:650;line-height:1.4;cursor:pointer}
.property-section[open]>summary{border-bottom:1px solid var(--card-border);border-radius:11px 11px 0 0}
.property-section>summary::marker{color:var(--accent)}
.property-section>summary:hover{background:var(--card-hover)}
.property-section>summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.property-section-content{padding:16px 13px;display:grid;gap:16px;min-width:0}
.property-section-content>label,.property-section-content>.color-field{margin:0;color:var(--muted);font-size:13px;line-height:1.45;min-width:0}
.property-section-content label>input:not([type=checkbox]),.property-section-content label>select,.property-section-content label>textarea{margin-top:7px}
.property-section-content input:not([type=range]):not([type=checkbox]),.property-section-content select,.property-section-content textarea{background:var(--card-input);border-color:var(--card-border);min-height:42px}
.property-section-content #prop-label{display:block;padding:10px;line-height:1.5;resize:vertical;white-space:pre-wrap}
.property-section-content #prop-label:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.property-section-content #prop-lineAttachment{appearance:none}
.annotation-clipboard{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 12px 12px}
.annotation-clipboard button{min-width:0;min-height:44px;padding:8px 10px;font-size:13px;font-weight:650;background:linear-gradient(160deg,color-mix(in srgb,var(--raised) 90%,white),var(--raised));box-shadow:inset 0 1px 0 #ffffff15,0 2px 0 #0000001a}
.annotation-clipboard #paste-pin:not(:disabled){background:linear-gradient(160deg,#526fff,#315cff);border-color:#7893ff;color:#fff;box-shadow:inset 0 1px 0 #ffffff40,0 3px 0 #203aaf}
.annotation-clipboard #paste-pin:hover:not(:disabled){background:linear-gradient(160deg,#647eff,#4168ff)}
.property-section-content .color-inputs{display:flex;align-items:center;gap:8px;padding:4px 8px;min-height:42px;margin-top:7px;border:1px solid var(--card-border);border-radius:7px;background:var(--card-input)}
.property-section-content .color-inputs input[type=color]{flex:0 0 30px;width:30px;height:30px;min-height:30px;padding:2px;border:0;background:transparent}
.property-section-content .color-inputs input[type=text]{flex:1 1 70px;width:100%;min-width:0;min-height:30px;padding:4px 0;border:0;background:transparent;color:var(--text);font-size:13px;text-transform:uppercase}
.property-section-content .color-inputs:focus-within{border-color:var(--accent)}
.property-section-content .field-help{margin:0;font-size:12px;line-height:1.55;color:var(--muted)}
.property-section-content>.property-subheading{margin:4px 0 0;padding-top:14px;border-top:1px solid var(--line);color:var(--text);font-size:13px;font-weight:650;line-height:1.45}
.property-section-content .marker-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin:0}
.property-section-content .palette-swatches{margin:0}
.property-section-content #location-icon-preview{margin:0 auto}
.property-section-content .custom-location-icons{display:grid;gap:12px;padding:13px;border:1px solid var(--card-border);border-radius:10px;background:var(--card-input);box-shadow:inset 0 1px 0 #ffffff0d,0 2px 0 #00000012}
.custom-location-icons h4{margin:0;color:var(--text);font-size:13px;font-weight:700}
.custom-location-icons label{margin:0;font-size:12px;color:var(--muted);min-width:0}
.custom-location-icons button{min-height:42px;white-space:normal}
.custom-location-icons .link-button{padding:5px 0;text-align:left;font-size:12px;color:var(--muted)}
.custom-location-icons #location-icon-status{color:var(--text);overflow-wrap:anywhere}
.property-section-content #location-icon-preview{width:96px;height:96px;justify-self:center}
#location-icon-preview[data-custom="true"]{border:1px solid var(--card-border);border-radius:10px;background:repeating-conic-gradient(#8b92a214 0% 25%,transparent 0% 50%) 50%/16px 16px}
.properties #marker-editor{margin:0;border:0;min-width:0}
.property-actions{display:grid;gap:10px}
.property-actions .danger{margin:0;width:100%}



.photo-edit-intro h2{font-size:18px;margin:0 0 8px}.photo-edit-intro p{margin:0;color:var(--muted);font-size:12px;line-height:1.6}
.photo-edit-actions{display:flex;gap:6px}.photo-edit-actions button{flex:1;font-size:11px;padding:9px 5px;line-height:1.4}
.photo-edit-actions button[aria-pressed="true"]{border-color:var(--accent);color:var(--text);background:var(--card-header)}
.photo-adjustment>label{font-size:13px;color:var(--text);margin:0 0 8px}.photo-adjustment>label{display:flex;align-items:center;gap:9px}.adjustment-icon{display:inline-grid;place-items:center;flex-shrink:0;width:26px;height:26px;border-radius:8px;background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent)}.adjustment-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.adjustment-icon{--tone:var(--accent);background:color-mix(in srgb,var(--tone) 17%,transparent);color:var(--tone)}
.adjustment-icon[data-adjust=exposure]{--tone:#e0901b}.adjustment-icon[data-adjust=brightness]{--tone:#e7b417}.adjustment-icon[data-adjust=contrast]{--tone:#6a73d9}.adjustment-icon[data-adjust=highlights]{--tone:#f08c3a}.adjustment-icon[data-adjust=shadows]{--tone:#7458d6}.adjustment-icon[data-adjust=warmth]{--tone:#e5632f}.adjustment-icon[data-adjust=tint]{--tone:#b04fb4}.adjustment-icon[data-adjust=saturation]{--tone:#e0475f}.adjustment-icon[data-adjust=vibrance]{--tone:#9b5de5}
.adjustment-icon[data-adjust=whites]{background:#3a4652;color:#ffffff}.adjustment-icon[data-adjust=blacks]{background:#e6eaee;color:#11161b}
.photo-adjustment>label{cursor:default;user-select:none}
.adjustment-track{position:relative;display:block;min-width:0}
.adjustment-track::after{content:"";position:absolute;left:50%;top:1px;width:2px;height:5px;margin-left:-1px;border-radius:1px;background:var(--muted);opacity:.6;pointer-events:none}
.photo-adjustment-inputs .adjustment-range{-webkit-appearance:none;appearance:none;display:block;width:100%;height:24px;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;cursor:pointer}
.adjustment-range:focus{outline:none}
.adjustment-range::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:var(--track);box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),inset 0 1px 2px rgba(0,0,0,.25)}
.adjustment-range::-moz-range-track{height:6px;border-radius:999px;background:var(--track);box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),inset 0 1px 2px rgba(0,0,0,.25)}
.adjustment-range::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-5px;border-radius:50%;background:#fff;border:1px solid rgba(0,0,0,.22);box-shadow:0 1px 3px rgba(0,0,0,.35),0 0 0 3px rgba(255,255,255,.12);transition:transform .12s ease,box-shadow .12s ease}
.adjustment-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:1px solid rgba(0,0,0,.22);box-shadow:0 1px 3px rgba(0,0,0,.35),0 0 0 3px rgba(255,255,255,.12);transition:transform .12s ease,box-shadow .12s ease}
.adjustment-range:hover::-webkit-slider-thumb{transform:scale(1.12)}.adjustment-range:hover::-moz-range-thumb{transform:scale(1.12)}
.adjustment-range:focus-visible::-webkit-slider-thumb{box-shadow:0 1px 3px rgba(0,0,0,.35),0 0 0 4px color-mix(in srgb,var(--accent) 45%,transparent)}
.adjustment-range:focus-visible::-moz-range-thumb{box-shadow:0 1px 3px rgba(0,0,0,.35),0 0 0 4px color-mix(in srgb,var(--accent) 45%,transparent)}
.photo-adjustment-inputs{display:grid;grid-template-columns:minmax(0,1fr) 58px;gap:10px;align-items:center}
.photo-adjustment-inputs input[type=number]{padding:5px;text-align:center;min-height:34px;font-size:12px}
.photo-adjustment-inputs input[type=range]{height:24px}
#photo-adjustments>.field-help{font-size:12px;color:var(--muted);line-height:1.55;margin:0}
.photo-tile{transition:transform 220ms cubic-bezier(.2,.8,.2,1),opacity 150ms}
.photos.is-reordering{overflow-y:clip}.photos.is-reordering .photo-tile{will-change:transform}
.photos .photo-tile.dragging{opacity:.18}
.photo-tile.pointer-drag{opacity:1;z-index:3;transition:none;filter:drop-shadow(0 8px 12px #0005)}
@media(prefers-reduced-motion:reduce){.photo-tile{transition:none}}
.address-field{position:relative;margin-bottom:16px}.address-field>label{margin:0}
.address-suggestions{position:absolute;z-index:5;top:100%;left:0;right:0;margin-top:4px;padding:5px;border:1px solid var(--line);border-radius:8px;background:var(--panel);box-shadow:0 8px 24px #0003;max-height:220px;overflow:auto}
.address-suggestions button{display:block;width:100%;border:0;background:transparent;text-align:left;line-height:1.5;font-size:13px;border-radius:5px;padding:10px}
.address-suggestions button[aria-selected=true]{background:var(--raised);outline:1px solid var(--accent);outline-offset:-1px}
@media(max-width:760px){.canvas-bar{flex-wrap:wrap;height:auto;min-height:0;gap:7px;padding:8px 10px}.canvas-bar>div:first-child{flex:1 1 0;min-width:0}.canvas-bar strong{max-width:none}.canvas-bar>.zoom{margin-left:auto}}
@media(pointer:coarse){.property-section-content .color-inputs input[type=color]{flex-basis:40px;width:40px;height:40px}.property-section-content .check{min-height:44px}.property-section-content input:not([type=range]),.property-section-content select{font-size:16px}}
/* Photo controls stay visible in both themes, with insertion guides while dragging. */
.photo-tile{position:relative;flex:0 0 112px;border-radius:7px;cursor:grab}
.photo-tile.dragging{opacity:.45;cursor:grabbing}
.photo-tile.drop-before::before,.photo-tile.drop-after::after{content:"";position:absolute;top:0;bottom:0;width:3px;background:var(--accent);border-radius:3px}
.photo-tile.drop-before::before{left:-7px}.photo-tile.drop-after::after{right:-7px}
.photo-delete{position:absolute;right:4px;top:4px;width:23px;height:23px;padding:0;border:1px solid #fff6;border-radius:5px;background:#2a151beF;color:#ffb4b4;font-size:19px;line-height:1;display:grid;place-items:center}
.photo-delete:hover:not(:disabled){background:#a72d3b;color:#fff}
.photo-tile .photo small{padding-right:23px}
.photo-grip{position:absolute;right:4px;bottom:3px;width:20px;height:20px;padding:0;border:0;background:transparent;color:var(--muted);font-size:19px;cursor:grab;touch-action:none}
.photo-grip:active{cursor:grabbing}
.toast{display:flex;align-items:center;gap:16px}.toast button{background:#172312;color:#fff;padding:5px 10px;font-weight:650}
.pin-color-scope{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px}
.pin-color-scope button{font-size:12px;padding:9px 7px;line-height:1.4;background:transparent}
.pin-color-scope button[aria-pressed="true"]{background:var(--accent);color:var(--ink);border-color:var(--accent);font-weight:650}
/* Four plans and an account credit balance. */
.subscription-dialog{width:min(1060px,calc(100vw - 32px));max-width:1060px;max-height:92vh;max-height:92dvh;overflow:auto}
.billing-intro{font-size:16px;line-height:1.6;margin:0 0 20px}
.billing-options{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.billing-option{padding:18px;font-size:14px}
.billing-option-heading{flex-wrap:wrap;align-content:flex-start;min-height:48px}
.billing-option-heading .eyebrow{font-size:12px;letter-spacing:.06em}
.billing-current-badge{font-size:12px}
.billing-option .billing-price{font-size:42px;white-space:nowrap}
.billing-option .billing-price span{display:block;margin:6px 0 0;font-size:14px}
.billing-option-description{min-height:60px;font-size:14px}
.billing-option-title{margin-top:8px}
.billing-option-list{gap:4px}
.billing-option-action{font-size:14px;padding:10px 6px}
.billing-test-note,.billing-test-help{font-size:14px;line-height:1.6}
.billing-test-badge{font-size:12px}
.billing-topups{display:flex;gap:20px;align-items:center;justify-content:space-between;padding:20px;margin:20px 0 0;border:1px solid var(--line);border-radius:12px;background:var(--raised)}
.billing-topups h3{font-size:18px;margin:0 0 6px}
.billing-topups p{margin:0;line-height:1.5}
.billing-purchase{display:grid;gap:8px;flex:0 1 400px;min-width:280px}
.billing-purchase-heading{display:flex;gap:16px;justify-content:space-between;align-items:center}
.billing-purchase-heading label{display:flex;gap:12px;align-items:center;margin:0;font-size:14px;color:var(--text)}
.billing-purchase-heading input{width:92px;margin:0;background:var(--panel);color:var(--text);border-color:var(--line)}
.billing-purchase-total{display:grid;gap:3px;text-align:right;color:var(--muted);font-size:14px}
.billing-purchase-total strong{font-size:20px;color:var(--text)}
#billing-credit-slider{width:100%;margin:8px 0 0;accent-color:var(--accent);cursor:pointer}
.billing-slider-limits{display:flex;justify-content:space-between;color:var(--muted);font-size:14px}
#billing-buy-credits{width:100%;margin-top:4px}
#billing-credit-minimum{margin-top:8px;font-size:14px}
.export-credit-summary{display:grid;gap:8px;padding:16px;border:1px solid var(--line);border-radius:9px;background:var(--raised);margin:16px 0}
.export-credit-summary strong{font-size:15px;line-height:1.5}
.export-credit-summary span{color:var(--muted);font-size:14px}
.export-credit-summary p{margin:0}
#billing-balance-detail{margin:0;line-height:1.6}
@media(max-width:900px){.billing-options{grid-template-columns:repeat(2,minmax(0,1fr))}.billing-option-heading{min-height:24px}.billing-option-description{min-height:44px}.billing-topups{align-items:stretch;flex-direction:column}.billing-purchase{flex:auto;min-width:0}}
@media(max-width:540px){.billing-options{grid-template-columns:1fr}.billing-option-description{min-height:0}.billing-status-row{flex-wrap:wrap}.billing-overview{padding:14px}.subscription-dialog{padding:20px}.subscription-tab span{font-size:12px}}

/* Light theme: a field-survey look. Warm map paper, a dark ink tool rail and
   filmstrip that frame the photo, a contour-map light table, serif headings, and
   monospace labels and numbers. Lime stays the brand color; survey orange marks details. */
:root:not([data-theme="dark"]){--bg:#f6f8f5;--panel:#fbfcfa;--raised:#eef2ed;--line:#dce4dd;--text:#1c2820;--muted:#585c50;--accent:#3e6b1f;--lime:#c6ee86;--signal:#a8441c;--rail:#18251e;--rail-raised:#25372b;--rail-line:#324538;--rail-text:#c9d0c2;--mono:"AM Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;--serif:"AM Source Serif 4",Georgia,"Times New Roman",serif}
:root:not([data-theme="dark"]) body{background:var(--bg)}
:root:not([data-theme="dark"]) button{border-radius:6px}
:root:not([data-theme="dark"]) input,:root:not([data-theme="dark"]) select,:root:not([data-theme="dark"]) textarea{border-radius:6px;border-color:var(--line)}
:root:not([data-theme="dark"]) button:hover:not(:disabled){background:var(--raised)}
:root:not([data-theme="dark"]) button.primary{background:var(--lime);border-color:#a3cb62;color:#17240f;font-weight:700;box-shadow:inset 0 1px #ffffffa0,0 2px 0 #8fb553}
:root:not([data-theme="dark"]) button.primary:hover:not(:disabled){background:#d3f59c}
:root:not([data-theme="dark"]) button.primary:active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 1px #ffffffa0,0 1px 0 #8fb553}
:root:not([data-theme="dark"]) button:focus-visible,:root:not([data-theme="dark"]) input:focus-visible,:root:not([data-theme="dark"]) select:focus-visible,:root:not([data-theme="dark"]) canvas:focus-visible{outline-color:var(--accent)}
:root:not([data-theme="dark"]) .topbar{background:var(--panel);border-bottom:3px double var(--line)}
:root:not([data-theme="dark"]) .brand small{font-family:var(--mono);font-weight:500;letter-spacing:1.6px;color:var(--signal)}
:root:not([data-theme="dark"]) .project input{font-family:var(--serif);font-size:18px;font-weight:600;letter-spacing:-.2px;color:var(--text)}
:root:not([data-theme="dark"]) #save-state{font-family:var(--mono);font-size:11px}
:root:not([data-theme="dark"]) .top-actions>button:not(.primary){background:transparent}
:root:not([data-theme="dark"]) .top-actions>button:not(.primary):hover:not(:disabled){background:var(--raised)}
:root:not([data-theme="dark"]) .subscription-tab span{color:var(--signal);font-family:var(--mono);font-size:10px;letter-spacing:.8px;text-transform:uppercase}
:root:not([data-theme="dark"]) #account-initials{background:var(--rail);color:var(--lime);font-family:var(--mono)}
:root:not([data-theme="dark"]) .account-copy small{color:var(--accent)}
:root:not([data-theme="dark"]) .tools{background:var(--rail);border-right:0;box-shadow:inset -1px 0 #0c140f}
:root:not([data-theme="dark"]) .tool{color:#9daa98}
:root:not([data-theme="dark"]) .tool span{color:#e8efe9}
:root:not([data-theme="dark"]) .tools .tool:hover:not(:disabled){background:var(--rail-raised);color:#e8ede0}
:root:not([data-theme="dark"]) .tool.active,:root:not([data-theme="dark"]) .tools .tool.active:hover:not(:disabled){background:var(--rail-raised);color:var(--lime);box-shadow:inset 3px 0 var(--lime)}
:root:not([data-theme="dark"]) .tool.active span{color:var(--lime)}
:root:not([data-theme="dark"]) .tool-separator{background:var(--rail-line)}
:root:not([data-theme="dark"]) .tools .tool:focus-visible{outline-color:var(--lime)}
:root:not([data-theme="dark"]) .canvas-bar{background:var(--panel)}
:root:not([data-theme="dark"]) .eyebrow{font-family:var(--mono);font-weight:500;letter-spacing:1.4px;color:var(--signal)}
:root:not([data-theme="dark"]) .canvas-bar strong{font-size:15px}
:root:not([data-theme="dark"]) #dimensions,:root:not([data-theme="dark"]) .zoom output{font-family:var(--mono)}
:root:not([data-theme="dark"]) .zoom{border:1px solid var(--line);border-radius:6px;background:#fff;padding:1px}
:root:not([data-theme="dark"]) .viewport{background-color:#e8eee8;background-image:url(assets/contours.svg),linear-gradient(#d6e0d7 1px,transparent 1px),linear-gradient(90deg,#d6e0d7 1px,transparent 1px);background-size:1600px 1000px,80px 80px,80px 80px;background-position:center,-1px -1px,-1px -1px}
:root:not([data-theme="dark"]) #editor{box-shadow:0 0 0 6px #ffffff,0 0 0 7px #cfc6b2,0 26px 50px -20px #2b251766}
:root:not([data-theme="dark"]) .empty{background:#fbfcfaeb;border:1px solid var(--line);border-radius:12px;box-shadow:0 24px 60px -34px #2b251780}
@media(min-width:761px){:root:not([data-theme="dark"]) .empty{padding:44px 52px}}
:root:not([data-theme="dark"]) .empty-symbol{border:1px dashed var(--signal);color:var(--signal);background:#ffffff}
:root:not([data-theme="dark"]) .empty .eyebrow{color:var(--signal)}
:root:not([data-theme="dark"]) .empty h1{font-family:var(--serif);font-weight:600;letter-spacing:-1.2px}
:root:not([data-theme="dark"]) .empty>span{font-family:var(--mono);font-size:11px}
:root:not([data-theme="dark"]) #drop-overlay{background:#f6f8f5f2;border-color:var(--signal);color:var(--text);font-family:var(--serif)}
:root:not([data-theme="dark"]) .canvas-status{background:var(--panel)}
:root:not([data-theme="dark"]) .canvas-status button{color:var(--accent)}
:root:not([data-theme="dark"]) .local-note{font-family:var(--mono);color:var(--muted)}
:root:not([data-theme="dark"]) .filmstrip{background:var(--rail);border-top:0;color:var(--rail-text)}
:root:not([data-theme="dark"]) .filmstrip .add-tile{border:1px dashed #4b5e51;color:var(--rail-text);background:transparent}
:root:not([data-theme="dark"]) .filmstrip .add-tile:hover:not(:disabled){background:var(--rail-raised)}
:root:not([data-theme="dark"]) .filmstrip .photo:hover:not(:disabled){background:transparent}
:root:not([data-theme="dark"]) .photo small{color:#aab5a5;font-family:var(--mono);font-size:10px}
:root:not([data-theme="dark"]) .photo.active{border-color:var(--lime)}
:root:not([data-theme="dark"]) .photo .badge{background:var(--lime);color:#17240f;font-family:var(--mono);font-weight:600}
:root:not([data-theme="dark"]) .photo-grip{color:#aab5a5}
:root:not([data-theme="dark"]) .filmstrip .photo-grip:hover:not(:disabled){background:transparent;color:var(--lime)}
:root:not([data-theme="dark"]) #photo-count{color:#9daa98;font-family:var(--mono);font-size:11px}
:root:not([data-theme="dark"]) .inspector{background:var(--panel);border-left:1px solid var(--line)}
:root:not([data-theme="dark"]) .panel-heading h2,:root:not([data-theme="dark"]) .photo-edit-intro h2{font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:-.2px}
:root:not([data-theme="dark"]) .panel-heading>span{font-family:var(--mono);background:#e3f0d9;color:#2f5417}
:root:not([data-theme="dark"]) .inspector-heading{background:var(--raised);border-color:var(--line)}
:root:not([data-theme="dark"]) .inspector-heading .eyebrow{color:var(--text)}
:root:not([data-theme="dark"]) .layer small{font-family:var(--mono);font-size:9px;letter-spacing:.8px;text-transform:uppercase}
:root:not([data-theme="dark"]) .layer-row:hover{background:#f2f6f1}
:root:not([data-theme="dark"]) .layer-row .layer:hover:not(:disabled){background:transparent}
:root:not([data-theme="dark"]) .layer-row.active{background:#fff;border-color:var(--line);box-shadow:inset 3px 0 var(--signal)}
:root:not([data-theme="dark"]) .tip>span{font-family:var(--mono);color:var(--signal)}
:root:not([data-theme="dark"]) .properties h3{font-family:var(--serif);font-weight:600;font-size:26px;letter-spacing:-.4px}
:root:not([data-theme="dark"]) .properties{--card-surface:#ffffff;--card-header:#f2f6f1;--card-border:#dce4dd;--card-input:#fff;--card-hover:#e6eee5}
:root:not([data-theme="dark"]) .property-section{border-radius:9px;box-shadow:0 1px 2px #2b251712}
:root:not([data-theme="dark"]) .property-section>summary{border-radius:8px;font-size:14px}
:root:not([data-theme="dark"]) .property-section[open]>summary{border-radius:8px 8px 0 0}
:root:not([data-theme="dark"]) .property-section>summary::marker{color:var(--signal)}
:root:not([data-theme="dark"]) .section-label{border-left-color:var(--signal);background:var(--raised);font-family:var(--mono);font-weight:600;border-radius:5px}
:root:not([data-theme="dark"]) .photo-adjustment-inputs input[type=number],:root:not([data-theme="dark"]) .color-inputs input[type=text],:root:not([data-theme="dark"]) #font-size-number,:root:not([data-theme="dark"]) .filename-preview output{font-family:var(--mono)}
:root:not([data-theme="dark"]) .panel-bottom{background:repeating-linear-gradient(135deg,transparent 0 7px,#e8efe9 7px 8px),var(--panel);border-top:3px double var(--line)}
:root:not([data-theme="dark"]) .panel-bottom>span{font-family:var(--mono);color:var(--signal)}
:root:not([data-theme="dark"]) dialog{background:var(--panel);border-radius:12px}
:root:not([data-theme="dark"]) dialog h2{font-family:var(--serif);font-weight:600;letter-spacing:-.3px}
:root:not([data-theme="dark"]) dialog::backdrop{background:#1a221c8f}
:root:not([data-theme="dark"]) dialog dt{color:var(--signal);font-family:var(--mono);font-size:12px}
:root:not([data-theme="dark"]) .toast{background:var(--rail);color:#f2f6f1}
:root:not([data-theme="dark"]) .project input{background:transparent}
/* Keep the top actions on one row when there is room; the project name gives way first. */
@media(min-width:1101px){.top-actions{flex-wrap:nowrap;flex-shrink:0}.project{flex:1 1 0}.project input{text-overflow:ellipsis}}
/* The pasteboard overlays the viewport from outside the scroller, so it never adds scrollbars. */
.center{position:relative}#pasteboard{position:absolute;left:0;top:0;pointer-events:none;z-index:2;box-shadow:none}#pasteboard[hidden]{display:none}
#editor,#pasteboard{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.plan-lock{margin-left:auto;padding:2px 7px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.6px;line-height:1.4;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}.photo-adjustment-inputs input:disabled{opacity:.45;cursor:not-allowed}
/* Four packages, with every tool unlocked: wrap the cards on narrow screens. */
.billing-options{grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.label-design-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.label-design-choice{display:flex;flex-direction:column;align-items:stretch;gap:5px;padding:5px;font-size:12px;min-width:0}.label-design-choice canvas{width:100%;height:auto;border-radius:5px;display:block}.label-design-choice[aria-pressed=true]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.billing-interval{display:flex;align-items:center;flex-wrap:wrap;gap:23px;padding:0;margin:4px 0 17px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent}
.billing-interval button{position:relative;border:0;border-bottom:2px solid transparent;border-radius:0;min-height:42px;padding:9px 0;margin-bottom:-1px;background:transparent;color:var(--muted);font-size:13px;font-weight:600;box-shadow:none}
.billing-interval button[aria-pressed=true],.billing-interval button[aria-selected=true]{background:transparent;color:var(--text);border-bottom-color:var(--accent);box-shadow:none}
.billing-interval button:hover:not(:disabled),:root:not([data-theme="dark"]) .billing-interval button:hover:not(:disabled){background:transparent;color:var(--text)}
.billing-save-badge{margin-left:7px;padding:0;border-radius:0;font-size:10px;font-weight:600;letter-spacing:0;background:transparent;color:var(--accent)}
:root:not([data-theme="dark"]) .billing-save-badge{background:transparent;color:var(--accent)}
.billing-price-note{display:block;min-height:18px;margin-top:2px;font-size:12px;font-weight:600;color:var(--accent)}


/* Rounded package cards keep distinct colors and a clear recommendation. */
.billing-options{gap:18px;padding-top:12px}
.billing-option[data-billing-plan]{--plan-stroke:#83a93b;--plan-color:#c6ee86;--plan-surface:#202a1b;--plan-text:#edf2ee;--plan-muted:#b2bfb2;position:relative;--plan-shadow:0 10px 24px #00000016;border:1px solid color-mix(in srgb,var(--plan-stroke) 45%,var(--line));border-top:3px solid var(--plan-stroke);border-radius:20px;background:var(--plan-surface);color:var(--plan-text);box-shadow:var(--plan-shadow);transform:none}
.billing-option[data-billing-plan=starter]{--plan-stroke:#bd5e3f;--plan-color:#e6a58c;--plan-surface:#2c211d}
.billing-option[data-billing-plan=basic]{--plan-stroke:#83a93b;--plan-color:#c6ee86;--plan-surface:#222d1c;--plan-shadow:0 0 0 3px #c6ee8629,0 14px 28px #00000020;border:2px solid #91b959}
.billing-option[data-billing-plan=pro]{--plan-stroke:#5268ca;--plan-color:#a9b8ff;--plan-surface:#20263b}
.billing-option[data-billing-plan=studio]{--plan-stroke:#65d6c1;--plan-color:#65d6c1;--plan-surface:#123c3a;--plan-text:#f2faf7;--plan-muted:#bed6cf}
:root:not([data-theme="dark"]) .billing-option[data-billing-plan=starter]{--plan-color:#9d452d;--plan-surface:#fcf3ed;--plan-text:#203028;--plan-muted:#6a655f}
:root:not([data-theme="dark"]) .billing-option[data-billing-plan=basic]{--plan-color:#4e7019;--plan-surface:#f2f7e7;--plan-text:#203028;--plan-muted:#61705a}
:root:not([data-theme="dark"]) .billing-option[data-billing-plan=pro]{--plan-color:#4054a9;--plan-surface:#f1f3fc;--plan-text:#203028;--plan-muted:#626a7e}
.billing-option[data-billing-plan]:hover:not(:disabled),:root:not([data-theme="dark"]) .billing-option[data-billing-plan]:hover:not(:disabled){border-color:var(--plan-stroke);background:var(--plan-surface);box-shadow:var(--plan-shadow);transform:none}
.billing-option[data-billing-plan][aria-pressed=true]{border-color:var(--plan-stroke);box-shadow:inset 0 0 0 1px var(--plan-stroke),var(--plan-shadow)}
.plan-emblem{display:inline-grid;place-items:start center;flex:none;min-width:20px;height:auto;padding:0;border-radius:0;background:none;font:500 11px/1.5 ui-monospace,SFMono-Regular,monospace;letter-spacing:.02em}
.billing-option .plan-emblem,.billing-option .billing-option-title{color:var(--plan-color)}
.billing-option-heading{justify-content:flex-start;align-content:flex-start;min-height:30px;gap:8px}
.billing-option-heading .eyebrow{font-size:10px;letter-spacing:.07em;color:var(--plan-muted)}
.billing-option-heading .billing-current-badge{margin-left:auto}
.billing-option .billing-option-title{font-size:25px;font-weight:600;letter-spacing:-.04em;background:none;-webkit-text-fill-color:currentColor}
.billing-option .billing-option-description,.billing-option .billing-option-list,.billing-option .billing-price span{color:var(--plan-muted)}
.billing-option .billing-price,.billing-option .billing-credit-line{color:var(--plan-text)}
.billing-option .billing-option-list [role="listitem"]::before,.billing-option .billing-price-note{color:var(--plan-color)}
.billing-option .billing-current-badge{border:1px solid var(--plan-stroke);border-radius:3px;padding:3px 6px;background:var(--plan-surface);color:var(--plan-color);font-size:10px;font-weight:600}
.billing-option .billing-option-action{border-radius:11px;border-color:var(--plan-stroke);background:transparent;color:var(--plan-color)}
.billing-option-featured .eyebrow{position:absolute;top:-13px;left:50%;z-index:1;transform:translateX(-50%);padding:4px 12px;border:1px solid #91b959;border-radius:999px;background:#c6ee86;color:#243b17;font-size:10px;font-weight:700;line-height:1.3;white-space:nowrap}
.billing-option-featured .billing-option-action{border-color:#c6ee86;background:#c6ee86;color:#16221e}
.billing-option-premium .billing-option-action{border:1px solid #65d6c1;background:#65d6c1;color:#123c3a}
.billing-missing{color:var(--muted);opacity:.75;text-decoration:line-through}
.billing-option-list .billing-missing::before{content:'✕';color:var(--muted);font-weight:600}
.billing-price-note s{opacity:.7;font-weight:500;margin-right:2px}

/* Nearby places panel */
.places-intro{margin-top:0}
.places-message{margin:10px 0;color:var(--muted);line-height:1.5}
.places-error{color:#e8836f}
:root:not([data-theme="dark"]) .places-error{color:#b02d39}
.place-chips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 4px}
.place-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid var(--line);background:var(--raised);color:var(--muted)}
.place-chip::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--place)}
.place-chip span{font-size:11px;opacity:.8}
.place-chip[aria-pressed=true]{border-color:var(--place);color:var(--text);background:color-mix(in srgb,var(--place) 14%,var(--panel))}
#places-panel .place-group h3{margin:16px 0 6px;font:700 11px/1.3 Inter,-apple-system,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.place-row{display:flex;align-items:stretch;gap:4px;margin:0 0 5px}
.place-item{display:grid;grid-template-columns:10px minmax(0,1fr) auto;align-items:center;column-gap:8px;row-gap:3px;flex:1;min-width:0;margin:0;padding:9px 10px;text-align:left;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--text);font-size:13px}
.place-item:hover:not(:disabled),.place-item:focus-visible{border-color:var(--place);background:color-mix(in srgb,var(--place) 10%,var(--panel))}
.place-item:disabled{opacity:.6;cursor:default}
.place-dot{width:10px;height:10px;border-radius:50%;background:var(--place)}
.place-name{grid-column:2/4;font-weight:600;line-height:1.3;overflow-wrap:break-word}
.place-meta{grid-column:2;grid-row:2}
.place-add{grid-column:3;grid-row:2}
.place-meta{color:var(--muted);font-size:12px;white-space:nowrap}
.place-add{color:var(--accent);font-weight:700;font-size:12px;white-space:nowrap}
.places-distance{margin-top:16px}
.place-hide{flex:none;width:28px;padding:0;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--muted);font-size:16px;line-height:1}
.place-hide:hover,.place-hide:focus-visible{color:#c94f3d;border-color:#c94f3d}
.places-hidden a{color:var(--accent)}
.link-button{border:0;padding:0;background:none;color:var(--accent);font:inherit;font-weight:600;text-decoration:underline;cursor:pointer}

/* The editor fills the window: the workspace takes whatever height the top bar leaves, so a
   wrapping top bar or a long tool rail never pushes the filmstrip below the fold. */
@media(min-width:761px){body:has(>.workspace){display:grid;grid-template-rows:auto minmax(0,1fr);height:100vh;height:100dvh}body:has(>.workspace)>.workspace{height:auto}}
/* Laptop-height windows: a compact tool rail. It scrolls if the window is shorter still. */
.tools{scrollbar-width:thin}.tools .tool{max-width:100%}
@media(min-width:761px) and (max-height:1100px){.tools{padding:10px 7px;gap:4px}.tool{padding:5px 2px;gap:2px}.tool span{font-size:20px;height:24px;line-height:24px}.tool-separator{margin:4px 0}}
@media(min-width:761px) and (max-height:700px){.tools{gap:2px}.tool{font-size:11px}.tool span{font-size:18px;height:20px;line-height:20px}}
/* Light theme: a lime focus ring that stays visible on the dark filmstrip. */
:root:not([data-theme="dark"]) .filmstrip :focus-visible{outline-color:var(--lime)}
/* Phones: a shorter two-row top bar, Undo and Redo at the top of the tool rail next to the
   tools, and a compact first-run card so Add photos is visible without scrolling. */
@media(max-width:760px){.topbar{min-height:0;padding:8px 12px;gap:8px 10px}.project{flex:1 1 0;min-width:0;padding-left:10px}.project span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.account-button{padding:5px 8px;gap:8px}#account-initials{width:32px;height:32px}.account-copy{max-width:96px}.top-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.top-actions>button{padding:8px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tools #undo,.tools #redo{order:-2}.tools .tool-separator{order:-1}.empty{padding:16px 12px}.empty-symbol{width:44px;height:44px;font-size:24px;margin-bottom:12px}.empty h1{font-size:26px;margin:10px 0}.empty>p:not(.eyebrow){margin:10px 0 16px}}
@media(max-width:760px) and (max-height:700px){.empty-symbol{display:none}}
/* Narrow phones and tablets in portrait show only the logo, leaving room for the actions. */
@media(max-width:520px),(min-width:761px) and (max-width:1000px){.topbar .brand{font-size:0}.topbar .brand svg{margin-right:0}}
/* Touch screens: 16px form text so iOS Safari doesn't zoom in, and hit areas of at least 44px.
   Small controls in tight spots get a larger invisible hit area instead, so nothing shifts. */
@media(pointer:coarse){input,select,textarea,.property-section-content .color-inputs input[type=text],.photo-adjustment-inputs input[type=number]{font-size:16px}.zoom button,.icon-button,.layer-delete,.place-hide{min-width:44px;min-height:44px}.layer,.top-actions>button,.photo-edit-actions button,.pin-color-scope button,.billing-interval button,.address-suggestions button,.place-chip,.toast button{min-height:44px}.canvas-status button{position:relative}.photo-delete::after,.photo-grip::after,.canvas-status button::after{content:"";position:absolute;inset:-6px -6px -16px -16px}.photo-grip::after{inset:-19px -6px -6px -19px;touch-action:none}.canvas-status button::after{inset:-12px -4px}}
.project .save-state{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:2px 0;border:0;background:none;color:var(--muted);text-align:left}.topbar .project .save-state:hover:not(:disabled){background:none;color:var(--text)}.project .save-state>span{min-width:0;color:inherit}.project .save-state::after{content:"?" / "";flex-shrink:0;display:grid;place-items:center;width:14px;height:14px;border:1px solid currentColor;border-radius:50%;font-size:9px;font-weight:700;line-height:1}
.saving-dialog{width:min(560px,calc(100vw - 32px))}.saving-now{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}.saving-now>div{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:12px 14px}.saving-now span{display:block;font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}.saving-now strong{display:block;margin-top:6px;font-size:14px;font-weight:600}.saving-now .stale strong{color:var(--signal,#ffb4a8)}
.saving-steps{list-style:none;counter-reset:step;padding:0;margin:0 0 18px;display:grid;gap:16px}.saving-steps li{counter-increment:step;display:grid;grid-template-columns:28px 1fr;column-gap:12px}.saving-steps li::before{content:counter(step);grid-row:span 2;width:28px;height:28px;border-radius:50%;background:var(--raised);color:var(--accent);display:grid;place-items:center;font-weight:700;font-size:13px}.saving-steps strong{font-size:15px;line-height:1.35;padding-top:4px}.saving-steps p{margin:2px 0 0}
dialog .saving-warning{font-size:13px;margin:0 0 20px;padding:10px 12px;border-left:3px solid var(--accent);border-radius:0 6px 6px 0;background:var(--bg)}.saving-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.saving-tip{position:fixed;top:86px;right:24px;z-index:40;width:min(330px,calc(100vw - 24px));background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px;box-shadow:0 14px 40px #0005}.saving-tip p{margin:0 0 12px;font-size:13px;line-height:1.55;color:var(--muted)}.saving-tip strong{color:var(--text)}.saving-tip div{display:flex;justify-content:flex-end;gap:8px}.saving-tip button{padding:7px 11px;font-size:13px}
@media(max-width:760px){.saving-tip{top:auto;bottom:16px;left:12px;right:12px;width:auto}}@media(max-width:520px){.saving-now{grid-template-columns:1fr}.saving-actions>button{flex:1}}
.tool-plan{position:absolute;top:3px;right:4px;padding:2px 4px;border-radius:4px;background:var(--lime,var(--accent));color:#17240f;font:700 8px/1 Inter,-apple-system,sans-serif;letter-spacing:.6px}.places-plan{padding:3px 7px;border-radius:4px;background:var(--lime,var(--accent));color:#17240f;font:700 10px/1 Inter,-apple-system,sans-serif;letter-spacing:.8px}.places-found{margin:4px 0 8px;font-size:15px;color:var(--text)}.places-found strong{font-size:28px;letter-spacing:-.5px;margin-right:4px}button#places-upgrade.primary{margin:6px 0 4px}.places-allowance{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 12px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--raised);font-size:13px;line-height:1.5;color:var(--text)}
.billing-pass{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--raised)}.billing-pass-copy{display:grid;gap:4px;min-width:0}.billing-pass-copy strong{font-size:16px}.billing-pass-copy>span:last-child{color:var(--muted);font-size:13px;line-height:1.45}.billing-pass button{flex-shrink:0;white-space:nowrap}@media(max-width:620px){.billing-pass{flex-direction:column;align-items:stretch}}
.subscription-tab[data-test-mode]::after{content:'TEST MODE';margin-left:8px;padding:2px 6px;border-radius:4px;background:#f5c451;color:#2a1d00;font:700 9px/1.4 Inter,-apple-system,sans-serif;letter-spacing:.8px}
.road-taper{margin:-4px 0 18px}.road-taper>span{display:block;color:#c9d3d8;font-size:14px;margin-bottom:8px}:root:not([data-theme="dark"]) .road-taper>span{color:var(--text)}.road-taper .field-row button{padding:8px 6px;font-size:13px}.road-taper .field-help{margin:8px 0 0}
/* Plans dialog: yearly plans and pay-as-you-go credit packs. */
.billing-tabs button{display:inline-flex;align-items:center}.billing-packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:18px;margin:4px 0 14px}.billing-pack{display:grid;gap:4px;padding:18px;border:1px solid var(--line);border-radius:20px;box-shadow:0 10px 24px #00000014;background:var(--panel);color:var(--text);text-align:left;position:relative}.billing-pack:hover:not(:disabled){border-color:var(--accent)}.billing-pack strong{font-size:22px;letter-spacing:-.4px}.billing-pack .billing-pack-price{font-size:18px;font-weight:700}.billing-pack .billing-pack-each{color:var(--muted);font-size:13px}.billing-pack .billing-pack-action{margin-top:8px;padding:8px 10px;border-radius:11px;background:var(--raised);text-align:center;font-weight:650;font-size:13px}.billing-pack-best{border-color:var(--accent);box-shadow:0 0 0 2px #c6ee8624,0 10px 24px #00000014}.billing-pack-best .billing-pack-action{background:#c6ee86;color:#16221e}.billing-pack-badge{position:static;justify-self:start;order:-1;padding:0;margin-bottom:3px;border-radius:0;background:none;color:var(--accent);font-size:10px;font-weight:650;letter-spacing:.03em}
/* The help under Upload logos keeps clear of the button. */
#export-dialog .asset-help{margin-top:10px}
/* The plan cards' credit line leads their list, in the card's ink. */
.billing-credit-line{font-weight:650;color:var(--text)}
.billing-period{margin-top:2px}
/* Studio keeps its dark surface in either editor theme. */
.billing-option-premium .eyebrow{color:var(--plan-muted)}
/* Free accounts see how exports will look instead of a watermark over their work. */
.preview-chip{margin-left:auto;margin-right:12px;padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:var(--raised);color:var(--muted);font-size:12px;font-weight:600;white-space:nowrap}
.preview-chip:hover{color:var(--text)}
/* Export: the preview beside the settings, which scroll, and the cost and Download button always in view. */
#export-dialog{display:none;width:min(980px,calc(100vw - 32px));padding:0;overflow:hidden}
#export-dialog[open]{display:flex;flex-direction:column}
#export-dialog>form header{padding:20px 24px 0}
.export-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;padding:8px 24px 16px;overflow:auto;min-height:0;flex:1}
.export-preview-pane{position:sticky;top:0;align-self:start}
.export-preview-pane #brand-preview{width:100%;margin:8px 0 10px}
.export-settings>label:first-child{margin-top:4px}
.export-footer{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 16px;padding:14px 24px 18px;border-top:1px solid var(--line);background:var(--panel)}
.export-footer .export-credit-summary{margin:0;padding:10px 14px}
.export-footer #download-export{width:auto;min-width:220px}
.export-footer #export-status{grid-column:1/-1;margin:0}
.export-footer #export-status:empty{display:none}
@media(max-width:760px){.export-layout{grid-template-columns:1fr;gap:8px}.export-preview-pane{position:static}.export-footer{grid-template-columns:1fr}.export-footer #download-export{width:100%}}
/* Shoots on this device. */
.shoot-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.shoot-row{display:grid;grid-template-columns:56px minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--raised)}
.shoot-row.open{border-color:var(--accent);grid-template-columns:56px minmax(0,1fr) auto}
.shoot-thumb{width:56px;height:42px;border-radius:6px;background:var(--line) center/cover no-repeat}
.shoot-text{display:grid;gap:2px;min-width:0}.shoot-text strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.shoot-text small{color:var(--muted)}
.shoot-open-badge{font-size:12px;font-weight:700;color:var(--muted)}
.danger-text{color:#b02d39}
#new-shoot{margin-top:12px}
.boundary-area{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 4px;font-size:13px}
.boundary-area strong{font-size:14px}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Targets of at least 24 px everywhere (44 px on touch, above). */
.photo-delete{width:26px;height:26px}
.photo-grip{width:26px;height:26px}
.zoom button{min-width:28px;min-height:28px}
/* The decorative pasteboard never widens the page on narrow screens. */
.viewport{max-width:100%}
#pasteboard{max-width:100%}
/* Phone editor: the photo bar, the photo, its hint and Finish buttons, and the tools stay pinned at the top while
   the shoot's photos and the details scroll underneath, so the photo is always in view while editing. */
@media(max-width:760px){
  .workspace{display:flex;flex-direction:column;height:auto;min-height:0}
  .workspace>.center{display:contents}
  .canvas-bar{order:1;position:sticky;top:0;z-index:31;height:44px;min-height:0;flex-wrap:nowrap;padding:4px 10px;background:var(--panel);border-bottom:1px solid var(--line)}
  .canvas-bar .eyebrow,#dimensions{display:none}
  .canvas-bar>div:first-child{min-width:0;flex:1}
  .canvas-bar #photo-name{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
  .canvas-bar .preview-chip{display:none}
  #viewport{order:2;position:sticky;top:44px;z-index:30;height:42vh;height:42dvh;min-height:220px;flex:none;background:var(--bg)}
  .canvas-status{order:3;position:sticky;top:calc(44px + 42dvh);z-index:30;height:40px;min-height:0;padding:4px 10px;background:var(--panel);font-size:12px;flex-wrap:nowrap}
  .canvas-status #tool-hint{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .canvas-status .local-note{display:none}
  .workspace>.tools{order:4;position:sticky;top:calc(84px + 42dvh);z-index:30;background:var(--rail,var(--panel));flex-direction:row;align-items:stretch;overflow-x:auto;overflow-y:hidden;height:auto;padding:4px 6px;gap:2px;border-right:0;box-shadow:0 8px 14px -12px #000a}
  .workspace>.tools .tool{flex:0 0 auto;min-width:58px;min-height:52px;padding:4px 6px}
  .workspace>.tools .tool-separator{width:1px;height:auto;margin:6px 2px;align-self:stretch}
  .workspace>.tools .help{margin:0}
  .filmstrip{order:5;height:auto;padding:8px 10px}
  .workspace>.inspector{order:6;grid-column:auto;max-height:none}
  /* The empty view has nothing to pin. */
  body:has(#empty:not([hidden])) #viewport{position:static;height:auto;min-height:0}
  body:has(#empty:not([hidden])) .canvas-status,body:has(#empty:not([hidden])) .workspace>.tools{position:static}
  /* Top bar: Export first, the other actions in one row that scrolls sideways. */
  .top-actions{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;scrollbar-width:none;width:100%}
  .toast{bottom:16px}
  .top-actions>button{flex:0 0 auto;padding:8px 12px}
  .top-actions #export-button{order:-1}
}
/* More layers in view before the list scrolls. */
.layers{max-height:320px}
/* Delete appears on the row you point at or focus, not on every row at once (always shown on touch). */
@media(hover:hover){.layer-row .layer-delete{opacity:0;transition:opacity .12s}.layer-row:hover .layer-delete,.layer-row:focus-within .layer-delete,.layer-row.active .layer-delete{opacity:1}}
#try-sample{display:block;margin:10px auto 0}
/* Tool rail icons: one line-icon set on a 24 px grid. */
.tool .tool-icon{display:grid;place-items:center;height:26px}
.tool .tool-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.layer .layer-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.kits{margin-top:14px}.kit-actions{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 12px}.kit-save{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end}
/* One visual system with the public site: cool paper and white panels, green ink for small labels (the rust is
   retired), and Inter for headings and labels; the mono face is kept for data such as sizes and file names. The dark
   theme is green-black to match the brand instead of slate blue. */
:root:not([data-theme="dark"]){--bg:#f6f8f5;--panel:#ffffff;--raised:#eef2ed;--line:#dce4dd;--text:#16221e;--muted:#56645b;--signal:#3e6b1f;--serif:"AM Inter",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
:root:not([data-theme="dark"]) .eyebrow,:root:not([data-theme="dark"]) .brand small,:root:not([data-theme="dark"]) .subscription-tab span,:root:not([data-theme="dark"]) .tip>span,:root:not([data-theme="dark"]) .section-label,:root:not([data-theme="dark"]) .panel-bottom>span,:root:not([data-theme="dark"]) dialog dt{font-family:inherit;font-weight:700;letter-spacing:.08em}
:root:not([data-theme="dark"]) .empty-symbol{background:#fff}
:root:not([data-theme="dark"]) #drop-overlay{background:#f6f8f5f2}
:root:not([data-theme="dark"]) #save-state{font-family:inherit;font-size:12px;white-space:nowrap}
.billing-team{margin:14px 0;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--raised)}
.billing-team h3{margin:0 0 6px;font-size:15px}
.billing-team-list{list-style:none;margin:10px 0;padding:0;display:grid;gap:6px}
.billing-team-list li{display:flex;justify-content:space-between;gap:12px;font-size:13px}
.billing-team-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end}

/* Field edges need more contrast than decorative panel separators, in both themes. */
:root{--field-border:#71887b}
:root:not([data-theme="dark"]){--field-border:#788779}
:root input:not([type="range"]):not([type="checkbox"]),:root select,:root textarea,
:root .property-section-content .color-inputs{border-color:var(--field-border)}
:root:not([data-theme="dark"]) :is(input,select,textarea){border-color:var(--field-border)}
:root .property-section-content .color-inputs:focus-within{border-color:var(--accent)}

/* Keep each editor region inside its own track. Long shoot names and the extra
   Shoots action must never push the account controls beyond a laptop screen. */
.topbar,.topbar>*{min-width:0}
.project input{width:100%;min-width:0}
.top-actions{min-width:0;max-width:100%}
.canvas-bar>div:first-child{flex:1 1 0;min-width:0}
.canvas-bar #photo-name{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.canvas-bar .zoom{flex:0 0 auto;margin-left:auto}
.canvas-bar #dimensions{flex:0 0 auto}
/* Tablets: the header takes two rows. Laptops keep one row with shorter labels (below). */
@media(min-width:761px) and (max-width:1099px){
  .topbar{display:grid;grid-template-columns:auto minmax(80px,1fr) auto;height:auto;min-height:0;gap:8px 12px;padding:10px 16px}
  .topbar .brand{grid-column:1;grid-row:1}
  .topbar .brand small{display:none}
  .topbar .project{grid-column:2;grid-row:1;max-width:none;min-width:0;margin:0;padding-left:12px}
  .topbar .account-button{grid-column:3;grid-row:1;max-width:190px;margin:0}
  .topbar .top-actions{grid-column:1/-1;grid-row:2;display:flex;flex-wrap:wrap;justify-content:flex-end;width:100%;gap:6px}
}
/* Phone editing uses a fixed photo and tool area, followed by the filmstrip
   and a separate scrolling inspector. No row can slide under the photo. */
@media(max-width:760px){
  body:has(>.workspace){display:grid;grid-template-rows:auto minmax(0,1fr);height:100vh;height:100dvh;min-height:0;overflow:hidden}
  body:has(>.workspace)>.workspace{--mobile-photo-height:clamp(120px,27dvh,240px);display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"bar" "photo" "hint" "tools" "filmstrip" "inspector";grid-template-rows:36px var(--mobile-photo-height) 32px 52px 78px minmax(0,1fr);height:auto;min-height:0;overflow:hidden}
  .workspace>.center{display:contents}
  .canvas-bar{grid-area:bar;position:static;z-index:auto;height:auto;padding:4px 10px}
  #viewport{grid-area:photo;position:relative;top:auto;z-index:auto;height:auto;min-height:0;max-height:100%;overflow:auto}
  .canvas-status{grid-area:hint;position:static;top:auto;z-index:auto;height:auto;min-height:0;overflow:hidden}
  .canvas-status button{min-height:28px;padding:3px 8px;white-space:nowrap}
  .workspace>.tools{grid-area:tools;position:static;top:auto;z-index:auto;height:auto;min-height:0;max-width:100%;padding:3px 6px;box-shadow:none;scrollbar-width:none}
  .workspace>.tools::-webkit-scrollbar{display:none}
  .workspace>.tools .tool{min-width:58px;min-height:44px;height:44px;padding:3px 6px;gap:2px;font-size:11px;line-height:1.1}
  .workspace>.tools .tool kbd{display:none}
  .workspace>.tools .tool .tool-icon{height:22px}
  .workspace>.tools #undo,.workspace>.tools #redo{order:0}
  .filmstrip{grid-area:filmstrip;position:relative;min-height:0;height:auto;padding:6px 8px;overflow:hidden}
  .filmstrip .photos{min-width:0;height:100%;max-height:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  .filmstrip .photos::-webkit-scrollbar{display:none}
  .filmstrip .photo-tile,.filmstrip .add-tile{height:62px}
  .filmstrip .photo{height:100%;display:flex;flex-direction:column;gap:2px}
  .filmstrip .photo img{width:100%;height:40px;min-height:0;object-fit:cover}
  .filmstrip .photo small{font-size:10px;line-height:1.2}
  .workspace>.inspector{grid-area:inspector;min-height:0;max-height:none;overflow:auto;overscroll-behavior:contain;border-left:0}
  .workspace>.inspector .panel-bottom{flex-shrink:0}
  .topbar .top-actions{min-width:0;max-width:100%;padding-bottom:2px}
  .topbar .account-button{max-width:130px}
  .topbar .account-copy{min-width:0;max-width:72px}
  .workspace:has(#empty:not([hidden])){grid-template-rows:36px minmax(180px,1fr) 0 52px 0 0}
  .workspace:has(#empty:not([hidden])) #viewport{height:auto;min-height:0}
  .workspace:has(#empty:not([hidden])) :is(.canvas-status,.filmstrip,.inspector){display:none}
}
@media(max-width:760px) and (max-height:600px){
  body:has(>.workspace)>.workspace{--mobile-photo-height:clamp(100px,20dvh,160px);grid-template-rows:36px var(--mobile-photo-height) 28px 46px 66px minmax(0,1fr)}
  .filmstrip .photo-tile,.filmstrip .add-tile{height:52px}
}
@media(max-width:760px) and (max-height:480px){
  body:has(>.workspace){height:auto;overflow:auto}
  body:has(>.workspace)>.workspace{grid-template-rows:36px 160px 28px 46px 66px auto;overflow:visible}
  .workspace>.inspector{min-height:260px;overflow:visible}
}

/* Credit-based packages share one complete editor; only credits and devices vary. */
.billing-welcome{margin:0 0 18px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--raised)}
.billing-welcome strong{font-size:15px}.billing-welcome p{margin:5px 0 0;font-size:13px;line-height:1.55;color:var(--muted)}
.billing-price-explainer{margin:10px 0 0;color:var(--muted);font-size:12px;line-height:1.5}
.billing-price-note s{display:inline-block;text-decoration-thickness:1px;color:var(--muted)}
.billing-option-premium .billing-price-note s{color:var(--plan-muted)}
.billing-devices{margin:14px 0;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--raised)}
.billing-devices h3{margin:0 0 6px;font-size:15px}.billing-device-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.billing-device-list li{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px}.billing-device-list li span{min-width:0;overflow-wrap:anywhere}.billing-device-list .link-button{flex-shrink:0}

.billing-price-timing{display:block;margin-top:4px}.billing-price-note{font-size:11px;line-height:1.55}.billing-option-featured .eyebrow{letter-spacing:.04em}
/* Laptops (1100–1599 px): one header row, so the photo keeps its height. Buttons drop their second word ("Open",
   "Save", "Export", "Plan") and the account shows a short name. */
.narrow-only{display:none}
@media(min-width:1100px) and (max-width:1599px){
  .topbar{display:flex;flex-wrap:nowrap;height:64px;min-height:0;gap:12px;padding:0 14px}
  .topbar .brand small{display:none}
  .topbar .wide-only{display:none}.topbar .narrow-only{display:inline}
  .topbar .top-actions{flex-wrap:nowrap;flex-shrink:0;width:auto;gap:6px}
  .topbar .top-actions>button{padding:8px 11px}
  .topbar .project{flex:1 1 0;min-width:140px;max-width:none}
  .topbar .account-copy{max-width:96px}
}
.subscription-tab .wide-only,.subscription-tab .narrow-only{font:inherit;color:inherit;letter-spacing:normal;text-transform:none}

/* Road actions sit above the scrollable photo, so they stay in view while zooming or panning. */
.canvas-stage{position:relative;display:flex;flex-direction:column;flex:1;min-width:0;min-height:100px;overflow:hidden}
.road-drawing-controls{position:absolute;left:50%;bottom:16px;z-index:5;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);display:flex;align-items:center;gap:20px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text);box-shadow:0 14px 35px #0005,inset 0 1px #ffffff18}
.road-drawing-copy{display:grid;gap:4px;max-width:205px;line-height:1.4}
.road-drawing-copy strong{font-size:14px;font-weight:700}
.road-drawing-copy span{font-size:12px;color:var(--muted)}
.road-drawing-buttons{display:flex;align-items:center;gap:8px}
.road-drawing-buttons button{min-height:44px;white-space:nowrap;padding:10px 16px;font-size:14px;font-weight:650}
.road-drawing-buttons .primary:disabled{opacity:.6}
@media(max-width:1100px){.road-drawing-controls{gap:12px;padding:12px}.road-drawing-copy{max-width:170px}.road-drawing-buttons button{padding:10px 12px}}
@media(max-width:760px){
  .canvas-stage{grid-area:photo;order:2;min-height:0;max-height:100%}
  .canvas-stage #viewport{position:relative;top:auto;flex:1;height:auto;min-height:0;max-height:100%}
  .road-drawing-controls{bottom:8px;max-width:calc(100% - 16px);padding:8px;gap:8px;border-radius:11px}
  .road-drawing-copy{display:none}
  .road-drawing-buttons{gap:8px}
  .road-drawing-buttons button{min-height:44px;padding:9px 16px}
}
@media(min-width:761px) and (max-width:900px){.road-drawing-controls{align-items:stretch;flex-direction:column;gap:8px}.road-drawing-copy{max-width:none}.road-drawing-copy strong{display:none}.road-drawing-buttons .primary{flex:1}}