:root {
  --bg: #edf1f6; --surface: #ffffff; --ink: #182230; --muted: #54657c; --faint: #8494ab;
  --line: #d9e1ec; --line-soft: #e6ecf3;
  --accent: #0a4d92; --accent-deep: #073763; --accent-ink: #0a3a68; --accent-soft: #e7eff9;
  --danger: #b42318; --danger-soft: #fef3f2; --danger-line: #fecdca;
  --ok-soft: #ecfdf3; --ok-line: #a6f4c5; --ok-ink: #027a48;
  --warn-soft: #fffaeb; --warn-line: #fedf89; --warn-ink: #b54708;
  --side: #082f57; --side-2: #0d447c; --side-ink: #cfdeee; --side-faint: #84a3c4;
  --radius: 12px; --radius-s: 8px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --shadow: 0 1px 2px rgba(16, 20, 32, .05), 0 4px 16px -4px rgba(16, 20, 32, .08);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.55; }
::selection { background: var(--accent); color: #fff; }
a { color: var(--accent-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }

/* ---------- app shell ---------- */
.shell { display: flex; min-height: 100vh; }
.shell.col { flex-direction: column; }
.side { width: 248px; flex: 0 0 248px; background: linear-gradient(180deg, #062544 0%, #0a3a68 78%, #0a4d92 130%); color: var(--side-ink);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.side-brand { display: flex; align-items: center; gap: 11px; padding: 22px 20px 18px; color: #fff;
  font-weight: 750; font-size: 17px; letter-spacing: -0.015em; text-decoration: none; }
.side-brand:hover { text-decoration: none; }
.mark { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, #d9a81c, #a97b0a);
  color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px;
  box-shadow: 0 2px 10px rgba(99, 102, 241, .45); }
.mark svg { width: 18px; height: 18px; }
.side-nav { display: flex; flex-direction: column; gap: 2px; padding: 6px 12px; }
.side-nav .sec { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--side-faint);
  padding: 12px 10px 6px; font-weight: 700; }
.side-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-s);
  color: var(--side-ink); font-size: 14px; font-weight: 500; }
.side-nav a:hover { background: var(--side-2); color: #fff; text-decoration: none; }
.side-nav a.active { background: var(--accent); color: #fff; font-weight: 650; }
.side-nav svg { width: 16px; height: 16px; opacity: .85; flex: 0 0 16px; }
.side-foot { margin-top: auto; padding: 14px; border-top: 1px solid rgba(255,255,255,.07); }
.side-user { display: flex; align-items: center; gap: 10px; }
.side-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.side-actions .btn { width: 100%; text-align: center; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--side-2); border: 1px solid rgba(255,255,255,.12);
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex: 0 0 32px; }
.side-user .nm { font-size: 13.5px; font-weight: 650; color: #fff; line-height: 1.25; }
.side-user .rl { font-size: 12px; color: var(--side-faint); }
.side-user .btn { margin-left: auto; }
.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mobilebar { display: none; }
main { flex: 1; }

/* ---------- page structure ---------- */
.wrap { max-width: 1040px; margin: 0 auto; padding: 34px 30px 90px; }
.wrap.narrow { max-width: 480px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.page-head h1 { margin: 0; }
.page-head .lede { margin: 6px 0 0; }
h1 { font-size: 30px; letter-spacing: -0.028em; margin: 0 0 8px; font-weight: 750; }
h2 { font-size: 16.5px; letter-spacing: -0.015em; margin: 0 0 14px; font-weight: 700; }
.lede { color: var(--muted); margin: 0 0 26px; max-width: 64ch; }
.count-chip { font-size: 12.5px; font-weight: 650; color: var(--accent-ink); background: var(--accent-soft);
  border: 1px solid #dbe1fd; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }

/* ---------- cards ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; margin-bottom: 22px; box-shadow: var(--shadow); }
.card > h2 { display: flex; align-items: center; gap: 8px; }
.empty { border: 1.5px dashed var(--line); border-radius: var(--radius); padding: 38px 24px; text-align: center;
  color: var(--muted); font-size: 14px; background: rgba(255,255,255,.5); }
.empty .btn { margin-top: 12px; }

/* ---------- forms ---------- */
.field { margin-bottom: 15px; }
.field label { display: block; font-size: 13px; font-weight: 650; margin-bottom: 6px; color: var(--ink); }
.field .hint, .hint { font-size: 12.5px; color: var(--muted); margin-top: 5px; line-height: 1.5; }
input[type="text"], input[type="url"], input[type="email"], input[type="password"],
input[type="datetime-local"], select {
  width: 100%; padding: 10px 13px; border: 1px solid var(--line); border-radius: var(--radius-s);
  font-size: 14px; font-family: inherit; background: var(--surface); color: var(--ink); transition: border-color .15s, box-shadow .15s; }
input::placeholder { color: var(--faint); }
input:hover, select:hover { border-color: #c9c9c2; }
input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(67, 56, 202, .14); }
.row { display: flex; gap: 14px; } .row > * { flex: 1; min-width: 0; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px;
  border-radius: var(--radius-s); border: 1px solid transparent; font-size: 14px; font-weight: 650; cursor: pointer;
  background: var(--accent); color: #fff; transition: background .15s, transform .05s, border-color .15s, color .15s; }
.btn:hover { background: var(--accent-deep); text-decoration: none; color: #fff; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--line); font-weight: 600; }
.btn.ghost:hover { border-color: var(--faint); background: #fafaf9; color: var(--ink); }
.btn.danger { background: var(--danger); }
.btn.danger:hover { background: #912018; }
.btn.small { padding: 6px 12px; font-size: 12.5px; border-radius: 7px; }
.side .btn.ghost { background: transparent; color: var(--side-ink); border-color: rgba(255,255,255,.16); }
.side .btn.ghost:hover { color: #fff; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.05); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- flash messages ---------- */
.flash { padding: 13px 16px; border-radius: var(--radius-s); margin-bottom: 20px; font-size: 14px; font-weight: 500; }
.flash.error { background: var(--danger-soft); border: 1px solid var(--danger-line); color: var(--danger); }
.flash.ok { background: var(--ok-soft); border: 1px solid var(--ok-line); color: #05603a; }

/* ---------- tables ---------- */
table.grid { width: 100%; border-collapse: collapse; font-size: 14px; }
table.grid th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700;
  color: var(--muted); padding: 9px 14px; border-bottom: 1px solid var(--line); background: #fafaf8; }
table.grid th:first-child { border-radius: 8px 0 0 0; } table.grid th:last-child { border-radius: 0 8px 0 0; }
table.grid td { padding: 13px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
table.grid tbody tr { transition: background .12s; }
table.grid tbody tr:hover { background: #fafaf8; }
table.grid tr:last-child td { border-bottom: none; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- link bits ---------- */
.code-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12.5px; font-weight: 600;
  background: var(--accent-soft); color: var(--accent-ink); padding: 5px 11px; border-radius: 7px;
  border: 1px solid #dbe1fd; white-space: nowrap; }
a.code-pill:hover { background: #e2e7fd; text-decoration: none; }
.dest { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block;
  vertical-align: middle; color: var(--muted); font-size: 13px; }
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 4px 10px;
  border-radius: 999px; white-space: nowrap; letter-spacing: .01em; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.on { background: var(--ok-soft); color: var(--ok-ink); border: 1px solid var(--ok-line); }
.badge.off { background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger-line); }
.badge.exp { background: var(--warn-soft); color: var(--warn-ink); border: 1px solid var(--warn-line); }
.badge.lock { background: var(--accent-soft); color: var(--accent-ink); border: 1px solid #dbe1fd; }
.badge.lock::before { display: none; }
.role-pill { font-size: 12px; font-weight: 650; padding: 3px 10px; border-radius: 999px; background: #f1f0ec; color: var(--muted); }

/* ---------- stats ---------- */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 22px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); }
.stat .num { font-size: 30px; font-weight: 750; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.stat .lbl { font-size: 12px; color: var(--muted); margin-top: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.bars { display: flex; align-items: flex-end; gap: 5px; height: 140px; padding-top: 12px; }
.bar-wrap { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; flex: 1; height: 100%; }
.bar { width: 100%; max-width: 34px; background: linear-gradient(180deg, #6d64f0, var(--accent)); border-radius: 4px 4px 2px 2px; min-height: 3px; transition: filter .15s; }
.bar-wrap:hover .bar { filter: brightness(1.12); }
.bar-lbl { font-size: 10px; color: var(--faint); font-variant-numeric: tabular-nums; }
.kv { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0;
  border-bottom: 1px dashed var(--line); font-size: 14px; }
.kv:last-child { border-bottom: none; }
.kv strong { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---------- landing ---------- */
.hero { padding: 64px 0 20px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: center; }
.hero h1 { font-size: clamp(36px, 5vw, 58px); line-height: 1.04; max-width: 15ch; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero p { font-size: 17px; color: var(--muted); max-width: 46ch; }
.demo { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 20px; }
.demo .row-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; }
.demo .row-line:last-child { border-bottom: none; }
.demo .dest-url { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 210px; }
.demo .meta { display: flex; gap: 14px; margin-top: 6px; font-size: 12px; color: var(--faint); }
.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 44px; }
.feat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.feat .ic { width: 34px; height: 34px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-deep);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.feat .ic svg { width: 18px; height: 18px; }
.feat .t { font-weight: 700; margin-bottom: 5px; font-size: 15px; }
.feat .d { font-size: 13.5px; color: var(--muted); line-height: 1.6; }

/* ---------- auth / centered ---------- */
.auth-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 30px; box-shadow: var(--shadow); }
.auth-head { text-align: center; margin-bottom: 22px; }
.auth-head .mark { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 12px; }
.auth-head .mark svg { width: 24px; height: 24px; }
.auth-head h1 { font-size: 24px; }
.auth-head .lede { margin-bottom: 0; font-size: 14px; }
.auth-card .btn[type="submit"] { width: 100%; padding: 12px; font-size: 15px; margin-top: 4px; }
.center-note { text-align: center; }

/* ---------- QR ---------- */
.qr-big { background: #fff; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius);
  display: inline-block; box-shadow: var(--shadow); }
.qr-big svg { display: block; }

/* ---------- footer ---------- */
footer.foot { border-top: 1px solid var(--line); padding: 20px 30px; color: var(--faint); font-size: 12.5px;
  display: flex; justify-content: space-between; gap: 12px; background: transparent; }

/* ---------- forms (continued) ---------- */
textarea {
  width: 100%; padding: 10px 13px; border: 1px solid var(--line); border-radius: var(--radius-s);
  font-size: 14px; font-family: inherit; background: #fff; color: var(--ink); resize: vertical;
  transition: border-color .15s, box-shadow .15s; line-height: 1.55; }
textarea:hover { border-color: #c9c9c2; }
textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(67, 56, 202, .14); }

/* ---------- microsite editor ---------- */
.block-card { padding: 18px 22px; }
.block-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.block-actions { display: inline-flex; gap: 6px; align-items: center; }

/* ---------- public microsite ---------- */
body.site-public { background: #fbfbf9; }
.site-col { max-width: 720px; margin: 0 auto; padding: 56px 24px 40px; }
.site-hero { text-align: center; padding: 30px 0 44px; }
.site-hero h1 { font-size: clamp(32px, 6vw, 52px); line-height: 1.06; letter-spacing: -0.03em; margin: 0 0 14px; }
.site-sub { font-size: 17px; color: var(--muted); max-width: 52ch; margin: 0 auto 8px; line-height: 1.65; }
.site-btn { padding: 13px 28px; font-size: 15.5px; border-radius: 10px; margin-top: 18px; }
.site-text { padding: 16px 0; }
.site-text h2 { font-size: 24px; letter-spacing: -0.02em; margin: 0 0 10px; }
.site-text p { font-size: 16px; line-height: 1.75; color: #333a45; margin: 0 0 14px; }
.site-img { margin: 22px 0; }
.site-img img { width: 100%; border-radius: 14px; display: block; border: 1px solid var(--line); }
.site-img figcaption { text-align: center; font-size: 13px; color: var(--muted); margin-top: 9px; }
.site-video { margin: 22px 0; }
.site-video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 14px; display: block; background: #000; }
.site-video figcaption { text-align: center; font-size: 13px; color: var(--muted); margin-top: 9px; }
.site-count { text-align: center; padding: 18px 0 8px; }
.site-count h2 { font-size: 24px; letter-spacing: -0.02em; margin: 0 0 14px; }
.cd-boxes { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.cd-box { background: var(--site-accent-soft, #eef0fe); border-radius: 14px; padding: 14px 10px 11px; min-width: 84px; }
.cd-num { font-size: 32px; font-weight: 750; line-height: 1; color: var(--site-accent-deep, #3730a3); }
.cd-lbl { font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-top: 6px; }
.cd-date { font-size: 13.5px; color: var(--muted); margin: 12px 0 0; }
.cd-done { font-size: 18px; font-weight: 650; margin: 0; }
.site-public.mode-dark .cd-box { background: #1a2436; }
.site-public.mode-dark .cd-num { color: #c7d2fe; }
.site-cta { text-align: center; padding: 10px 0 18px; }
.site-foot { text-align: center; color: var(--faint); font-size: 12.5px; padding: 46px 0 8px; }
/* ============ microsites: public page v2 ============ */

.draft-banner { background: var(--warn-soft); border: 1px solid var(--warn-line); color: var(--warn-ink);
  padding: 11px 16px; border-radius: 10px; font-size: 13.5px; font-weight: 650; text-align: center; margin-bottom: 26px; }

/* Theme accents (class-based so the strict public CSP still allows them). */
.site-public { --site-accent: #4338ca; --site-accent-deep: #3730a3; --site-accent-soft: #eef0fe; }
.theme-emerald { --site-accent: #047857; --site-accent-deep: #065f46; --site-accent-soft: #ecfdf5; }
.theme-rose { --site-accent: #be123c; --site-accent-deep: #9f1239; --site-accent-soft: #fff1f2; }
.theme-amber { --site-accent: #b45309; --site-accent-deep: #92400e; --site-accent-soft: #fffbeb; }
.theme-sky { --site-accent: #0369a1; --site-accent-deep: #075985; --site-accent-soft: #f0f9ff; }
.theme-violet { --site-accent: #7c3aed; --site-accent-deep: #6d28d9; --site-accent-soft: #f5f3ff; }

.site-public.mode-dark { background: #0d1320; color: #e8ecf3; }
.site-public.mode-dark .site-sub, .site-public.mode-dark .site-bio,
.site-public.mode-dark .site-text p, .site-public.mode-dark figcaption { color: #aeb8c9; }
.site-public.mode-dark .site-text h2, .site-public.mode-dark .site-name { color: #f2f5fa; }
.site-public.mode-dark .draft-banner { background: #2a2113; border-color: #6b5320; color: #f5d78e; }

.site-btn { display: block; width: 100%; box-sizing: border-box; text-align: center;
  background: var(--site-accent); color: #fff; border: none; border-radius: 12px;
  padding: 14px 18px; font-size: 15.5px; font-weight: 650; text-decoration: none;
  cursor: pointer; transition: background .15s, transform .1s; }
.site-btn:hover { background: var(--site-accent-deep); color: #fff; }
.site-btn:active { transform: scale(.99); }

.link-btn { display: flex; align-items: center; justify-content: center; gap: 10px; }
.link-btn.branded { color: #fff; }
.link-btn.branded:hover { filter: brightness(.92); }
.plat-whatsapp { background: #1faa55; } .plat-instagram { background: #d62976; }
.plat-youtube { background: #e62117; } .plat-tiktok { background: #111827; }
.plat-telegram { background: #229ed9; } .plat-facebook { background: #1877f2; }
.plat-x { background: #000; } .plat-linkedin { background: #0a66c2; }
.plat-line { background: #06c755; } .plat-accent { background: var(--site-accent); }
.plat-whatsapp:hover, .plat-instagram:hover, .plat-youtube:hover, .plat-tiktok:hover,
.plat-telegram:hover, .plat-facebook:hover, .plat-x:hover, .plat-linkedin:hover,
.plat-line:hover { filter: brightness(.92); }

.site-profile { text-align: center; margin-bottom: 26px; }
.site-cover { width: 100%; height: 200px; object-fit: cover; border-radius: 18px; display: block; }
.site-avatar { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; display: block;
  margin: -52px auto 0; border: 4px solid #fff; background: #fff; position: relative; }
.site-public.mode-dark .site-avatar { border-color: #0d1320; }
.site-profile .site-cover + .site-avatar, .site-cover ~ .site-avatar { margin-top: -52px; }
.site-name { font-size: 26px; margin: 14px 0 6px; letter-spacing: -.01em; }
.site-bio { font-size: 14.5px; color: var(--muted); max-width: 46ch; margin: 0 auto; line-height: 1.55; }

.social-row { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 4px; }
.social-ic { width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; color: #fff; text-decoration: none; transition: transform .12s, filter .15s; }
.social-ic:hover { transform: translateY(-2px); filter: brightness(1.05); color: #fff; }

.site-col { max-width: 640px; }

/* ============ microsites: two-pane editor ============ */

.wrap.wide { max-width: 1180px; }
.editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 22px; align-items: start; }
.section-title { font-size: 15px; margin: 18px 0 10px; }
.section-title .hint { font-weight: 400; color: var(--muted); font-size: 12.5px; }
.preview-panel { position: sticky; top: 22px; }
.preview-frame { width: 100%; height: min(76vh, 740px); border: 1px solid var(--line); border-radius: 18px;
  background: #fff; display: block; }
.block-row { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; }
.block-row.dim { opacity: .55; }
.block-row.dragging { opacity: .4; border-style: dashed; }
.block-row-top { display: flex; align-items: center; gap: 10px; padding: 9px 12px; }
.drag { cursor: grab; color: var(--muted); font-size: 16px; user-select: none; padding: 2px 4px; }
.drag:active { cursor: grabbing; }
.block-summary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: var(--ink); }
.block-editor { border-top: 1px dashed var(--line); padding: 4px 12px 14px; }
.block-editor summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--muted); padding: 8px 0; }
.block-editor summary:hover { color: var(--ink); }
.social-edit-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.btn-edit-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.btn-edit-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 8px; align-items: center; }
.btn-edit-row input { margin: 0; }
@media (max-width: 640px) { .btn-edit-row { grid-template-columns: 1fr; } }
.site-btns { display: grid; gap: 10px; }
.click-badge { font-size: 11px; font-weight: 700; color: var(--accent); background: var(--line-soft); border-radius: 999px; padding: 2px 8px; white-space: nowrap; align-self: center; }
.radio-row { display: flex; gap: 16px; flex-wrap: wrap; padding-top: 8px; }
.radio { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.codebox { background: var(--line-soft); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; overflow-x: auto; white-space: pre; margin: 0; }
.thumb { display: block; max-width: 220px; max-height: 140px; border-radius: 10px; border: 1px solid var(--line);
  object-fit: cover; margin: 4px 0 10px; }
.thumb.wide { max-width: 100%; width: 100%; height: 110px; }
.thumb.round { width: 72px; height: 72px; border-radius: 50%; }
input[type="file"] { padding: 8px 10px; background: var(--surface); }
.social-edit-row { display: grid; grid-template-columns: 148px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.social-edit-row select, .social-edit-row input { margin: 0; }
.mini-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); white-space: nowrap; }
@media (max-width: 640px) { .social-edit-row { grid-template-columns: 1fr; } }

@media (max-width: 1024px) {
  .editor-grid { grid-template-columns: 1fr; }
  .preview-panel { position: static; }
  .preview-frame { height: 520px; }
}


/* ---------- branding (Pengaturan) & landing ---------- */
.gov-ribbon { height: 4px; background: linear-gradient(90deg, #c0272d 0 38%, #e8b13a 38% 50%, #0a4d92 50% 100%); }
.brand-word { display: inline-flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-word strong { font-size: 15.5px; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-word small { font-size: 10.5px; color: var(--side-faint); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mobilebar .brand-word small { display: none; }
.mark-img { width: 32px; height: 32px; border-radius: 9px; object-fit: contain; background: #fff; padding: 2px; flex: 0 0 auto; }
.mark-img.big { width: 52px; height: 52px; border-radius: 12px; }
.mark.big { width: 56px; height: 56px; border-radius: 14px; }
.mark.big svg { width: 30px; height: 30px; }
.checkline { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); margin-top: 10px; cursor: pointer; }
.settings-logo { max-height: 64px; max-width: 220px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 6px; }
.settings-bg { max-height: 110px; width: 100%; max-width: 340px; object-fit: cover; border: 1px solid var(--line); border-radius: 10px; }
/* Admin-selectable app accents (class-based: app CSP forbids inline styles). */
body.accent-marun { --accent: #8c2f2f; --accent-deep: #6d2121; --accent-ink: #7a2828; --accent-soft: #f9ecec; }
body.accent-hijau { --accent: #0b6e4f; --accent-deep: #074f39; --accent-ink: #0a5c43; --accent-soft: #e6f4ee; }
body.accent-emas { --accent: #9a7410; --accent-deep: #715506; --accent-ink: #7d6208; --accent-soft: #faf3dd; }
body.accent-slate { --accent: #43536b; --accent-deep: #2e3a4d; --accent-ink: #37455c; --accent-soft: #eceff4; }
.content main { flex: 1; display: flex; flex-direction: column; }
.landing { position: relative; overflow: hidden; padding: 56px 30px 72px; flex: 1; display: flex; align-items: center; justify-content: center; }
.landing-inner { position: relative; z-index: 1; max-width: 960px; margin: 0 auto; text-align: center; width: 100%; }
.landing-head { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 26px; }
.landing-logo { width: 76px; height: 76px; object-fit: contain; background: #fff; border-radius: 18px; padding: 8px; box-shadow: var(--shadow); margin-bottom: 8px; }
.landing .mark.big { margin-bottom: 8px; }
.landing-inst { font-size: 21px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.landing-tag { font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.landing h1 { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.14; max-width: 24ch; margin: 0 auto 14px; text-wrap: balance; }
.landing-sub { font-size: 16.5px; color: var(--muted); max-width: 58ch; margin: 0 auto; text-wrap: balance; }
.landing-actions { margin-top: 28px; justify-content: center; }
.landing .feat-grid { text-align: left; margin: 52px auto 0; max-width: 780px;
  grid-template-columns: repeat(2, minmax(0, 1fr)); }
.landing .feat { border-top: 3px solid var(--accent); }
.landing .btn.big { padding: 13px 26px; font-size: 15.5px; }
.landing-biru { background: linear-gradient(165deg, #062544 0%, #0a3a68 55%, #0a4d92 115%); color: #fff; }
.landing-biru .landing-tag, .landing-biru .landing-sub { color: #b9cfe6; }
.landing-biru .feat { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); border-top: 3px solid #e8b13a; color: #eaf1f9; box-shadow: none; }
.landing-biru .feat .d { color: #b9cfe6; }
.landing-biru .feat .ic { background: rgba(255,255,255,.12); color: #ffd968; }
.landing-merahputih { background: linear-gradient(180deg, #fbeeec 0, #f7f9fc 340px); }
.landing-gambar { color: #fff; }
.landing-gambar .landing-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.landing-gambar::before { content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(170deg, rgba(6,37,68,.88), rgba(10,58,104,.62) 60%, rgba(6,37,68,.85)); }
.landing-gambar .landing-tag, .landing-gambar .landing-sub { color: #cfdff2; }
.landing-gambar .feat { background: rgba(6,30,56,.55); border-color: rgba(255,255,255,.2); border-top: 3px solid #e8b13a; color: #eef4fb; box-shadow: none; }
.landing-gambar .feat .d { color: #cfdff2; }
.landing-gambar .feat .ic { background: rgba(255,255,255,.14); color: #ffd968; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 820px) {
  .landing .feat-grid { grid-template-columns: 1fr; }
  .shell { flex-direction: column; }
  .side { display: none; }
  .mobilebar { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px;
    background: var(--side); color: #fff; position: sticky; top: 0; z-index: 10; }
  .mobilebar .side-brand { padding: 0; }
  .mobilebar nav { display: flex; gap: 14px; align-items: center; font-size: 13.5px; }
  .mobilebar nav a { color: var(--side-ink); }
  .mobilebar nav a:hover { color: #fff; text-decoration: none; }
  .row { flex-direction: column; gap: 0; }
  table.grid .hide-m { display: none; }
  .wrap { padding: 24px 18px 70px; }
  .page-head { flex-direction: column; align-items: flex-start; }
  h1 { font-size: 26px; }
}
/* Soft theme ("Lembut"): pastel gradient backdrop + white card buttons, s.id-style. */
.site-public.style-soft { background: linear-gradient(155deg, #fde9e2 0%, #f8e1ee 38%, #e2ecfd 72%, #d8efe6 100%);
  background-attachment: fixed; }
.site-public.style-soft.mode-dark { background: linear-gradient(155deg, #262038 0%, #1d2739 55%, #152231 100%);
  background-attachment: fixed; }
.style-soft .site-btn { background: #fff; color: #23272f; border: 1px solid rgba(255,255,255,.75);
  border-radius: 14px; box-shadow: 0 3px 14px rgba(63,52,92,.10); position: relative; }
.style-soft .site-btn:hover { background: #fff; color: #23272f; transform: translateY(-1px);
  box-shadow: 0 7px 20px rgba(63,52,92,.15); }
.style-soft .link-btn { justify-content: center; }
.style-soft .link-btn svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; padding: 8px; box-sizing: content-box; border-radius: 10px;
  background: #eceef2; color: #4b5261; }
.style-soft .social-ic { background: #fff; color: #4b5261; box-shadow: 0 3px 12px rgba(63,52,92,.10); }
.style-soft .social-ic:hover { color: #23272f; }
.style-soft.mode-dark .site-avatar { border-color: #1d2739; }

/* Preset themes ("has-preset"): curated full looks — win over accent/style/mode. */
.site-public.preset-senja { --site-accent: #ea580c; --btn-bg: #ffffff; --btn-ink: #3a2418; --btn-border: rgba(255,255,255,.8);
  --chip-bg: #fde8d7; --chip-ink: #b45309; --page-sub: rgba(58,36,24,.66);
  background: linear-gradient(158deg, #fff3d6 0%, #ffd9bd 34%, #ffb3c1 72%, #f9a8d4 100%); background-attachment: fixed; color: #3a2418; }
.site-public.preset-samudra { --site-accent: #38bdf8; --btn-bg: rgba(255,255,255,.13); --btn-ink: #ffffff; --btn-border: rgba(255,255,255,.3);
  --chip-bg: rgba(255,255,255,.18); --chip-ink: #ffffff; --page-sub: rgba(234,246,255,.72);
  background: linear-gradient(165deg, #062a4d 0%, #075985 55%, #0e7490 100%); background-attachment: fixed; color: #eaf6ff; }
.site-public.preset-noir { --site-accent: #fafaf9; --btn-bg: #ffffff; --btn-ink: #0b0b0d; --btn-border: transparent;
  --chip-bg: #e7e5e4; --chip-ink: #0b0b0d; --page-sub: rgba(245,245,244,.6);
  background: #0b0b0d; color: #f5f5f4; }
.site-public.preset-hutan { --site-accent: #d9b45b; --btn-bg: #f6f1e3; --btn-ink: #14342a; --btn-border: rgba(246,241,227,.9);
  --chip-bg: #e0ead3; --chip-ink: #14532d; --page-sub: rgba(238,247,238,.7);
  background: linear-gradient(160deg, #03211a 0%, #0a4530 58%, #0d5c3f 100%); background-attachment: fixed; color: #eef7ee; }
.site-public.preset-lavender { --site-accent: #7c3aed; --btn-bg: #ffffff; --btn-ink: #2e2150; --btn-border: rgba(255,255,255,.8);
  --chip-bg: #ece4ff; --chip-ink: #6d28d9; --page-sub: rgba(46,33,80,.62);
  background: linear-gradient(155deg, #efe7ff 0%, #e3d5ff 38%, #f6d9ec 78%, #ffe9f3 100%); background-attachment: fixed; color: #2e2150; }
.site-public.has-preset .site-btn { background: var(--btn-bg); color: var(--btn-ink); border: 1px solid var(--btn-border);
  border-radius: 14px; box-shadow: 0 3px 14px rgba(20,16,40,.14); position: relative; backdrop-filter: blur(6px); }
.site-public.has-preset .site-btn:hover { background: var(--btn-bg); color: var(--btn-ink); transform: translateY(-1px); filter: brightness(1.03); }
.site-public.has-preset .link-btn { justify-content: center; }
.site-public.has-preset .link-btn svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; padding: 8px; box-sizing: content-box; border-radius: 10px; background: var(--chip-bg); color: var(--chip-ink); }
.site-public.has-preset .social-ic { background: var(--btn-bg); color: var(--chip-ink);
  box-shadow: 0 3px 12px rgba(20,16,40,.14); border: 1px solid var(--btn-border); }
.site-public.has-preset .site-sub, .site-public.has-preset .site-bio,
.site-public.has-preset .site-text p, .site-public.has-preset figcaption { color: var(--page-sub); }
.site-public.preset-senja .site-avatar { border-color: #ffd9bd; }
.site-public.preset-samudra .site-avatar { border-color: #075985; }
.site-public.preset-noir .site-avatar { border-color: #0b0b0d; }
.site-public.preset-hutan .site-avatar { border-color: #0a4530; }
.site-public.preset-lavender .site-avatar { border-color: #e3d5ff; }


/* ---------- dark theme (body.theme-dark, toggled from the dock) ---------- */
body.theme-dark {
  --bg: #0a1120; --surface: #121e33; --ink: #e7eef8; --muted: #9db1cc; --faint: #5f7799;
  --line: #243650; --line-soft: #1b2a44; --shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
body.theme-dark table.grid th { background: #16233c; }
body.theme-dark .btn.ghost:hover { background: #1a2a47; }
body.theme-dark .role-pill { background: #1e2f4d; }
body.theme-dark .empty { background: rgba(255, 255, 255, .03); }
body.theme-dark .flash.ok { background: #10301f; color: #7be2a8; }
body.theme-dark .flash.err { background: #3a1620; color: #ff9db0; }
body.theme-dark .mobilebar { background: var(--surface); }

/* ---------- right-edge display rail: theme + language, animated ---------- */
.content { padding-bottom: 36px; }
.rail { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 80; }
.rail-tab { display: flex; align-items: center; justify-content: center; width: 38px; height: 54px;
  border: 1px solid var(--line); border-right: 0; border-radius: 12px 0 0 12px;
  background: var(--surface); color: var(--muted); cursor: pointer;
  box-shadow: -6px 10px 24px rgba(8, 22, 44, .18); transition: color .15s, background .15s; }
.rail-tab:hover { color: var(--ink); }
.rail-tab svg { width: 20px; height: 20px; transition: transform .35s ease; }
.rail.open .rail-tab svg { transform: rotate(45deg); }
.rail-panel { position: absolute; right: 48px; top: 50%;
  transform: translateY(-50%) translateX(12px); opacity: 0; pointer-events: none;
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 14px 34px rgba(8, 22, 44, .28);
  transition: transform .28s ease, opacity .22s ease; }
.rail.open .rail-panel { transform: translateY(-50%); opacity: 1; pointer-events: auto; }
.rail-panel button { display: flex; align-items: center; gap: 9px; white-space: nowrap;
  padding: 8px 12px; border: 0; background: transparent; border-radius: 9px;
  color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .15s, color .15s; }
.rail-panel button:hover { background: var(--line-soft); color: var(--ink); }
.rail-panel button svg { width: 19px; height: 19px; flex: none; }
.rail-panel .ic-sun { display: none; }
body.theme-dark .rail-panel .ic-sun { display: block; }
body.theme-dark .rail-panel .ic-moon { display: none; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}