:root {
  color-scheme: light;
  --ink: #07162f;
  --ink-2: #102a50;
  --paper: #f3f6f9;
  --white: #fff;
  --muted: #66738a;
  --line: #dbe2ea;
  --electric: #29e9ba;
  --blue: #138bc5;
  --green: #15815f;
  --amber: #bc6a21;
  --red: #c44343;
  --violet: #6256c7;
  --sidebar: 254px;
  --shadow: 0 20px 55px rgba(7,22,47,.09);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 16px/1.65 "Leelawadee UI", "Noto Sans Thai", Tahoma, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 15px; top: 10px; z-index: 1000; transform: translateY(-150%); background: var(--white); padding: 9px 14px; }
.skip-link:focus { transform: translateY(0); }
.mono-label { margin: 0 0 10px; color: var(--blue); font: 750 .66rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .15em; }
.admin-logo { color: var(--ink); text-decoration: none; font-size: 1.3rem; font-weight: 550; letter-spacing: -.035em; }
.admin-logo span { color: var(--blue); font-weight: 850; }

.admin-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 50; width: var(--sidebar); padding: 29px 20px 22px; display: flex; flex-direction: column; color: var(--white); background: var(--ink); }
.admin-logo--sidebar { padding: 0 10px 28px; color: var(--white); border-bottom: 1px solid rgba(255,255,255,.1); }
.admin-logo--sidebar span { color: var(--electric); }
.admin-logo--sidebar small { display: block; margin-top: 2px; color: rgba(255,255,255,.35); font: 700 .52rem ui-monospace, monospace; letter-spacing: .22em; }
.admin-nav { margin-top: 27px; display: flex; flex-direction: column; gap: 5px; }
.admin-nav a { display: flex; gap: 12px; align-items: center; padding: 11px 12px; color: rgba(255,255,255,.6); border-radius: 5px; text-decoration: none; font-size: .9rem; font-weight: 620; }
.admin-nav a:hover { color: var(--white); background: rgba(255,255,255,.055); }
.admin-nav a.is-active { color: var(--ink); background: var(--electric); }
.admin-nav i { width: 22px; font-style: normal; font-family: ui-monospace, monospace; text-align: center; }
.sidebar-bottom { margin-top: auto; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); }
.sidebar-bottom a, .sidebar-bottom button { width: 100%; padding: 9px 10px; display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.58); background: transparent; border: 0; text-decoration: none; cursor: pointer; font-size: .83rem; }
.sidebar-bottom a:hover, .sidebar-bottom button:hover { color: var(--white); }
.admin-page { min-height: 100vh; margin-left: var(--sidebar); display: flex; flex-direction: column; }
.admin-topbar { min-height: 68px; padding: 0 36px; display: flex; align-items: center; justify-content: flex-end; gap: 28px; background: rgba(255,255,255,.9); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); }
.admin-topbar > div:first-of-type { margin-right: auto; color: var(--muted); font-size: .76rem; }
.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--electric); box-shadow: 0 0 0 4px rgba(41,233,186,.15); }
.admin-identity { display: flex; align-items: center; gap: 10px; }
.admin-identity > span { width: 35px; height: 35px; display: grid; place-items: center; color: var(--white); background: var(--ink); border-radius: 50%; font-size: .75rem; font-weight: 800; }
.admin-identity div { display: flex; flex-direction: column; line-height: 1.25; }
.admin-identity small { color: var(--muted); font-size: .66rem; }
.admin-identity b { font-size: .8rem; }
.sidebar-toggle { display: none; width: 40px; height: 40px; padding: 8px; background: transparent; border: 0; }
.sidebar-toggle span { display: block; width: 22px; height: 2px; margin: 4px; background: var(--ink); }
.admin-main { width: min(1200px, calc(100% - 72px)); margin: 0 auto; padding: 48px 0 70px; flex: 1; }
.admin-footer { min-height: 55px; padding: 0 36px; display: flex; justify-content: space-between; align-items: center; color: #8a95a7; border-top: 1px solid var(--line); font: 650 .58rem ui-monospace, monospace; letter-spacing: .09em; }
.sidebar-backdrop { display: none; }

.page-heading { margin-bottom: 34px; display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; }
.page-heading h1 { margin: 0; font-size: clamp(2.15rem, 4vw, 3.15rem); line-height: 1.14; letter-spacing: -.055em; }
.page-heading p:not(.mono-label) { margin: 10px 0 0; color: var(--muted); }
.page-heading--form { margin-bottom: 25px; }
.back-link { display: inline-block; margin-bottom: 16px; color: var(--muted); text-decoration: none; font-size: .82rem; }
.back-link:hover { color: var(--blue); }
.admin-button { min-height: 44px; padding: 8px 18px; display: inline-flex; align-items: center; justify-content: center; gap: 25px; border: 1px solid transparent; border-radius: 4px; text-decoration: none; cursor: pointer; font-weight: 700; transition: transform .18s ease, box-shadow .18s ease; }
.admin-button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(7,22,47,.12); }
.admin-button:disabled { cursor: not-allowed; opacity: .55; }
.admin-button--primary { color: var(--white); background: var(--ink); }
.admin-button--secondary { color: var(--ink); background: var(--white); border-color: var(--line); }
.admin-button--full { width: 100%; }

.alert { margin: 0 0 22px; padding: 13px 16px; border: 1px solid; border-radius: 4px; font-size: .88rem; }
.alert--success { color: #116348; background: #e4f7ef; border-color: #b4e8d5; }
.alert--warning { color: #7e5515; background: #fff6dc; border-color: #f1d999; }
.alert--error { color: #922e2e; background: #fff0f0; border-color: #efbaba; }
.alert ul { margin: 7px 0 0; padding-left: 22px; }
.admin-card { background: var(--white); border: 1px solid var(--line); box-shadow: 0 8px 28px rgba(7,22,47,.035); }
.card-heading { min-height: 58px; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.card-heading > div { display: flex; align-items: center; gap: 11px; }
.card-heading .mono-label { display: block; margin-bottom: 5px; }
.card-heading h2 { margin: 0; font-size: 1.06rem; letter-spacing: -.02em; }
.card-heading a { color: var(--blue); text-decoration: none; font-size: .82rem; font-weight: 700; }
.step-number { width: 27px; height: 27px; display: grid; place-items: center; color: var(--white); background: var(--ink); border-radius: 50%; font: 750 .58rem ui-monospace, monospace; }

.metric-grid { margin-bottom: 25px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.metric-card { --metric: var(--ink); position: relative; min-height: 164px; padding: 22px; overflow: hidden; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); }
.metric-card::after { content: ""; position: absolute; width: 85px; height: 85px; right: -44px; top: -42px; border: 12px solid color-mix(in srgb, var(--metric), transparent 88%); border-radius: 50%; }
.metric-card > span { color: var(--muted); font-size: .83rem; }
.metric-card strong { margin: auto 0 3px; color: var(--metric); font-size: 3.1rem; line-height: 1; letter-spacing: -.06em; }
.metric-card small { color: #9aa4b4; font: 700 .58rem ui-monospace, monospace; letter-spacing: .12em; }
.metric-card--green { --metric: var(--green); }
.metric-card--blue { --metric: var(--blue); }
.metric-card--muted { --metric: #7f8998; }
.recent-list > a { min-height: 83px; padding: 13px 18px; display: grid; grid-template-columns: 52px 1fr auto 20px; gap: 14px; align-items: center; color: inherit; border-top: 1px solid var(--line); text-decoration: none; }
.recent-list > a:first-child { border-top: 0; }
.recent-list > a:hover { background: #f9fbfc; }
.recent-list > a > b { color: #a0a9b5; font-size: 1.35rem; }
.recent-title { min-width: 0; display: flex; flex-direction: column; }
.recent-title b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .93rem; }
.recent-title small { color: var(--muted); font-size: .74rem; }
.banner-thumb { width: 52px; height: 52px; display: grid; place-items: center; overflow: hidden; color: var(--white); background: #174b78; border-radius: 3px; font: 800 1rem ui-monospace, monospace; }
.banner-thumb img { width: 100%; height: 100%; object-fit: cover; }
.banner-thumb--amber { background: #8b501f; }
.banner-thumb--violet { background: #5143ae; }
.banner-thumb--emerald { background: #17654f; }
.status-badge { display: inline-flex; width: max-content; padding: 5px 9px; border-radius: 999px; font-size: .67rem; font-weight: 750; white-space: nowrap; }
.status-badge--live { color: #08714e; background: #daf5ea; }
.status-badge--scheduled { color: #1d6290; background: #dff2fd; }
.status-badge--expired { color: #925c1c; background: #fff0d8; }
.status-badge--neutral { color: #657085; background: #edf0f4; }
.empty-state { padding: 70px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.empty-state > span { width: 60px; height: 60px; display: grid; place-items: center; color: var(--blue); background: #e1f3fb; border-radius: 50%; font-size: 1.5rem; }
.empty-state h2, .empty-state h3 { margin: 17px 0 5px; }
.empty-state p { max-width: 470px; margin: 0 0 22px; color: var(--muted); }
.empty-state--large { min-height: 420px; justify-content: center; }

.list-toolbar { margin-bottom: 12px; display: flex; justify-content: space-between; color: var(--muted); font-size: .74rem; }
.banner-table-card { background: var(--white); border: 1px solid var(--line); box-shadow: 0 8px 28px rgba(7,22,47,.035); }
.banner-table { display: grid; grid-template-columns: minmax(260px, 1.35fr) minmax(170px, .8fr) 92px 110px 150px; gap: 16px; align-items: center; }
.banner-table--head { padding: 11px 18px; color: #8994a5; background: #f8fafc; border-bottom: 1px solid var(--line); font: 700 .6rem ui-monospace, monospace; letter-spacing: .09em; }
.banner-table--row { min-height: 94px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.banner-table--row:last-child { border-bottom: 0; }
.banner-cell-main { min-width: 0; display: flex; align-items: center; gap: 13px; }
.banner-cell-main > span:last-child { min-width: 0; display: flex; flex-direction: column; }
.banner-cell-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.banner-cell-main small, .schedule-cell small { color: var(--muted); font-size: .71rem; }
.schedule-cell { display: flex; flex-direction: column; font-size: .77rem; }
.order-cell { display: flex; gap: 8px; align-items: center; }
.order-cell > span { min-width: 23px; font-weight: 750; }
.order-buttons { display: flex; }
.order-buttons form { display: inline-flex; }
.order-buttons button { width: 27px; height: 27px; padding: 0; color: var(--muted); background: var(--white); border: 1px solid var(--line); cursor: pointer; }
.order-buttons button:disabled { opacity: .3; cursor: default; }
.row-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.row-actions form { display: inline; }
.row-actions a, .row-actions button { padding: 3px; color: var(--blue); background: none; border: 0; text-decoration: none; cursor: pointer; font-size: .73rem; }
.row-actions .danger-link { color: var(--red); }

.editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; align-items: start; }
.editor-main { display: grid; gap: 18px; }
.editor-side { position: sticky; top: 20px; display: grid; gap: 18px; }
.form-card { padding-bottom: 23px; }
.form-card > .field, .form-card > .field-grid, .form-card > .switch-field, .form-card > .upload-field, .form-card > .current-image, .form-card > form { margin-left: 22px; margin-right: 22px; }
.form-card .card-heading { margin-bottom: 22px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field + .field { margin-top: 17px; }
.field > span { font-size: .82rem; font-weight: 720; }
.field > span b { color: var(--red); }
.field small { color: var(--muted); font-size: .69rem; }
.field input, .field textarea, .field select { width: 100%; padding: 10px 12px; color: var(--ink); background: var(--white); border: 1px solid #cbd4df; border-radius: 3px; outline: 0; }
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(19,139,197,.12); }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field-grid .field + .field { margin-top: 0; }
.field--small { max-width: 210px; margin-top: 18px; }
.upload-field { position: relative; min-height: 145px; padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ink); background: #f8fbfd; border: 1px dashed #acbac9; cursor: pointer; text-align: center; }
.upload-field:hover { border-color: var(--blue); background: #f2faff; }
.upload-field input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload-field .upload-icon { width: 35px; height: 35px; display: grid; place-items: center; color: var(--white); background: var(--blue); border-radius: 50%; }
.upload-field b { margin-top: 8px; font-size: .86rem; }
.upload-field small { color: var(--muted); font-size: .7rem; }
.upload-field em { margin-top: 6px; color: var(--blue); font-size: .7rem; font-style: normal; }
.current-image { margin-bottom: 16px; display: grid; grid-template-columns: 190px 1fr; gap: 16px; align-items: center; }
.current-image img { width: 190px; height: 110px; object-fit: cover; }
.current-image label { font-size: .77rem; }
.switch-field { margin-top: 22px; display: flex; gap: 12px; align-items: center; cursor: pointer; }
.switch-field > input[type="checkbox"] { position: absolute; opacity: 0; }
.switch-ui { position: relative; width: 43px; height: 24px; flex: 0 0 auto; background: #c4ccd6; border-radius: 999px; transition: background .2s; }
.switch-ui::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; background: var(--white); border-radius: 50%; transition: transform .2s; box-shadow: 0 2px 5px rgba(0,0,0,.22); }
.switch-field input:checked + .switch-ui { background: var(--green); }
.switch-field input:checked + .switch-ui::after { transform: translateX(19px); }
.switch-field input:focus-visible + .switch-ui { outline: 3px solid #f4bc42; outline-offset: 2px; }
.switch-field > span:last-child { display: flex; flex-direction: column; }
.switch-field b { font-size: .82rem; }
.switch-field small { color: var(--muted); font-size: .7rem; }
.preview-card, .theme-card { padding: 19px; }
.mini-banner { --mini: #123d69; --mini-accent: #79dafd; min-height: 250px; padding: 22px; display: flex; flex-direction: column; color: var(--white); background: var(--mini); }
.mini-banner--amber { --mini: #704016; --mini-accent: #ffd189; }
.mini-banner--violet { --mini: #3a327e; --mini-accent: #c4bcff; }
.mini-banner--emerald { --mini: #16533f; --mini-accent: #8ee2c1; }
.mini-banner > span { align-self: flex-start; padding: 4px 6px; color: var(--mini); background: var(--mini-accent); font: 800 .52rem ui-monospace, monospace; letter-spacing: .1em; }
.mini-banner h3 { margin: auto 0 8px; font-size: 1.42rem; line-height: 1.25; letter-spacing: -.035em; overflow-wrap: anywhere; }
.mini-banner p { margin: 0 0 16px; color: rgba(255,255,255,.67); font-size: .76rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mini-banner b { color: var(--mini-accent); font-size: .75rem; }
.theme-card h2 { margin: 0 0 15px; font-size: 1rem; }
.theme-options { display: grid; gap: 7px; }
.theme-option { padding: 7px; display: grid; grid-template-columns: 17px 34px 1fr; gap: 9px; align-items: center; border: 1px solid transparent; cursor: pointer; }
.theme-option:has(input:checked) { border-color: #aab6c5; background: #f7f9fb; }
.theme-option input { margin: 0; }
.theme-swatch { width: 34px; height: 34px; background: #123d69; }
.theme-swatch--amber { background: #704016; }
.theme-swatch--violet { background: #3a327e; }
.theme-swatch--emerald { background: #16533f; }
.theme-option > span:last-child { display: flex; flex-direction: column; line-height: 1.3; }
.theme-option b { font-size: .76rem; }
.theme-option small { color: var(--muted); font-size: .65rem; }
.theme-option em { align-self: flex-start; margin-top: 5px; padding: 3px 6px; color: #42536a; background: #e8edf3; font: 700 .52rem/1.2 ui-monospace, monospace; letter-spacing: .04em; font-style: normal; }
.theme-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.theme-option--visual { position: relative; min-width: 0; padding: 10px; grid-template-columns: 17px 124px minmax(0, 1fr); gap: 10px; border-color: #dce3ea; background: #fff; }
.theme-option--visual:hover, .font-option:hover { border-color: #9eacba; background: #fbfcfd; }
.theme-option--visual:has(input:checked), .font-option:has(input:checked) { border-color: var(--blue); background: #f2faff; box-shadow: 0 0 0 2px rgba(19,139,197,.1); }
.theme-option input:focus-visible { outline: 3px solid #f4bc42; outline-offset: 2px; }
.theme-option__copy { min-width: 0; }
.theme-preview { --preview-bg: #09101f; --preview-ink: #f8fbff; --preview-accent: #55f2c4; position: relative; width: 124px; height: 74px; flex: 0 0 auto; overflow: hidden; display: block; color: var(--preview-ink); background: var(--preview-bg); border: 1px solid rgba(7,22,47,.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.theme-preview::before { content: ""; position: absolute; pointer-events: none; }
.theme-preview__nav,
.theme-preview__title,
.theme-preview__cards,
.theme-preview__cards i { position: absolute; display: block; }
.theme-preview__nav { background: currentColor; opacity: .86; }
.theme-preview__title { background: var(--preview-accent); }
.theme-preview__cards i { border: 1px solid color-mix(in srgb, var(--preview-accent) 78%, transparent); background: color-mix(in srgb, var(--preview-accent) 16%, var(--preview-bg)); }

/* 01 — Trinity Gates: intro rail plus three full-height product gates. */
.theme-preview--layout-01 { --preview-bg: #071017; --preview-accent: #bdff38; background-image: linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); background-size: 14px 100%; }
.theme-preview--layout-01 .theme-preview__nav { left: 6px; top: 7px; width: 23px; height: 3px; }
.theme-preview--layout-01 .theme-preview__title { left: 7px; top: 22px; width: 20px; height: 31px; }
.theme-preview--layout-01 .theme-preview__cards { inset: 7px 6px 7px 34px; display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; }
.theme-preview--layout-01 .theme-preview__cards i { position: relative; inset: auto; }
.theme-preview--layout-01 .theme-preview__cards i:nth-child(2) { transform: translateY(5px); }

/* 02 — Orbit Nexus: central hub and three nodes. */
.theme-preview--layout-02 { --preview-bg: #061d31; --preview-accent: #55e6ff; border-radius: 50% 8px 50% 8px; background-image: radial-gradient(circle at 63% 51%,rgba(85,230,255,.15) 0 20px,transparent 21px),linear-gradient(120deg,transparent 49%,rgba(85,230,255,.18) 50%,transparent 51%); }
.theme-preview--layout-02::before { left: 53px; top: 25px; width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--preview-accent); box-shadow: 0 0 10px rgba(85,230,255,.65); }
.theme-preview--layout-02 .theme-preview__nav { left: 7px; top: 8px; width: 27px; height: 3px; }
.theme-preview--layout-02 .theme-preview__title { left: 8px; top: 20px; width: 27px; height: 20px; }
.theme-preview--layout-02 .theme-preview__cards { inset: 0; }
.theme-preview--layout-02 .theme-preview__cards i { width: 12px; height: 12px; border-radius: 50%; }
.theme-preview--layout-02 .theme-preview__cards i:nth-child(1) { left: 58px; top: 6px; }
.theme-preview--layout-02 .theme-preview__cards i:nth-child(2) { right: 14px; top: 30px; }
.theme-preview--layout-02 .theme-preview__cards i:nth-child(3) { left: 55px; bottom: 5px; }

/* 03 — Bento OS: irregular modular dashboard. */
.theme-preview--layout-03 { --preview-bg: #eef4ff; --preview-ink: #14203b; --preview-accent: #5b46ff; padding: 6px; background-image: linear-gradient(135deg,#eef4ff,#dce8ff); }
.theme-preview--layout-03 .theme-preview__nav { left: 7px; top: 7px; width: 31px; height: 4px; }
.theme-preview--layout-03 .theme-preview__title { left: 7px; top: 17px; width: 47px; height: 33px; border-radius: 7px; }
.theme-preview--layout-03 .theme-preview__cards { inset: 7px 7px 7px 59px; display: grid; grid-template-columns: 1.15fr .85fr; grid-template-rows: .8fr 1.2fr; gap: 4px; }
.theme-preview--layout-03 .theme-preview__cards i { position: relative; inset: auto; border-radius: 6px; }
.theme-preview--layout-03 .theme-preview__cards i:nth-child(3) { grid-column: 1 / -1; }
.theme-preview--layout-03::before { left: 7px; right: 70px; bottom: 7px; height: 9px; border-radius: 4px; background: #ffba33; }

/* 04 — Editorial Index: headline column plus three horizontal bands. */
.theme-preview--layout-04 { --preview-bg: #f4efe5; --preview-ink: #17120d; --preview-accent: #ef3f29; background-image: linear-gradient(90deg,transparent 36%,rgba(23,18,13,.18) 36% 37%,transparent 37%); }
.theme-preview--layout-04 .theme-preview__nav { left: 7px; top: 7px; width: 35px; height: 3px; }
.theme-preview--layout-04 .theme-preview__title { left: 7px; top: 20px; width: 32px; height: 39px; }
.theme-preview--layout-04 .theme-preview__cards { left: 49px; right: 7px; top: 8px; bottom: 7px; display: grid; grid-template-rows: 1.45fr .78fr .78fr; gap: 3px; }
.theme-preview--layout-04 .theme-preview__cards i { position: relative; inset: auto; border-color: rgba(23,18,13,.45); background: transparent; border-width: 0 0 1px; }
.theme-preview--layout-04 .theme-preview__cards i:first-child { background: var(--preview-accent); border: 0; }

/* 05 — Card Stage: overlapping deck plus detail rail. */
.theme-preview--layout-05 { --preview-bg: #20182e; --preview-accent: #ffda53; border-radius: 12px; background-image: radial-gradient(circle at 30% 40%,#523a78,transparent 42%); }
.theme-preview--layout-05 .theme-preview__nav { left: 8px; top: 8px; width: 23px; height: 3px; }
.theme-preview--layout-05 .theme-preview__title { right: 7px; top: 18px; width: 26px; height: 29px; }
.theme-preview--layout-05 .theme-preview__cards { left: 28px; top: 13px; width: 51px; height: 49px; }
.theme-preview--layout-05 .theme-preview__cards i { inset: 0; border-radius: 7px; background: #392c50; transform-origin: 50% 100%; box-shadow: 0 4px 8px rgba(0,0,0,.22); }
.theme-preview--layout-05 .theme-preview__cards i:nth-child(1) { transform: translate(-9px,2px) rotate(-9deg); }
.theme-preview--layout-05 .theme-preview__cards i:nth-child(2) { transform: translate(9px,3px) rotate(8deg); }
.theme-preview--layout-05 .theme-preview__cards i:nth-child(3) { background: #6950a0; }
.theme-preview--layout-05::before { right: 10px; bottom: 9px; width: 20px; height: 3px; background: linear-gradient(90deg,var(--preview-accent) 0 25%,transparent 25% 37%,currentColor 37% 62%,transparent 62% 75%,currentColor 75%); }

/* 06 — Premium Atelier: framed editorial stage with offset service tiles. */
.theme-preview--layout-06 { --preview-bg: #17130f; --preview-ink: #f7eddd; --preview-accent: #d8b66a; padding: 6px; background-image: linear-gradient(135deg,transparent 68%,rgba(216,182,106,.16) 68%); }
.theme-preview--layout-06::before { inset: 5px; border: 1px solid rgba(216,182,106,.48); }
.theme-preview--layout-06 .theme-preview__nav { left: 10px; top: 10px; width: 25px; height: 2px; }
.theme-preview--layout-06 .theme-preview__title { left: 10px; top: 23px; width: 35px; height: 23px; background: transparent; border-top: 4px solid var(--preview-accent); border-bottom: 1px solid var(--preview-accent); }
.theme-preview--layout-06 .theme-preview__cards { left: 54px; right: 10px; top: 13px; bottom: 10px; display: grid; grid-template-columns: 1.25fr .75fr; grid-template-rows: 1fr 1fr; gap: 3px; }
.theme-preview--layout-06 .theme-preview__cards i { position: relative; inset: auto; border-color: rgba(216,182,106,.55); }
.theme-preview--layout-06 .theme-preview__cards i:first-child { grid-row: 1 / 3; background: rgba(216,182,106,.28); }

/* 07 — Future Pulse: asymmetric command-console tracks. */
.theme-preview--layout-07 { --preview-bg: #030a18; --preview-accent: #35efff; clip-path: polygon(0 0,92% 0,100% 16%,100% 100%,8% 100%,0 84%); background-image: repeating-linear-gradient(90deg,transparent 0 15px,rgba(53,239,255,.07) 15px 16px); }
.theme-preview--layout-07::before { left: 48px; top: 17px; width: 27px; height: 27px; border: 2px solid var(--preview-accent); transform: rotate(45deg); box-shadow: 0 0 9px rgba(53,239,255,.52); }
.theme-preview--layout-07 .theme-preview__nav { left: 7px; top: 8px; width: 31px; height: 3px; }
.theme-preview--layout-07 .theme-preview__title { left: 7px; bottom: 10px; width: 29px; height: 17px; }
.theme-preview--layout-07 .theme-preview__cards { inset: 0; }
.theme-preview--layout-07 .theme-preview__cards i { width: 20px; height: 8px; border-left-width: 3px; }
.theme-preview--layout-07 .theme-preview__cards i:nth-child(1) { right: 8px; top: 13px; }
.theme-preview--layout-07 .theme-preview__cards i:nth-child(2) { right: 8px; top: 31px; }
.theme-preview--layout-07 .theme-preview__cards i:nth-child(3) { right: 8px; top: 49px; }

/* 08 — Bright Playground: playful stepped cards and oversized sun. */
.theme-preview--layout-08 { --preview-bg: #fff3c7; --preview-ink: #28204a; --preview-accent: #ff506f; border: 2px solid #28204a; border-radius: 7px; background-image: radial-gradient(circle at 86% 19%,#ffd63d 0 13px,transparent 14px); }
.theme-preview--layout-08 .theme-preview__nav { left: 7px; top: 7px; width: 28px; height: 4px; border-radius: 999px; }
.theme-preview--layout-08 .theme-preview__title { left: 7px; top: 20px; width: 34px; height: 25px; border-radius: 50% 8px 8px 8px; }
.theme-preview--layout-08 .theme-preview__cards { left: 47px; right: 7px; bottom: 7px; height: 39px; display: flex; align-items: flex-end; gap: 3px; }
.theme-preview--layout-08 .theme-preview__cards i { position: relative; inset: auto; width: 33.33%; border: 2px solid #28204a; border-radius: 5px; }
.theme-preview--layout-08 .theme-preview__cards i:nth-child(1) { height: 24px; background: #64d8b1; }
.theme-preview--layout-08 .theme-preview__cards i:nth-child(2) { height: 37px; background: #7d78ff; }
.theme-preview--layout-08 .theme-preview__cards i:nth-child(3) { height: 29px; background: #ff9967; }

/* 09 — Quiet Grid: restrained split grid with generous negative space. */
.theme-preview--layout-09 { --preview-bg: #f4f5f1; --preview-ink: #17201d; --preview-accent: #235f51; background-image: linear-gradient(90deg,transparent 43%,rgba(23,32,29,.16) 43% 44%,transparent 44%),linear-gradient(transparent 65%,rgba(23,32,29,.16) 65% 66%,transparent 66%); }
.theme-preview--layout-09 .theme-preview__nav { left: 7px; top: 8px; width: 34px; height: 2px; }
.theme-preview--layout-09 .theme-preview__title { left: 7px; top: 23px; width: 30px; height: 18px; }
.theme-preview--layout-09 .theme-preview__cards { left: 60px; right: 8px; top: 14px; bottom: 9px; display: grid; grid-template-rows: repeat(3,1fr); gap: 5px; }
.theme-preview--layout-09 .theme-preview__cards i { position: relative; inset: auto; border-width: 0 0 1px; background: transparent; }
.theme-preview--layout-09::before { left: 7px; bottom: 8px; width: 31px; height: 2px; background: var(--preview-ink); }

/* 10 — Vintage Bureau: document stack with a circular seal. */
.theme-preview--layout-10 { --preview-bg: #d9c7a4; --preview-ink: #3a251a; --preview-accent: #9a3328; padding: 6px; background-image: repeating-linear-gradient(0deg,rgba(58,37,26,.035) 0 1px,transparent 1px 4px); border-color: #796046; }
.theme-preview--layout-10::before { right: 11px; bottom: 9px; width: 21px; height: 21px; border: 3px double var(--preview-accent); border-radius: 50%; transform: rotate(-11deg); }
.theme-preview--layout-10 .theme-preview__nav { left: 8px; top: 8px; width: 27px; height: 3px; }
.theme-preview--layout-10 .theme-preview__title { left: 9px; top: 21px; width: 36px; height: 28px; background: transparent; border-top: 5px solid var(--preview-accent); border-bottom: 2px solid var(--preview-ink); }
.theme-preview--layout-10 .theme-preview__cards { left: 55px; right: 8px; top: 12px; bottom: 8px; }
.theme-preview--layout-10 .theme-preview__cards i { width: 38px; height: 13px; background: #eadcbe; border-color: rgba(58,37,26,.5); box-shadow: 2px 2px 0 rgba(58,37,26,.12); }
.theme-preview--layout-10 .theme-preview__cards i:nth-child(1) { top: 0; right: 0; transform: rotate(2deg); }
.theme-preview--layout-10 .theme-preview__cards i:nth-child(2) { top: 19px; left: 0; transform: rotate(-2deg); }
.theme-preview--layout-10 .theme-preview__cards i:nth-child(3) { display: none; }

/* Full 12-layout catalogue: final miniatures in the same order as the source design. */
.theme-preview--layout-01,
.theme-preview--layout-02,
.theme-preview--layout-03,
.theme-preview--layout-04,
.theme-preview--layout-05,
.theme-preview--layout-06,
.theme-preview--layout-07,
.theme-preview--layout-08,
.theme-preview--layout-09,
.theme-preview--layout-10,
.theme-preview--layout-11,
.theme-preview--layout-12 { padding:0; clip-path:none; border-radius:2px; }
.theme-preview--layout-01 .theme-preview__cards i,
.theme-preview--layout-02 .theme-preview__cards i,
.theme-preview--layout-03 .theme-preview__cards i,
.theme-preview--layout-04 .theme-preview__cards i,
.theme-preview--layout-05 .theme-preview__cards i,
.theme-preview--layout-06 .theme-preview__cards i,
.theme-preview--layout-07 .theme-preview__cards i,
.theme-preview--layout-08 .theme-preview__cards i,
.theme-preview--layout-09 .theme-preview__cards i,
.theme-preview--layout-10 .theme-preview__cards i,
.theme-preview--layout-11 .theme-preview__cards i,
.theme-preview--layout-12 .theme-preview__cards i { display:block; transform:none; }

/* 01 — Aurora Glass */
.theme-preview--layout-01 { --preview-bg:#061426; --preview-ink:#effcff; --preview-accent:#55e6ff; background:radial-gradient(circle at 68% 42%,rgba(85,230,255,.28),transparent 28%),#061426; }
.theme-preview--layout-01 .theme-preview__nav { left:7px; top:7px; width:28px; height:2px; }
.theme-preview--layout-01 .theme-preview__title { left:7px; top:22px; width:33px; height:25px; background:linear-gradient(var(--preview-accent) 0 4px,transparent 4px 10px,var(--preview-ink) 10px 15px,transparent 15px 20px,var(--preview-accent) 20px); }
.theme-preview--layout-01 .theme-preview__cards { left:48px; right:7px; top:14px; bottom:7px; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1.25fr .75fr; gap:3px; }
.theme-preview--layout-01 .theme-preview__cards i { position:relative; inset:auto; border-radius:4px; backdrop-filter:blur(2px); }
.theme-preview--layout-01 .theme-preview__cards i:first-child { grid-column:1/-1; }

/* 02 — Editorial Grid */
.theme-preview--layout-02 { --preview-bg:#f1ecdf; --preview-ink:#17120d; --preview-accent:#e53d2f; border-color:#17120d; border-radius:0; background:linear-gradient(90deg,transparent 43%,rgba(23,18,13,.2) 43% 44%,transparent 44%),#f1ecdf; }
.theme-preview--layout-02::before { inset:auto; left:6px; top:7px; width:32px; height:3px; border:0; border-radius:0; background:var(--preview-ink); box-shadow:none; }
.theme-preview--layout-02 .theme-preview__nav { right:7px; top:7px; left:auto; width:25px; height:3px; background:var(--preview-accent); }
.theme-preview--layout-02 .theme-preview__title { left:7px; top:20px; width:38px; height:35px; background:linear-gradient(var(--preview-ink) 0 8px,transparent 8px 12px,var(--preview-accent) 12px 21px,transparent 21px 25px,var(--preview-ink) 25px); }
.theme-preview--layout-02 .theme-preview__cards { left:54px; right:7px; top:20px; bottom:8px; display:grid; grid-template-columns:repeat(3,1fr); gap:3px; }
.theme-preview--layout-02 .theme-preview__cards i { position:relative; inset:auto; width:auto; height:auto; border:0; border-left:2px solid var(--preview-ink); border-radius:0; background:transparent; }

/* 03 — Thai Sunrise */
.theme-preview--layout-03 { --preview-bg:#fff0d5; --preview-ink:#54203c; --preview-accent:#f15a29; background:radial-gradient(circle at 78% 30%,#ff9638 0 16px,transparent 17px),linear-gradient(150deg,#fff0d5 62%,#f7b4c3 62%); }
.theme-preview--layout-03::before { left:auto; right:14px; bottom:10px; width:34px; height:13px; border-radius:50% 50% 0 0; background:#e83683; }
.theme-preview--layout-03 .theme-preview__nav { left:7px; top:7px; width:28px; height:3px; }
.theme-preview--layout-03 .theme-preview__title { left:7px; top:21px; width:40px; height:24px; border-radius:0; background:linear-gradient(#e83683 0 8px,transparent 8px 13px,var(--preview-ink) 13px 20px,transparent 20px); }
.theme-preview--layout-03 .theme-preview__cards { left:7px; right:7px; top:auto; bottom:7px; height:17px; display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
.theme-preview--layout-03 .theme-preview__cards i { position:relative; inset:auto; border:1px solid rgba(84,32,60,.36); border-radius:5px; background:#fff8e9; }

/* 04 — Eco Flow */
.theme-preview--layout-04 { --preview-bg:#0d3a2e; --preview-ink:#f4ffe9; --preview-accent:#b9ed54; background:radial-gradient(circle at 68% 34%,rgba(185,237,84,.3) 0 18px,transparent 19px),linear-gradient(140deg,#123f32,#092a23); }
.theme-preview--layout-04 .theme-preview__nav { left:7px; top:7px; width:30px; height:2px; }
.theme-preview--layout-04 .theme-preview__title { left:7px; top:21px; width:37px; height:27px; background:linear-gradient(var(--preview-ink) 0 7px,transparent 7px 12px,var(--preview-accent) 12px 20px,transparent 20px); }
.theme-preview--layout-04 .theme-preview__cards { left:51px; right:7px; top:35px; bottom:7px; display:grid; grid-template-columns:repeat(3,1fr); gap:3px; }
.theme-preview--layout-04 .theme-preview__cards i { position:relative; inset:auto; border:1px solid rgba(185,237,84,.45); background:rgba(255,255,255,.06); }
.theme-preview--layout-04 .theme-preview__cards i:first-child { background:rgba(185,237,84,.15); }

/* 05 — Neo Brutalist */
.theme-preview--layout-05 { --preview-bg:#f4efdf; --preview-ink:#111; --preview-accent:#ffd51f; border:2px solid #111; border-radius:0; background:linear-gradient(90deg,#2457e6 0 10%,transparent 10%),#f4efdf; }
.theme-preview--layout-05::before { right:7px; top:7px; bottom:auto; width:23px; height:11px; background:#ffd51f; border:2px solid #111; }
.theme-preview--layout-05 .theme-preview__nav { left:16px; top:7px; width:27px; height:3px; }
.theme-preview--layout-05 .theme-preview__title { left:16px; top:21px; width:39px; height:24px; background:#2457e6; border:2px solid #111; box-shadow:3px 3px 0 #111; }
.theme-preview--layout-05 .theme-preview__cards { left:16px; right:7px; top:auto; bottom:6px; width:auto; height:17px; display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
.theme-preview--layout-05 .theme-preview__cards i { position:relative; inset:auto; border:2px solid #111; border-radius:0; background:#ffd51f; box-shadow:1px 1px 0 #111; }
.theme-preview--layout-05 .theme-preview__cards i:nth-child(2) { background:#2457e6; }

/* 06 — Quiet Luxury */
.theme-preview--layout-06 { --preview-bg:#171614; --preview-ink:#f6f0e6; --preview-accent:#d2b47a; background:radial-gradient(circle at 72% 34%,rgba(210,180,122,.18) 0 18px,transparent 19px),#171614; }
.theme-preview--layout-06::before { inset:auto; right:23px; top:13px; width:29px; height:29px; border:1px solid var(--preview-accent); border-radius:50%; }
.theme-preview--layout-06 .theme-preview__nav { left:7px; top:7px; width:27px; height:2px; }
.theme-preview--layout-06 .theme-preview__title { left:7px; top:22px; width:38px; height:25px; background:linear-gradient(var(--preview-ink) 0 6px,transparent 6px 11px,var(--preview-accent) 11px 18px,transparent 18px); border:0; }
.theme-preview--layout-06 .theme-preview__cards { left:51px; right:7px; top:auto; bottom:7px; height:18px; display:grid; grid-template-columns:repeat(3,1fr); gap:3px; }
.theme-preview--layout-06 .theme-preview__cards i { position:relative; inset:auto; border:1px solid rgba(210,180,122,.48); background:rgba(210,180,122,.06); }
.theme-preview--layout-06 .theme-preview__cards i:first-child { grid-row:auto; background:rgba(210,180,122,.14); }

/* 07 — Premium Atelier */
.theme-preview--layout-07 { --preview-bg:#17130f; --preview-ink:#f7eddd; --preview-accent:#d8b66a; background:linear-gradient(135deg,transparent 68%,rgba(216,182,106,.16) 68%),#17130f; }
.theme-preview--layout-07::before { inset:5px; width:auto; height:auto; border:1px solid rgba(216,182,106,.48); border-radius:0; transform:none; box-shadow:none; }
.theme-preview--layout-07 .theme-preview__nav { left:10px; top:10px; width:25px; height:2px; }
.theme-preview--layout-07 .theme-preview__title { left:10px; top:23px; bottom:auto; width:35px; height:23px; background:transparent; border-top:4px solid var(--preview-accent); border-bottom:1px solid var(--preview-accent); }
.theme-preview--layout-07 .theme-preview__cards { left:54px; right:10px; top:13px; bottom:10px; display:grid; grid-template-columns:1.25fr .75fr; grid-template-rows:1fr 1fr; gap:3px; }
.theme-preview--layout-07 .theme-preview__cards i { position:relative; inset:auto; width:auto; height:auto; border-color:rgba(216,182,106,.55); }
.theme-preview--layout-07 .theme-preview__cards i:first-child { grid-row:1/3; background:rgba(216,182,106,.28); }

/* 08 — Future Pulse */
.theme-preview--layout-08 { --preview-bg:#030a18; --preview-ink:#effcff; --preview-accent:#35efff; background:repeating-linear-gradient(90deg,transparent 0 15px,rgba(53,239,255,.07) 15px 16px),#030a18; }
.theme-preview--layout-08::before { left:48px; top:17px; width:27px; height:27px; border:2px solid var(--preview-accent); border-radius:0; transform:rotate(45deg); box-shadow:0 0 9px rgba(53,239,255,.52); }
.theme-preview--layout-08 .theme-preview__nav { left:7px; top:8px; width:31px; height:3px; }
.theme-preview--layout-08 .theme-preview__title { left:7px; top:auto; bottom:10px; width:29px; height:17px; border-radius:0; }
.theme-preview--layout-08 .theme-preview__cards { inset:0; display:block; height:auto; }
.theme-preview--layout-08 .theme-preview__cards i { position:absolute; width:20px; height:8px; border:1px solid var(--preview-accent); border-left-width:3px; border-radius:0; background:transparent; }
.theme-preview--layout-08 .theme-preview__cards i:nth-child(1) { right:8px; top:13px; }
.theme-preview--layout-08 .theme-preview__cards i:nth-child(2) { right:8px; top:31px; }
.theme-preview--layout-08 .theme-preview__cards i:nth-child(3) { right:8px; top:49px; }

/* 09 — Bright Playground */
.theme-preview--layout-09 { --preview-bg:#fff3c7; --preview-ink:#28204a; --preview-accent:#ff506f; border:2px solid #28204a; border-radius:7px; background:radial-gradient(circle at 86% 19%,#ffd63d 0 13px,transparent 14px),#fff3c7; }
.theme-preview--layout-09::before { display:none; }
.theme-preview--layout-09 .theme-preview__nav { left:7px; top:7px; width:28px; height:4px; border-radius:999px; }
.theme-preview--layout-09 .theme-preview__title { left:7px; top:20px; width:34px; height:25px; border-radius:50% 8px 8px 8px; }
.theme-preview--layout-09 .theme-preview__cards { left:47px; right:7px; top:auto; bottom:7px; width:auto; height:39px; display:flex; align-items:flex-end; gap:3px; }
.theme-preview--layout-09 .theme-preview__cards i { position:relative; inset:auto; width:33.33%; border:2px solid #28204a; border-radius:5px; }
.theme-preview--layout-09 .theme-preview__cards i:nth-child(1) { height:24px; background:#64d8b1; }
.theme-preview--layout-09 .theme-preview__cards i:nth-child(2) { height:37px; background:#7d78ff; }
.theme-preview--layout-09 .theme-preview__cards i:nth-child(3) { height:29px; background:#ff9967; }

/* 10 — Quiet Grid */
.theme-preview--layout-10 { --preview-bg:#f4f5f1; --preview-ink:#17201d; --preview-accent:#235f51; border-color:rgba(23,32,29,.3); background:linear-gradient(90deg,transparent 43%,rgba(23,32,29,.16) 43% 44%,transparent 44%),linear-gradient(transparent 65%,rgba(23,32,29,.16) 65% 66%,transparent 66%),#f4f5f1; }
.theme-preview--layout-10::before { left:7px; right:auto; top:auto; bottom:8px; width:31px; height:2px; border:0; border-radius:0; background:var(--preview-ink); transform:none; }
.theme-preview--layout-10 .theme-preview__nav { left:7px; top:8px; width:34px; height:2px; }
.theme-preview--layout-10 .theme-preview__title { left:7px; top:23px; width:30px; height:18px; background:var(--preview-accent); border:0; }
.theme-preview--layout-10 .theme-preview__cards { left:60px; right:8px; top:14px; bottom:9px; width:auto; height:auto; display:grid; grid-template-rows:repeat(3,1fr); gap:5px; }
.theme-preview--layout-10 .theme-preview__cards i { position:relative; inset:auto; display:block; width:auto; height:auto; border-width:0 0 1px; border-radius:0; background:transparent; box-shadow:none; }
.theme-preview--layout-10 .theme-preview__cards i:nth-child(3) { display:block; }

/* 11 — Vintage Bureau */
.theme-preview--layout-11 { --preview-bg:#d9c7a4; --preview-ink:#3a251a; --preview-accent:#9a3328; background:repeating-linear-gradient(0deg,rgba(58,37,26,.035) 0 1px,transparent 1px 4px),#d9c7a4; border-color:#796046; }
.theme-preview--layout-11::before { right:11px; bottom:9px; width:21px; height:21px; border:3px double var(--preview-accent); border-radius:50%; transform:rotate(-11deg); }
.theme-preview--layout-11 .theme-preview__nav { left:8px; top:8px; width:27px; height:3px; }
.theme-preview--layout-11 .theme-preview__title { left:9px; top:21px; width:36px; height:28px; background:transparent; border-top:5px solid var(--preview-accent); border-bottom:2px solid var(--preview-ink); }
.theme-preview--layout-11 .theme-preview__cards { left:55px; right:8px; top:12px; bottom:8px; display:block; }
.theme-preview--layout-11 .theme-preview__cards i { position:absolute; width:38px; height:13px; background:#eadcbe; border-color:rgba(58,37,26,.5); box-shadow:2px 2px 0 rgba(58,37,26,.12); }
.theme-preview--layout-11 .theme-preview__cards i:nth-child(1) { top:0; right:0; transform:rotate(2deg); }
.theme-preview--layout-11 .theme-preview__cards i:nth-child(2) { top:19px; left:0; transform:rotate(-2deg); }
.theme-preview--layout-11 .theme-preview__cards i:nth-child(3) { display:none; }

/* 12 — Executive Portfolio */
.theme-preview--layout-12 { --preview-bg:#edf2f4; --preview-ink:#0d2639; --preview-accent:#c99a50; border-color:#7f909b; background:linear-gradient(90deg,#071b2f 0 31%,transparent 31%),#edf2f4; }
.theme-preview--layout-12::before { left:6px; top:7px; width:28px; height:3px; background:var(--preview-accent); }
.theme-preview--layout-12 .theme-preview__nav { left:7px; top:17px; width:27px; height:2px; color:#fff; background:#fff; }
.theme-preview--layout-12 .theme-preview__title { left:7px; top:27px; width:29px; height:24px; background:linear-gradient(#fff 0 5px,transparent 5px 9px,var(--preview-accent) 9px 15px,transparent 15px 19px,#fff 19px); }
.theme-preview--layout-12 .theme-preview__cards { left:46px; right:7px; top:12px; bottom:8px; display:grid; grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(2,1fr); gap:4px; }
.theme-preview--layout-12 .theme-preview__cards i { position:relative; inset:auto; display:block; width:auto; height:auto; border:1px solid rgba(13,38,57,.24); border-left:3px solid var(--preview-accent); border-radius:0; background:#fff; box-shadow:none; transform:none; }
.theme-preview--layout-12 .theme-preview__cards i:nth-child(3) { display:block; grid-column:1/-1; }

.tone-choice-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.tone-option { min-width: 0; padding: 10px; grid-template-columns: 17px 68px minmax(0,1fr); gap: 10px; border-color: #dce3ea; background: #fff; }
.tone-option:hover { border-color: #9eacba; background: #fbfcfd; }
.tone-option:has(input:checked) { border-color: var(--blue); background: #f2faff; box-shadow: 0 0 0 2px rgba(19,139,197,.1); }
.color-tone-preview { --tone-a: #5965f2; --tone-b: #f6cb45; --tone-c: #ef6577; width: 68px; height: 48px; padding: 6px; display: grid; grid-template-columns: 1.15fr .85fr; grid-template-rows: 1fr 1fr; gap: 3px; background: #f6f7fa; border: 1px solid #d8dee6; }
.color-tone-preview i { display: block; background: var(--tone-a); }
.color-tone-preview i:nth-child(1) { grid-row: 1 / -1; }
.color-tone-preview i:nth-child(2) { background: var(--tone-b); }
.color-tone-preview i:nth-child(3) { background: var(--tone-c); }
.color-tone-preview--tone-ocean { --tone-a: #071b33; --tone-b: #1678d2; --tone-c: #77d7ef; }
.color-tone-preview--tone-sunset { --tone-a: #40161b; --tone-b: #ed694e; --tone-c: #ffbf75; }
.color-tone-preview--tone-mint { --tone-a: #17483c; --tone-b: #35b98a; --tone-c: #c9efd2; }
.color-tone-preview--tone-mono { --tone-a: #101114; --tone-b: #686b70; --tone-c: #d8d9da; }
.font-choice-grid { gap: 9px; }
.font-option { padding: 10px; grid-template-columns: 17px 64px minmax(0, 1fr); gap: 12px; border-color: #dce3ea; background: #fff; }
.font-sample { width: 64px; min-height: 54px; display: grid; place-items: center; color: var(--ink); background: #f1f5f8; border: 1px solid #dbe2e8; font-size: 1.55rem; font-weight: 600; line-height: 1; }
.editor-actions { display: grid; gap: 8px; }

.account-layout { display: grid; grid-template-columns: 310px minmax(0, 620px); gap: 22px; align-items: start; }
.profile-card { padding: 35px; text-align: center; }
.profile-avatar { width: 78px; height: 78px; margin: 0 auto 22px; display: grid; place-items: center; color: var(--white); background: var(--ink); border-radius: 50%; font-size: 1.8rem; font-weight: 800; }
.profile-card h2 { margin: 0; font-size: 1.7rem; }
.profile-card > p:last-child { color: var(--muted); font-size: .82rem; }

.login-body { min-height: 100vh; background: var(--white); }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; }
.login-visual { position: relative; overflow: hidden; min-height: 720px; padding: 45px clamp(35px, 6vw, 90px); display: flex; flex-direction: column; color: var(--white); background: radial-gradient(circle at 83% 30%, rgba(41,233,186,.12), transparent 28%), linear-gradient(135deg, #07162f, #0b2b4f); }
.login-visual::before { content: ""; position: absolute; inset: 0; opacity: .13; background-image: linear-gradient(rgba(255,255,255,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.15) 1px, transparent 1px); background-size: 62px 62px; mask-image: linear-gradient(135deg,#000,transparent 78%); }
.login-visual .admin-logo { position: relative; color: var(--white); }
.login-visual .admin-logo span { color: var(--electric); }
.login-message { position: relative; z-index: 1; margin: auto 0; }
.login-message .mono-label { color: var(--electric); }
.login-message h1 { margin: 0; font-size: clamp(3.3rem, 6.5vw, 6.2rem); line-height: .96; letter-spacing: -.07em; }
.login-message h1 em { color: var(--electric); font-style: normal; font-weight: 500; }
.login-message > p:last-child { max-width: 500px; color: rgba(255,255,255,.62); }
.login-systems { position: relative; display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.38); font: 700 .56rem ui-monospace, monospace; letter-spacing: .12em; }
.login-systems i { width: 3px; height: 3px; background: var(--electric); border-radius: 50%; }
.login-panel { padding: 50px; display: grid; place-items: center; }
.login-form-wrap { width: min(420px, 100%); }
.login-form-wrap h2, .install-panel h2 { margin: 0; font-size: 2.4rem; letter-spacing: -.055em; }
.login-subtitle { margin: 6px 0 27px; color: var(--muted); }
.login-form-wrap form .field { margin-bottom: 17px; }
.login-form-wrap form .admin-button { margin-top: 8px; }
.login-form-wrap > .back-link { margin-top: 24px; }

.install-body { min-height: 100vh; color: var(--ink); background: #eaf0f5; }
.install-shell { width: min(1120px, calc(100% - 40px)); margin: 40px auto; display: grid; grid-template-columns: .75fr 1.25fr; box-shadow: var(--shadow); }
.install-brand { position: relative; overflow: hidden; padding: 48px; display: flex; flex-direction: column; color: var(--white); background: var(--ink); }
.install-brand::after { content: ""; position: absolute; width: 300px; height: 300px; left: -190px; bottom: -160px; border: 1px solid rgba(41,233,186,.25); border-radius: 50%; box-shadow: 0 0 0 45px rgba(41,233,186,.03), 0 0 0 90px rgba(41,233,186,.02); }
.install-brand .admin-logo { color: var(--white); }
.install-brand .admin-logo span { color: var(--electric); }
.install-brand > .mono-label { margin-top: 100px; color: var(--electric); }
.install-brand h1 { margin: 0; font-size: 3.25rem; line-height: 1.05; letter-spacing: -.065em; }
.install-brand > p:not(.mono-label) { color: rgba(255,255,255,.62); }
.install-steps { margin: auto 0 0; padding: 0; list-style: none; }
.install-steps li { padding: 13px 0; display: flex; gap: 13px; border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.67); font-size: .8rem; }
.install-steps b { color: var(--electric); font: 700 .65rem ui-monospace, monospace; }
.install-panel { padding: 48px; background: var(--white); }
.panel-heading { display: flex; justify-content: space-between; align-items: start; margin-bottom: 25px; }
.secure-mark, .lock-mark, .success-mark { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 22px; border-radius: 50%; }
.success-mark { color: #08734e; background: #dff6eb; font-size: 1.4rem; }
.lock-mark { color: var(--amber); background: #fff0d9; }
.secure-mark { color: var(--green); background: #dff6eb; }
.secure-pill { padding: 5px 8px; color: var(--green); background: #dff6eb; font: 800 .55rem ui-monospace, monospace; letter-spacing: .1em; }
.install-panel > p { color: var(--muted); }
.install-panel fieldset { margin: 0 0 25px; padding: 0; border: 0; }
.install-panel legend { width: 100%; margin-bottom: 15px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: .84rem; font-weight: 760; }
.install-panel .field { margin-bottom: 14px; }
.field-grid--host { grid-template-columns: 1fr 110px; }
.action-stack { margin-top: 28px; display: grid; gap: 9px; }

:focus-visible { outline: 3px solid #e6ad31; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } }
@media (max-width: 1080px) {
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .banner-table { grid-template-columns: minmax(240px, 1.4fr) minmax(160px, .8fr) 100px 135px; }
  .banner-table--head span:nth-child(3), .banner-table--row .order-cell { display: none; }
  .editor-layout { grid-template-columns: 1fr; }
  .editor-side { position: static; grid-template-columns: 1fr 1fr; }
  .editor-actions { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .install-shell { grid-template-columns: 1fr; }
  .install-brand { min-height: 500px; }
}
@media (max-width: 780px) {
  .admin-sidebar { transform: translateX(-100%); transition: transform .25s ease; }
  .admin-sidebar.is-open { transform: translateX(0); }
  .admin-page { margin-left: 0; }
  .sidebar-toggle { display: block; margin-right: auto; }
  .admin-topbar { padding: 0 18px; }
  .admin-topbar > div:first-of-type { display: none; }
  .admin-main { width: min(100% - 32px, 680px); padding-top: 33px; }
  .sidebar-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.38); }
  .sidebar-backdrop.is-open { display: block; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .banner-table--head { display: none; }
  .banner-table--row { grid-template-columns: 1fr auto; gap: 13px; padding: 18px; }
  .banner-cell-main { grid-column: 1 / -1; }
  .schedule-cell { grid-column: 1; }
  .banner-table--row > .status-badge { grid-column: 2; grid-row: 2; }
  .row-actions { grid-column: 1 / -1; justify-content: flex-start; padding-top: 10px; border-top: 1px solid var(--line); }
  .account-layout { grid-template-columns: 1fr; }
  .theme-choice-grid { grid-template-columns: 1fr; }
  .login-shell { grid-template-columns: 1fr; }
  .login-visual { min-height: 480px; }
  .login-panel { min-height: 600px; padding: 50px 24px; }
  .install-shell { width: 100%; margin: 0; }
  .install-panel, .install-brand { padding: 36px 24px; }
}
@media (max-width: 560px) {
  .admin-footer { padding: 15px 18px; flex-direction: column; gap: 5px; align-items: flex-start; }
  .metric-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .metric-card { min-height: 140px; padding: 17px; }
  .metric-card strong { font-size: 2.55rem; }
  .recent-list > a { grid-template-columns: 46px 1fr 16px; }
  .recent-list .status-badge { display: none; }
  .banner-thumb { width: 46px; height: 46px; }
  .field-grid { grid-template-columns: 1fr; }
  .theme-option--visual { grid-template-columns: 17px 94px minmax(0, 1fr); }
  .theme-preview { width: 94px; }
  .tone-choice-grid { grid-template-columns: 1fr; }
  .field-grid .field + .field { margin-top: 0; }
  .editor-side { grid-template-columns: 1fr; }
  .editor-actions { grid-column: auto; grid-template-columns: 1fr; }
  .current-image { grid-template-columns: 1fr; }
  .login-visual { min-height: 410px; padding: 34px 24px; }
  .login-message h1 { font-size: 3.5rem; }
  .login-systems { flex-wrap: wrap; }
  .install-brand { min-height: 480px; }
  .install-brand h1 { font-size: 2.7rem; }
}

/* Promoted website manager */
.page-heading__actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.page-heading__actions form { margin: 0; }
.admin-note { margin: -15px 0 22px; padding: 13px 16px; display: flex; align-items: flex-start; gap: 13px; color: #33465f; background: #eaf7f3; border: 1px solid #c6e8dc; font-size: .79rem; }
.admin-note b { flex: 0 0 auto; color: #10654c; }
.admin-note--compact { margin-top: -10px; }
.site-table { grid-template-columns: minmax(260px,1.15fr) minmax(230px,1fr) 92px 110px 195px; }
.site-thumb { --site-thumb:#225ea8; width: 58px; height: 58px; padding: 5px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; color: #fff; background: color-mix(in srgb,var(--site-thumb),#fff 88%); border: 1px solid color-mix(in srgb,var(--site-thumb),#fff 62%); border-radius: 8px; font: 800 .76rem/1 ui-monospace,monospace; }
.site-thumb img { width: 100%; height: 100%; object-fit: contain; }
.site-thumb--brown { --site-thumb:#87552f; }
.site-thumb--green { --site-thumb:#18805e; }
.site-thumb--purple { --site-thumb:#6750c9; }
.site-thumb--orange { --site-thumb:#db762d; }
.site-thumb--cyan { --site-thumb:#087b9d; }
.default-pill { margin-left: 5px; padding: 2px 5px; color: #476077; background: #edf2f6; border-radius: 3px; font: 700 .52rem/1.3 ui-monospace,monospace; font-style: normal; vertical-align: 2px; white-space: nowrap; }
.site-feature-cell { min-width: 0; display: flex; flex-direction: column; }
.site-feature-cell strong { overflow: hidden; color: #263b55; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }
.site-feature-cell small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: .68rem; }
.site-current-image img { padding: 6px; object-fit: contain; background: #f4f7f9; border: 1px solid var(--line); }
.feature-input { min-height: 98px !important; }
.mini-site { --site-preview:#225ea8; min-height: 285px; padding: 21px; display: flex; flex-direction: column; color: #fff; background: linear-gradient(155deg,color-mix(in srgb,var(--site-preview),#06162b 45%),#07162f); border-top: 5px solid color-mix(in srgb,var(--site-preview),#fff 20%); }
.mini-site--brown { --site-preview:#9a6339; }
.mini-site--green { --site-preview:#1d9870; }
.mini-site--purple { --site-preview:#785ee1; }
.mini-site--orange { --site-preview:#ef8436; }
.mini-site--cyan { --site-preview:#15a9ca; }
.mini-site > span { align-self: flex-start; padding: 4px 6px; color: #07162f; background: color-mix(in srgb,var(--site-preview),#fff 40%); font: 800 .52rem ui-monospace,monospace; letter-spacing: .1em; }
.mini-site > small { margin-top: 8px; color: rgba(255,255,255,.55); font: 650 .62rem ui-monospace,monospace; }
.mini-site > strong { margin-top: auto; color: color-mix(in srgb,var(--site-preview),#fff 55%); font-size: .8rem; }
.mini-site h3 { margin: 5px 0 8px; font-size: 1.3rem; line-height: 1.28; letter-spacing: -.025em; overflow-wrap: anywhere; }
.mini-site p { margin: 0 0 14px; color: rgba(255,255,255,.65); font-size: .73rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mini-site > b { color: color-mix(in srgb,var(--site-preview),#fff 48%); font-size: .73rem; }
.site-theme-options { grid-template-columns: 1fr 1fr; gap: 5px; }
.site-theme-options .theme-option { grid-template-columns: 16px 28px 1fr; padding: 5px; gap: 7px; }
.site-theme-swatch { --swatch:#225ea8; width: 28px; height: 28px; background: var(--swatch); border-radius: 50%; }
.site-theme-swatch--brown { --swatch:#87552f; }
.site-theme-swatch--green { --swatch:#18805e; }
.site-theme-swatch--purple { --swatch:#6750c9; }
.site-theme-swatch--orange { --swatch:#db762d; }
.site-theme-swatch--cyan { --swatch:#087b9d; }

@media (max-width:1080px) {
  .site-table { grid-template-columns:minmax(240px,1.2fr) minmax(200px,1fr) 115px 180px; }
  .site-table--head span:nth-child(3), .site-table.banner-table--row .order-cell { display:none; }
}
@media (max-width:780px) {
  .page-heading__actions { justify-content:flex-start; }
  .admin-note { margin-top:-12px; flex-direction:column; gap:3px; }
  .site-table.banner-table--row { grid-template-columns:1fr auto; }
  .site-table .banner-cell-main { grid-column:1/-1; }
  .site-feature-cell { grid-column:1; }
  .site-table.banner-table--row > .status-badge { grid-column:2; grid-row:2; }
  .site-table .row-actions { grid-column:1/-1; }
}
@media (max-width:560px) {
  .page-heading__actions, .page-heading__actions form, .page-heading__actions .admin-button { width:100%; }
  .site-theme-options { grid-template-columns:1fr; }
}

/* LINE Approval Center */
.line-approval-heading { align-items:center; }
.line-approval-state { flex:0 0 auto; padding:8px 13px; display:inline-flex; align-items:center; gap:8px; border:1px solid #d9e0e8; border-radius:999px; color:#657085; background:#fff; font-size:.72rem; font-weight:750; white-space:nowrap; }
.line-approval-state i { width:8px; height:8px; background:#a4adba; border-radius:50%; }
.line-approval-state.is-on { color:#08714e; border-color:#b9e4d3; background:#e9f8f1; }
.line-approval-state.is-on i { background:#19a579; box-shadow:0 0 0 4px rgba(25,165,121,.12); }
.line-approval-safety { margin:-13px 0 24px; padding:16px 18px; display:flex; align-items:flex-start; gap:13px; color:#244155; background:linear-gradient(90deg,#e9f8f3,#f5fbfa); border:1px solid #c5e7db; }
.line-approval-safety > span { width:27px; height:27px; flex:0 0 auto; display:grid; place-items:center; color:#08714e; background:#d2f2e5; border-radius:50%; font-weight:850; }
.line-approval-safety strong { display:block; font-size:.84rem; }
.line-approval-safety p { margin:2px 0 0; color:#537080; font-size:.76rem; }
.line-approval-overview { margin-bottom:22px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; }
.line-status-card { min-width:0; padding:15px; display:grid; grid-template-columns:34px minmax(0,1fr); gap:12px; background:#fff; border:1px solid var(--line); border-top:3px solid #c7ced7; }
.line-status-card > span { width:34px; height:34px; display:grid; place-items:center; color:#708096; background:#edf1f5; border-radius:50%; font:800 .61rem ui-monospace,monospace; }
.line-status-card small { display:block; overflow:hidden; color:#7b8798; font:750 .54rem ui-monospace,monospace; letter-spacing:.1em; text-overflow:ellipsis; white-space:nowrap; }
.line-status-card strong { display:block; margin-top:2px; overflow:hidden; font-size:.87rem; text-overflow:ellipsis; white-space:nowrap; }
.line-status-card p { margin:3px 0 0; color:var(--muted); font-size:.67rem; line-height:1.45; }
.line-status-card.is-ready { border-top-color:#1aa378; }
.line-status-card.is-ready > span { color:#08714e; background:#dcf5eb; }
.line-approval-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:start; }
.line-approval-card--wide { grid-column:1 / -1; }
.line-approval-card .card-heading { min-height:64px; }
.line-approval-card__body { padding:20px; }
.line-approval-card__body > p:first-child { margin:0 0 17px; color:var(--muted); font-size:.79rem; }
.line-selected-group { padding:14px 15px; display:flex; flex-direction:column; background:#f4f7fa; border-left:3px solid var(--blue); }
.line-selected-group small { color:#718096; font-size:.65rem; }
.line-selected-group strong { margin:1px 0; font-size:.98rem; }
.line-selected-group span { color:#718096; font-size:.68rem; }
.line-secure-form { margin-top:17px; }
.line-secure-form .field { margin-bottom:11px; }
.line-secure-form .admin-button { width:100%; }
.line-secure-form .admin-button:disabled, .line-secure-form input:disabled { cursor:not-allowed; opacity:.52; }
.line-form-note { margin:10px 0 0 !important; color:#7b8798 !important; font-size:.68rem !important; }
.line-one-time-command { margin:0 0 17px; padding:17px; color:#f3fbff; background:#071b33; border-left:4px solid var(--electric); }
.line-one-time-command small { display:block; color:#8cb3c7; font-size:.65rem; }
.line-one-time-command code { margin:10px 0 8px; padding:10px 12px; display:block; overflow-wrap:anywhere; color:#07162f; background:#e7fff8; border:1px solid #77dfc1; font:800 .89rem/1.5 ui-monospace,Consolas,monospace; user-select:all; }
.line-one-time-command p { margin:0; color:#b4c7d1; font-size:.68rem; }
.line-notification-control { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr); gap:28px; }
.line-notification-control > div > p { margin-top:0; color:var(--muted); font-size:.79rem; }
.line-check-list { margin:15px 0 0; padding:0; list-style:none; display:grid; gap:7px; }
.line-check-list li { display:flex; align-items:center; gap:9px; color:#738095; font-size:.74rem; }
.line-check-list li span { width:22px; height:22px; display:grid; place-items:center; color:#7f8997; background:#eef1f4; border-radius:50%; font-weight:800; }
.line-check-list li.is-ready { color:#17684f; }
.line-check-list li.is-ready span { color:#08714e; background:#dcf5eb; }
.line-toggle-form { margin-top:0; padding:17px; background:#f4f7fa; border:1px solid #e0e6ec; }
.line-toggle-form > small { margin-top:9px; display:block; color:#768395; font-size:.65rem; }
.admin-button--danger { color:#fff; background:#9d3737; border-color:#9d3737; }
.admin-button--danger:hover { background:#842b2b; border-color:#842b2b; }
.line-policy-card { padding:23px; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(310px,.8fr); gap:22px 30px; }
.line-policy-card h2 { margin:0; font-size:1.25rem; }
.line-policy-card > div:first-child > p:last-child { margin:6px 0 0; color:var(--muted); font-size:.78rem; }
.line-policy-card dl { margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.line-policy-card dl div { padding:13px 11px; background:#f2f5f8; border-bottom:2px solid #bcc8d3; text-align:center; }
.line-policy-card dt { font:800 .8rem ui-monospace,Consolas,monospace; }
.line-policy-card dd { margin:3px 0 0; color:#718096; font-size:.62rem; }
.line-high-risk-note { grid-column:1 / -1; padding:12px 14px; display:flex; align-items:flex-start; gap:13px; color:#744a14; background:#fff6df; border:1px solid #efd79e; font-size:.72rem; }
.line-high-risk-note strong { flex:0 0 auto; }
.line-command-examples { grid-column:1 / -1; margin:-8px 0 0; color:#66738a; font-size:.72rem; }
.line-command-examples code { padding:2px 5px; color:#243a55; background:#edf2f6; font-family:ui-monospace,Consolas,monospace; }

@media (max-width:1080px) {
  .line-approval-overview { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:780px) {
  .line-approval-grid { grid-template-columns:1fr; }
  .line-approval-card--wide { grid-column:auto; }
  .line-notification-control, .line-policy-card { grid-template-columns:1fr; }
  .line-high-risk-note, .line-command-examples { grid-column:auto; }
  .line-policy-card dl { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:560px) {
  .line-approval-overview { grid-template-columns:1fr; }
  .line-status-card p { display:none; }
  .line-policy-card dl { grid-template-columns:1fr; }
  .line-high-risk-note { flex-direction:column; gap:2px; }
  .line-approval-card__body, .line-policy-card { padding:17px; }
}