/* Watch Studio — the app. Cream, white cards with soft shadows, brown and rose gold. */
:root {
	--brown: #35231c;
	--rose: #b57e77;
	--cream: #f5f1e8;
	--white: #ffffff;
	--oat: #d0bda6;
	--muted: #76675e;
	--line: rgba(53, 35, 28, 0.1);
	--shadow: 0 1px 2px rgba(53, 35, 28, 0.05), 0 14px 34px -18px rgba(53, 35, 28, 0.28);
	--shadow-soft: 0 1px 2px rgba(53, 35, 28, 0.04), 0 8px 22px -14px rgba(53, 35, 28, 0.22);
	--font: "Figtree", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
	/* Space above the logo and title. When the app is drawn underneath the phone's status bar
	   (older installs), leave the status-bar height plus room for the blur iPhone adds below it.
	   When the app starts below the status bar (inset is 0), a small margin is enough. */
	--under-bar: clamp(0px, env(safe-area-inset-top, 0px), 1px);
	--top-gap: calc(env(safe-area-inset-top, 0px) + 8px + var(--under-bar) * 10);
	--top: calc(50px + var(--top-gap));
	--tabs: calc(64px + env(safe-area-inset-bottom, 0px));
	--green: #4f7d50;
	--amber: #b27b2b;
	--red: #a3362a;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; height: 100%; background: var(--brown); }
/* The page itself never scrolls: the bars are part of a fixed frame and only the middle scrolls.
   (On iPhone, Safari shifts and tints anything pinned to a scrolling page.) The brown page colour
   is what shows behind the status bar and home indicator. */
body {
	margin: 0; height: 100%; overflow: hidden; background: var(--brown); color: var(--brown); font: 400 16px/1.5 var(--font);
	-webkit-tap-highlight-color: transparent; overscroll-behavior: none;
}
.app { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--cream); }

[hidden] { display: none !important; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.i { flex: none; }

/* Splash */
.splash { flex: 1; display: flex; align-items: center; justify-content: center; background: var(--brown); }
.splash__logo, .logo, .connect__logo { display: block; background: url(../icons/ahw-monogram.png) center / contain no-repeat; }
.logo { background-image: var(--logo, url(../icons/ahw-monogram.png)); }
.splash__logo { width: 62px; height: 86px; }

/* ---------- Shell ---------- */
.top {
	flex: none; position: sticky; top: 0; z-index: 50; height: var(--top);
	padding: var(--top-gap) max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px));
	display: flex; align-items: center; gap: 4px; background: var(--brown); color: var(--cream);
}
.top__brand { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; flex: none; }
.logo { width: 28px; height: 40px; background-size: contain; }
.top__back { width: 32px; margin-left: -4px; }
.top__title { flex: 1; min-width: 0; margin-left: 4px; font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top__side { display: flex; }
.top__btn { width: 44px; height: 44px; border: 0; border-radius: 12px; background: none; color: var(--oat); display: flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; }
.top__btn:hover, .top__btn:active { color: var(--cream); background: rgba(245, 241, 232, 0.08); }
.view { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; outline: none; }
.view > * { flex: none; }
.view { padding: 16px 16px 28px; display: flex; flex-direction: column; gap: 16px; }
.tabs {
	flex: none; position: relative; z-index: 50; height: var(--tabs);
	padding: 6px max(6px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(6px, env(safe-area-inset-left, 0px));
	display: flex; align-items: flex-start; justify-content: space-around;
	background: rgba(255, 255, 255, 0.97); box-shadow: 0 -10px 30px -18px rgba(53, 35, 28, 0.4); backdrop-filter: blur(8px);
}
.tab { flex: 1 1 0; min-width: 0; height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); text-decoration: none; font-size: 10.5px; font-weight: 600; line-height: 1; }
.tab__label { white-space: nowrap; }
.tab.is-active { color: var(--brown); }
.tab__icon { width: 52px; height: 28px; border-radius: 999px; display: flex; align-items: center; justify-content: center; }
.tab.is-active .tab__icon { background: color-mix(in srgb, var(--rose) 22%, transparent); }
.tab--add .tab__icon { width: 52px; height: 52px; margin-top: -22px; background: var(--brown); color: var(--cream); box-shadow: 0 8px 18px -6px rgba(53, 35, 28, 0.55); }
.tab--add.is-active .tab__icon { background: var(--rose); }
.app--bare .top, .app--notabs .tabs { display: none; }
.app--bare .view { padding-top: calc(env(safe-area-inset-top, 0px) + 28px); padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }
.view--editor { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }

/* ---------- Pieces ---------- */
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: color-mix(in srgb, var(--rose) 75%, #000); }
.eyebrow--light { color: var(--oat); }
.card { background: var(--white); border-radius: 18px; box-shadow: var(--shadow); padding: 18px; }
.cardhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cardhead h2 { font-size: 17px; font-weight: 600; }
.hint { font-size: 13px; color: var(--muted); }
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 999px;
	border: 1px solid rgba(53, 35, 28, 0.18); background: var(--white); color: var(--brown); font-weight: 600; font-size: 15px; line-height: 1.2; text-decoration: none; cursor: pointer;
	white-space: nowrap; min-width: 0;
}
.btnrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.btn:active { transform: scale(0.98); }
.btn--primary { background: var(--brown); border-color: var(--brown); color: var(--cream); }
.btn--danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 35%, transparent); background: transparent; }
.btn--block { width: 100%; }
.btn:disabled { opacity: 0.6; }
.iconbtn { width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.iconbtn:hover { background: var(--cream); color: var(--brown); }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); min-width: 0; }
.field input, .field select, .field textarea, .dialnew input[type="text"] {
	width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(53, 35, 28, 0.18); background: var(--white);
	font-size: 16px; font-weight: 400; color: var(--brown); appearance: none; -webkit-appearance: none;
}
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2376675e' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.field textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--rose); outline-offset: 1px; border-color: transparent; }
.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.form-msg { padding: 12px 14px; border-radius: 12px; background: #fbeeec; color: var(--red); font-size: 14px; }
.loading { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 28px 0; }
.empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 36px 16px; text-align: center; color: var(--muted); background: var(--white); border-radius: 18px; box-shadow: var(--shadow-soft); }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: #eef3ee; color: #2f5a31; white-space: nowrap; }
.pill__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill--reserved { background: #f7efe0; color: #855a17; }
.pill--sold { background: #f5e8e6; color: #8f5d56; }
.pill--draft { background: #ecebe8; color: #5c554f; }

/* ---------- Connect ---------- */
.connect { max-width: 440px; width: 100%; margin: 0 auto; padding-top: 6vh; display: flex; flex-direction: column; gap: 14px; text-align: center; }
.connect__logo { width: 64px; height: 90px; margin: 0 auto 6px; filter: brightness(0.35) sepia(0.4); }
.connect__title { font-size: 30px; font-weight: 300; line-height: 1.15; }
.connect__lead { color: var(--muted); }
.connect__form { display: flex; flex-direction: column; gap: 14px; text-align: left; margin-top: 8px; }
.connect__manual { font-size: 14px; }
.connect__manual summary { cursor: pointer; color: var(--muted); padding: 6px 0; }
.connect__manual[open] { display: flex; flex-direction: column; gap: 12px; }
.connect__manual .field { margin-top: 10px; }
.connect__foot, .connect__back { font-size: 13px; color: var(--muted); }
.connect__credit { font-size: 12px; letter-spacing: 0.04em; color: var(--muted); order: 99; margin-top: 6px; }

/* ---------- Home ---------- */
.banner { background: var(--brown); color: var(--cream); border-radius: 22px; padding: 22px; box-shadow: var(--shadow); }
.banner__value { margin-top: 6px; font-size: clamp(34px, 9vw, 46px); font-weight: 300; line-height: 1.05; }
.banner__note { margin-top: 4px; font-size: 12px; color: color-mix(in srgb, var(--oat) 85%, transparent); }
.banner__stats { margin-top: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.banner__stats a { display: flex; flex-direction: column; gap: 2px; padding: 10px 8px; border-radius: 14px; background: rgba(245, 241, 232, 0.07); text-decoration: none; }
.banner__stats strong { font-size: 22px; font-weight: 400; line-height: 1.1; }
.banner__stats span { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--oat); }
.sechead { display: flex; align-items: baseline; justify-content: space-between; margin-top: 4px; }
.sechead h2 { font-size: 18px; font-weight: 600; }
.sechead a { font-size: 14px; font-weight: 600; color: color-mix(in srgb, var(--rose) 75%, #000); text-decoration: none; }

/* ---------- Watch cards ---------- */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wcard { min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 10px 10px 14px; border-radius: 16px; background: var(--white); box-shadow: var(--shadow); }
.wcard.is-sold { opacity: 0.78; }
.wcard__top { display: flex; align-items: center; justify-content: space-between; min-height: 40px; margin: -2px -4px 0 0; }
.wcard__media { height: 132px; border-radius: 10px; background: var(--cream); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.wcard__media img { max-width: 90%; max-height: 122px; object-fit: contain; mix-blend-mode: multiply; opacity: 0; transition: opacity 0.2s; }
.wcard__media img.is-loaded { opacity: 1; }
.wcard__ph { color: var(--oat); }
.wcard__brand { margin-top: 4px; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in srgb, var(--rose) 75%, #000); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wcard__model { font-size: 15px; font-weight: 500; line-height: 1.25; }
.wcard__model a { text-decoration: none; }
.wcard__meta { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.wcard__price { font-size: 15px; font-weight: 600; margin-top: auto; }

/* ---------- Inventory ---------- */
.search { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; border-radius: 999px; background: var(--white); box-shadow: var(--shadow-soft); color: var(--muted); }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 16px; outline: none; appearance: none; -webkit-appearance: none; }
.search:focus-within { outline: 2px solid var(--rose); outline-offset: 2px; }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 4px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(53, 35, 28, 0.16); background: var(--white); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.chip span { font-weight: 400; opacity: 0.7; }
.chip.is-active { background: var(--brown); border-color: var(--brown); color: var(--cream); }
.selectrow select { width: 100%; min-height: 44px; padding: 0 40px 0 16px; border-radius: 999px; border: 1px solid rgba(53, 35, 28, 0.16); background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2376675e' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; font-size: 15px; appearance: none; -webkit-appearance: none; }
.count { font-size: 13px; color: var(--muted); min-height: 20px; }
.more { display: flex; justify-content: center; }

/* ---------- Editor ---------- */
.editor { display: flex; flex-direction: column; gap: 16px; }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.photos__empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 0; border: 1.5px dashed color-mix(in srgb, var(--rose) 60%, transparent); border-radius: 14px; color: var(--muted); font-size: 14px; }
.photo { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--cream); }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo.is-uploading img { opacity: 0.55; }
.photo__main { position: absolute; top: 6px; left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--brown); color: var(--cream); font-size: 10.5px; font-weight: 600; }
.photo__bar { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.7); overflow: hidden; }
.photo__bar i { display: block; height: 100%; background: var(--brown); transition: width 0.15s; }
.photo__err { position: absolute; inset: auto 0 34px 0; padding: 4px 6px; background: var(--red); color: #fff; font-size: 10.5px; line-height: 1.2; }
.photo__tools { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: flex-end; gap: 2px; padding: 4px; background: linear-gradient(transparent, rgba(53, 35, 28, 0.55)); }
.photo.is-uploading .photo__tools { background: none; }
.photo__tools button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--brown); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.photoadd { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.photoadd .btn { padding: 0 10px; font-size: 14.5px; }
.seg { border: 0; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.seg legend, .dials legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.seg__item { position: relative; flex: 1 1 90px; }
.seg__item input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg__item span { display: flex; align-items: center; justify-content: center; min-height: 46px; border-radius: 999px; border: 1px solid rgba(53, 35, 28, 0.18); background: var(--white); font-weight: 600; font-size: 14px; }
.seg__item input:checked + span { background: var(--green); border-color: var(--green); color: #fff; }
.seg__item--reserved input:checked + span { background: var(--amber); border-color: var(--amber); }
.seg__item--sold input:checked + span { background: var(--rose); border-color: var(--rose); }
.seg__item input:focus-visible + span { outline: 2px solid var(--rose); outline-offset: 2px; }
.toggles { display: flex; gap: 22px; margin-top: 16px; }
.toggle { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; }
.toggle__ui { width: 46px; height: 28px; border-radius: 999px; background: #d9d2c6; position: relative; transition: background-color 0.15s; }
.toggle__ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.15s; }
.toggle input:checked + .toggle__ui { background: var(--brown); }
.toggle input:checked + .toggle__ui::after { transform: translateX(18px); }
.toggle input:focus-visible + .toggle__ui { outline: 2px solid var(--rose); outline-offset: 2px; }
.dials { border: 0; padding: 0; margin: 0 0 16px; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 14px 4px 6px; border-radius: 999px; border: 1px solid rgba(53, 35, 28, 0.16); background: var(--white); font-size: 14px; cursor: pointer; }
.swatch.is-on { border-color: var(--brown); box-shadow: 0 0 0 1px var(--brown); background: var(--cream); font-weight: 600; }
.swatch__chip { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(53, 35, 28, 0.25); display: inline-flex; align-items: center; justify-content: center; }
.swatch__chip--none { background: repeating-linear-gradient(45deg, #fff 0 4px, #e6ddd1 4px 8px); }
.swatch--add { border-style: dashed; color: var(--muted); }
.dialnew { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; padding: 12px; border-radius: 14px; background: var(--cream); }
.dialnew input[type="color"] { width: 48px; height: 48px; padding: 0; border: 1px solid rgba(53, 35, 28, 0.25); border-radius: 50%; background: none; overflow: hidden; cursor: pointer; }
.dialnew input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.dialnew input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.dialnew input[type="text"] { flex: 1 1 160px; width: auto; }
.savebar {
	position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
	background: rgba(255, 255, 255, 0.97); box-shadow: 0 -14px 32px -24px rgba(53, 35, 28, 0.45); backdrop-filter: blur(8px);
}
.savebar__state { font-size: 13px; color: var(--muted); display: none; }
.savebar__btns { flex: 1; display: flex; justify-content: flex-end; gap: 10px; min-width: 0; }
.savebar__btns .btn { padding: 0 18px; }
.savebar__btns .btn--primary { flex: 1; max-width: 280px; }

/* ---------- Website ---------- */
.sitecard { display: flex; flex-direction: column; gap: 4px; }
.sitecard__name { font-size: 22px; font-weight: 600; line-height: 1.2; margin-top: 4px; }
.sitecard__url { font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.sitecard .btnrow { margin-top: 14px; }

/* ---------- Settings home ---------- */
.profile { display: flex; align-items: center; gap: 14px; }
.profile__avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--cream); }
.profile__name { font-size: 18px; font-weight: 600; }
.profile__site { font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.list { padding: 4px 6px; }
.list__item { width: 100%; display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 0 12px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; text-decoration: none; font-size: 16px; cursor: pointer; color: var(--brown); }
.list__item:last-child { border-bottom: 0; }
.list__item span { flex: 1; min-width: 0; }
.list__item > .i:first-child { color: var(--muted); }
.list__item > .i:last-child { color: var(--oat); }
.list__item.is-danger, .list__item.is-danger > .i:first-child { color: var(--red); }
.listhead { margin: 6px 4px -6px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.about { text-align: center; font-size: 12px; color: var(--muted); padding: 8px 16px 0; }

/* ---------- Set-up screens: Settings, Brands, lists ---------- */
.fold { padding: 0; }
.fold > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 18px; cursor: pointer; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary h2 { flex: 1; min-width: 0; font-size: 17px; font-weight: 600; }
.fold > summary > .i { color: var(--oat); transition: transform 0.15s; }
.fold[open] > summary > .i { transform: rotate(90deg); }
.fold__intro { padding: 0 18px; margin-top: -8px; }
.setfields { display: flex; flex-direction: column; gap: 16px; padding: 14px 18px 20px; }
.field__help { font-size: 12.5px; font-weight: 400; color: var(--muted); }
.field--short { max-width: 220px; }
.toggle--row { display: flex; justify-content: flex-start; font-weight: 500; line-height: 1.35; }
.toggle--row .toggle__ui { flex: none; }
.seg--plain { margin: 0; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.seg--plain .seg__item input:checked + span { background: var(--brown); border-color: var(--brown); color: var(--cream); }
.colorfield { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.colorfield input[type="color"] { width: 44px; height: 44px; padding: 0; border: 1px solid rgba(53, 35, 28, 0.25); border-radius: 50%; background: none; overflow: hidden; cursor: pointer; flex: none; }
.colorfield input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.colorfield input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.colorfield label { flex: 1; }
.linkbtn { border: 0; background: none; padding: 6px 0; color: color-mix(in srgb, var(--rose) 75%, #000); font-size: 14px; font-weight: 600; text-decoration: underline; cursor: pointer; }
.linkbtn.is-danger { color: var(--red); }
.btn--small { min-height: 40px; padding: 0 16px; font-size: 14px; align-self: flex-start; }
.logofield { display: flex; align-items: center; gap: 16px; }
.logofield__preview { flex: none; width: 76px; height: 96px; border-radius: 14px; background: var(--brown); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.logofield__preview.is-default { background: var(--brown) url(../icons/ahw-monogram.png) center / 44px auto no-repeat; }
.logofield__preview img { max-width: 60px; max-height: 80px; }
.logofield__label { font-weight: 600; margin-bottom: 8px; }
.logofield__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.brand__meta { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.rows { display: flex; flex-direction: column; margin: 12px 0; }
.row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.row__main small { color: var(--muted); font-size: 12.5px; }

/* ---------- Compact settings (grouped lists, slim rows) ---------- */
.sprofile { display: flex; align-items: center; gap: 12px; padding: 2px 4px; }
.sprofile__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--white); }
.sprofile__name { font-size: 17px; font-weight: 600; line-height: 1.2; }
.sprofile__site { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.search--flat { height: 42px; box-shadow: none; background: color-mix(in srgb, var(--brown) 7%, var(--cream)); }
.search--flat input { font-size: 16px; }
.sgroup { display: flex; flex-direction: column; gap: 8px; }
.sgroup__title { margin: 6px 4px 0; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.sgroup__intro { margin: 0 4px; }
.sgroup__rows { background: var(--white); border-radius: 14px; box-shadow: var(--shadow-soft); overflow: hidden; }
.srow, .setrow {
	width: 100%; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 14px; border: 0; border-bottom: 1px solid var(--line);
	background: none; text-align: left; text-decoration: none; font-size: 15.5px; color: var(--brown); cursor: pointer;
}
.sgroup__rows > :last-child { border-bottom: 0; }
.srow > .i:first-child { color: var(--muted); }
.srow > .i:last-child { color: var(--oat); }
.srow__label, .setrow__label { flex: 1; min-width: 0; }
.srow__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srow__val { flex: none; max-width: 46%; display: inline-flex; align-items: center; gap: 3px; font-size: 13.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srow__val.is-match { font-size: 0; }
.srow__val.is-match::after { content: attr(data-match); font-size: 12.5px; color: color-mix(in srgb, var(--rose) 75%, #000); text-transform: capitalize; }
.srow__val .dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(53, 35, 28, 0.2); }
.srow.is-danger, .srow.is-danger > .i:first-child { color: var(--red); }
.srow:active { background: color-mix(in srgb, var(--brown) 5%, transparent); }
.setrow { cursor: pointer; line-height: 1.3; }
.setrow input[type="checkbox"] { position: absolute; opacity: 0; }
.setrow .toggle__ui { flex: none; }
.setrow input:checked + .toggle__ui { background: var(--brown); }
.setrow input:checked + .toggle__ui::after { transform: translateX(18px); }
.setrow input:focus-visible + .toggle__ui { outline: 2px solid var(--rose); outline-offset: 2px; }
.setrow--color { cursor: default; }
.setrow--color input[type="color"] { flex: none; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(53, 35, 28, 0.25); border-radius: 50%; background: none; overflow: hidden; cursor: pointer; }
.setrow--color input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.setrow--color input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.setrow--color .linkbtn { font-size: 13px; padding: 4px 0; }
.sblock { display: flex; flex-direction: column; gap: 14px; padding: 14px; background: var(--white); border-radius: 14px; box-shadow: var(--shadow-soft); }
.editor--compact { gap: 18px; }
.editor--compact .sgroup { gap: 10px; }
.editor--compact .field input, .editor--compact .field select, .editor--compact .field textarea { min-height: 44px; }
.editor--compact .seg__item span { min-height: 40px; font-size: 13.5px; }
.editor--compact .pv { padding: 0; display: flex; flex-direction: column; gap: 8px; }
.editor--compact .logofield__preview { width: 60px; height: 76px; }
.sdetails { font-size: 13px; color: var(--muted); padding: 0 4px; }
.sdetails summary { cursor: pointer; padding: 6px 0; }
.sdetails .diag { padding: 6px 0 0; }
.about { padding-top: 0; }

/* Enhance photos */
.enhance { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.enhance .btn { border-color: color-mix(in srgb, var(--rose) 60%, transparent); }
.enhance .btn:disabled { opacity: 0.55; }
.photo__done { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--brown); display: flex; align-items: center; justify-content: center; }
.photo__busy { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.72); font-size: 12px; font-weight: 600; color: var(--brown); }

/* Write-it-for-me and the Bin */
.writebar { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.writebar .btn { align-self: flex-start; border-color: color-mix(in srgb, var(--rose) 60%, transparent); }
.binrow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.binrow__img { flex: none; width: 46px; height: 46px; border-radius: 10px; background: var(--cream); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--oat); }
.binrow__img img { width: 100%; height: 100%; object-fit: cover; }
.binrow__text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.binrow__text strong { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.binrow__text small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.binrow .btn--small { min-height: 38px; padding: 0 12px; font-size: 13.5px; align-self: center; }
.iconbtn.is-danger { color: var(--red); }
.sheet__btn.is-danger .i { color: var(--red); }

/* Live previews in Settings */
.pv { padding: 0 18px 20px; }
.pv .eyebrow { margin-bottom: 10px; }
.pv__frame { position: relative; overflow: hidden; border-radius: 14px; border: 1px dashed rgba(53, 35, 28, 0.2); background: var(--cream); }
.pv__frame iframe { display: block; border: 0; transform-origin: 0 0; pointer-events: none; }
.pv__frame .hint { padding: 16px; }

.diag { font: 12px/1.5 ui-monospace, Menlo, monospace; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; padding: 4px 18px 18px; }

/* ---------- Sheets and toasts ---------- */
.sheet-shade { position: fixed; inset: 0; z-index: 90; background: rgba(53, 35, 28, 0.35); animation: fade 0.18s; }
.sheet {
	position: fixed; z-index: 91; left: 0; right: 0; bottom: 0; max-width: 520px; margin: 0 auto; padding: 10px 12px calc(14px + env(safe-area-inset-bottom, 0px));
	background: var(--white); border-radius: 22px 22px 0 0; box-shadow: 0 -20px 60px -20px rgba(53, 35, 28, 0.5); animation: up 0.22s ease-out;
}
.sheet__grab { width: 40px; height: 4px; border-radius: 2px; background: #ddd5c8; margin: 0 auto 12px; }
.sheet__title { font-size: 17px; font-weight: 600; text-align: center; padding: 0 12px; }
.sheet__sub { font-size: 14px; color: var(--muted); text-align: center; padding: 2px 12px 0; }
.sheet__actions { display: flex; flex-direction: column; margin-top: 12px; }
.sheet__btn { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 14px; border: 0; border-radius: 14px; background: none; font-size: 16px; text-align: left; cursor: pointer; }
.sheet__btn span { flex: 1; }
.sheet__btn:hover, .sheet__btn:focus-visible { background: var(--cream); }
.sheet__btn.is-current { font-weight: 600; }
.sheet__btn.is-danger { color: var(--red); font-weight: 600; }
.sheet__cancel { width: 100%; min-height: 50px; margin-top: 8px; border: 0; border-radius: 999px; background: var(--cream); font-weight: 600; font-size: 16px; cursor: pointer; }
.toast {
	position: fixed; z-index: 100; left: 50%; bottom: calc(var(--tabs) + 16px); transform: translateX(-50%); max-width: min(92vw, 440px);
	padding: 12px 18px; border-radius: 14px; background: var(--brown); color: var(--cream); font-size: 14px; font-weight: 500; text-align: center; box-shadow: var(--shadow); animation: up 0.2s ease-out;
}
.toast--error { background: var(--red); color: #fff; }
.app--notabs ~ .toast { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
@keyframes up { from { transform: translateY(24px); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
.toast { animation-name: toastup; }
@keyframes toastup { from { transform: translate(-50%, 16px); opacity: 0; } }

/* ---------- Tablet and desktop: side rail, wider grid ---------- */
@media (min-width: 600px) {
	.grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
	.wcard { padding: 14px 14px 16px; }
	.wcard__media { height: 170px; }
	.wcard__media img { max-height: 156px; }
	.savebar__state { display: block; }
	.home__add { align-self: flex-start; width: auto; }
}
@media (min-width: 900px) {
	:root { --top: 76px; --top-gap: 0px; --tabs: 0px; --rail: 88px; }
	.pv__frame { max-width: 820px; }
	.editor--compact, .sgroup, .search--flat, .sprofile { max-width: 760px; }
	.app { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
	.top { grid-column: 2; grid-row: 1; padding: 0 32px; background: var(--cream); color: var(--brown); }
	.top__back { width: 44px; margin-left: -12px; }
	.top__brand { display: none; }
	.top__title { font-size: 28px; font-weight: 300; margin-left: 8px; }
	.top__btn { color: var(--muted); }
	.top__btn:hover { background: rgba(53, 35, 28, 0.06); color: var(--brown); }
	.tabs {
		grid-column: 1; grid-row: 1 / span 2; width: var(--rail); height: auto; flex-direction: column; justify-content: flex-start; align-items: center; gap: 10px;
		padding: 24px 0; background: var(--brown); box-shadow: none; backdrop-filter: none;
	}
	.tabs::before { content: ""; flex: none; width: 40px; height: 56px; margin-bottom: 14px; background: var(--logo, url(../icons/ahw-monogram.png)) center / contain no-repeat; }
	.tab { flex: none; width: 64px; height: 60px; color: color-mix(in srgb, var(--oat) 85%, transparent); }
	.tab.is-active { color: var(--cream); }
	.tab--add .tab__icon { margin-top: 0; width: 48px; height: 48px; background: var(--rose); color: #fff; box-shadow: none; }
	.tab--add { height: 72px; }
	.view { grid-column: 2; grid-row: 2; padding: 8px 40px 60px; gap: 20px; }
	.view > * { width: 100%; max-width: 1320px; }
	.app--notabs .tabs { display: flex; }
	.view--editor { padding-bottom: 120px; }
	.app--bare { display: flex; }
	.app--bare .tabs { display: none; }
	.app--bare .view { padding: 40px; }
	.savebar { left: var(--rail); padding-left: 40px; padding-right: 40px; }
	.toast { bottom: 28px; }
	.app--notabs ~ .toast { bottom: 96px; }
	.sheet { bottom: auto; top: 50%; transform: translateY(-50%); border-radius: 22px; animation-name: fade; }
	.editor { max-width: 860px; }
	.banner { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0 40px; padding: 28px 32px; }
	.banner__stats { grid-row: 1 / span 3; grid-column: 2; margin: 0; min-width: 420px; }
	.photos { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; }
}