@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-Thin.ttf") format("truetype");
  font-style: normal;
  font-weight: 100;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-ExtraLight.ttf") format("truetype");
  font-style: normal;
  font-weight: 200;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-Light.ttf") format("truetype");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-ExtraBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-Black.ttf") format("truetype");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

/* Colors mirrored from hivelink-app/lib/core/theme/app_colors.dart. */
:root {
  color-scheme: light;
  --font-family: "Inter", sans-serif;
  --primary: #2F80EC;
  --primary-dark: #1D5FB8;
  --primary-soft: #E8F1FE;
  --secondary: #5265A8;
  --secondary-soft: #EBEEFF;
  --tertiary: #007D83;
  --background: #F7F9FD;
  --surface: #FFFFFF;
  --primary-text: #172338;
  --secondary-text: #526176;
  --border: #CBD5E3;
  --dark-background: #0E1624;
  --dark-surface: #172235;
  --dark-primary-text: #EDF3FC;
  --dark-secondary-text: #B2BFD2;
  --dark-border: #46566D;
  --dark-secondary: #BBC7FF;
  --dark-tertiary: #76D5DA;
  --success: #237A4B;
  --warning: #916000;
  --error: #BA1A1A;
  --dark-success: #7DD9A5;
  --dark-warning: #FFD180;
  --dark-error: #FFB4AB;
  --blue: var(--primary);
  --ink: var(--primary-text);
  --muted: var(--secondary-text);
  --line: var(--border);
  --bg: var(--background);
}
*{box-sizing:border-box}body{margin:0;font-family:var(--font-family);color:var(--ink);background:var(--bg);font-size:14px;line-height:1.6}a{color:inherit;text-decoration:none}button,input,textarea,select,code,pre,kbd,samp{font-family:var(--font-family)}button,input,textarea,select{font:inherit}button,a,input,textarea{touch-action:manipulation}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--primary);outline-offset:3px}h1,h2,p{margin-top:0}h1{font-size:34px;letter-spacing:-1.2px;line-height:1.2;margin-bottom:12px}h2{font-size:17px;letter-spacing:-.3px}p{color:var(--muted)}.muted{color:var(--muted)}.blue{color:var(--blue)}.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:700;display:block;margin-bottom:15px}.brand{display:flex;align-items:center;font-size:27px;letter-spacing:-1px;font-weight:800;gap:10px}.brand-icon{display:inline-grid;place-items:center;width:37px;height:40px;background:var(--blue);color:var(--surface);border-radius:12px;font-size:24px;font-weight:800}.brand-dot{color:var(--blue);margin-left:-10px}.sidebar{width:248px;position:fixed;inset:0 auto 0 0;background:var(--surface);border-right:1px solid var(--line);padding:35px 24px;display:flex;flex-direction:column}.sidebar>.eyebrow{margin-top:52px;color:var(--secondary-text);font-size:9px}nav{display:grid;gap:8px}nav a{padding:12px 14px;color:var(--secondary-text);border-radius:9px;font-weight:600}nav a span{margin-right:13px;font-size:18px}nav a:hover{background:var(--background)}nav a[aria-current]{background:var(--primary-soft);color:var(--primary-dark)}.sidebar-note{margin-top:auto;padding:25px 0;font-size:12px;font-weight:600}.sidebar-note p{font-weight:400;margin:7px 0 0 16px;font-size:11px}.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--success);margin-right:6px}.account{display:flex;gap:10px;align-items:center;padding-top:20px;border-top:1px solid var(--line)}.account strong{display:block;font-size:12px;overflow-wrap:anywhere}.account small{display:block;color:var(--muted);font-size:10px}.avatar{border-radius:50%;background:var(--primary-soft);color:var(--primary-dark);width:34px;height:34px;display:grid;place-items:center;flex-shrink:0}.signout{background:none;border:0;padding:12px 0;color:var(--muted);font-size:12px;cursor:pointer}.workspace{margin-left:248px}.topbar{height:80px;background:var(--surface);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 42px;font-size:12px}.topbar .muted{margin-left:13px}.pill{font-size:10px;border:1px solid var(--line);border-radius:20px;padding:5px 12px}main{max-width:1440px;margin:auto;padding:42px}.page-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:6px 0 28px}.page-heading p{margin-bottom:0}.button{display:inline-flex;gap:25px;align-items:center;justify-content:center;border:1px solid transparent;border-radius:8px;padding:11px 18px;font-weight:600;font-size:12px;cursor:pointer;white-space:nowrap}.primary{background:var(--blue);color:var(--surface);box-shadow:0 4px 10px color-mix(in srgb, var(--primary) 9%, transparent)}.primary:hover{background:var(--primary-dark)}.secondary{background:var(--surface);border-color:var(--line)}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:26px}.metric,.panel{background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:25px}.metric-icon{background:var(--primary-soft);color:var(--blue);font-size:22px;width:39px;height:39px;border-radius:10px;display:grid;place-items:center;margin-bottom:18px}.lavender{background:var(--secondary-soft);color:var(--secondary)}.mint{background:color-mix(in srgb, var(--success) 10%, var(--surface));color:var(--success)}.metric p{font-size:12px;margin-bottom:5px}.metric h2{font-size:26px;margin-bottom:5px}.metric small{font-size:11px;color:var(--muted)}.content-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:24px}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px}.panel-heading h2{margin:0}.badge{font-size:9px;font-weight:600;background:var(--primary-soft);color:var(--primary-dark);border-radius:5px;padding:4px 8px;white-space:nowrap}.detail{display:flex;justify-content:space-between;gap:18px;padding:17px 0;border-bottom:1px solid var(--border);font-size:12px}.detail span{color:var(--muted)}.detail strong{font-weight:600;overflow-wrap:anywhere;text-align:right}.detail code{color:var(--primary-dark)}.text-link{display:inline-block;color:var(--blue);font-size:12px;font-weight:600;margin-top:22px}.developer-panel{background:linear-gradient(140deg,var(--surface),var(--primary-soft))}.developer-panel h2{font-size:23px}.developer-panel p{font-size:13px;max-width:360px}.code-sample{font-family:var(--font-family);font-size:12px;padding:16px;background:var(--primary-soft);border-radius:8px;margin:24px 0}.code-sample span{color:var(--success);margin-right:10px}.next-panel{margin-top:24px;display:flex;align-items:center;gap:20px}.next-panel h2{margin-bottom:5px}.next-panel p{font-size:12px;margin:0;max-width:660px}.next-panel>.badge{margin-left:auto}.next-icon{font-size:32px;color:var(--secondary);background:var(--primary-soft);border-radius:12px;padding:4px 17px}footer{margin:0 42px;padding:20px 0;border-top:1px solid var(--line);font-size:10px;color:var(--secondary-text);display:flex;justify-content:space-between}.settings-form{max-width:850px;padding:32px}.settings-form>p{font-size:12px}label{display:block;font-size:12px;font-weight:600;margin:22px 0 8px}input:not([type=checkbox]):not([type=hidden]),textarea{display:block;width:100%;border:1px solid var(--border);border-radius:8px;background:var(--surface);padding:12px 14px;color:var(--ink)}textarea{resize:vertical}.settings-form input:not([type=checkbox]){max-width:540px}hr{border:0;border-top:1px solid var(--line);margin:30px 0}.check-label{display:flex;gap:10px;align-items:center}.check-label input{accent-color:var(--blue);width:18px;height:18px}.hint{font-size:12px}.form-footer{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-top:30px;padding-top:25px;border-top:1px solid var(--line);font-size:11px}.notice{border-radius:8px;padding:12px 16px;margin-bottom:20px;font-size:13px}.success{background:color-mix(in srgb, var(--success) 10%, var(--surface));color:var(--success)}.error{background:color-mix(in srgb, var(--error) 8%, var(--surface));color:var(--error)}.login-shell{display:grid;grid-template-columns:46% 54%;min-height:100vh}.login-story{position:relative;overflow:hidden;min-height:100vh;padding:48px 60px;background:var(--dark-surface);color:var(--surface);display:flex;flex-direction:column;justify-content:space-between}.login-story>.brand{color:var(--surface)}.login-story .eyebrow{font-size:9px;color:var(--dark-primary-text);margin-top:50px}.login-story h1{font-size:clamp(38px,4.8vw,72px);letter-spacing:-2px;line-height:1.12}.login-story h1 span{color:var(--dark-secondary)}.login-story p{color:var(--dark-secondary-text);max-width:290px}.login-story small{color:var(--dark-secondary-text);font-size:11px}.orbit{position:relative;width:190px;height:150px;margin:25px 0;border:1px solid color-mix(in srgb, var(--dark-border) 35%, transparent);border-radius:50%;display:grid;place-items:center;transform:rotate(-20deg)}.orbit:before{content:'';position:absolute;inset:20px -30px;border:1px solid var(--dark-border);border-radius:50%}.orbit span{display:grid;place-items:center;background:var(--primary);width:70px;height:70px;border-radius:22px;font-size:38px;font-weight:800;transform:rotate(20deg);box-shadow:0 0 80px color-mix(in srgb, var(--primary) 33%, transparent)}.orbit i,.orbit b{position:absolute;width:15px;height:15px;background:var(--dark-secondary);border-radius:50%;left:0;top:40px}.orbit b{left:auto;right:0;top:90px;width:11px;height:11px;background:var(--dark-tertiary)}.login-main{display:grid;place-items:center;padding:50px;width:100%;max-width:none;margin:0;align-self:stretch;background:var(--surface)}.login-card{width:100%;max-width:380px}.login-card h1{font-size:34px}.login-card>p{font-size:13px}.full{width:100%;margin-top:28px;justify-content:space-between;padding:13px 18px}.login-help{border-top:1px solid var(--line);padding-top:24px;margin-top:32px;font-size:11px!important;line-height:1.9}.error-page{max-width:600px;margin:10vh auto}.skip{position:absolute;top:-100px}.skip:focus{top:0;left:260px;background:var(--surface);padding:10px;z-index:5}@media(min-width:1600px){main{padding:55px}}@media(max-width:1100px){.sidebar{width:210px;padding:28px 18px}.workspace{margin-left:210px}main{padding:28px}.topbar{padding:0 28px}.content-grid{grid-template-columns:1fr}.metric{padding:20px}.metric h2{font-size:22px}.page-heading h1{font-size:29px}.next-panel>.badge{display:none}.login-story{padding:40px}}@media(max-width:720px){.sidebar{position:static;width:100%;padding:18px;border-right:0;border-bottom:1px solid var(--line)}.sidebar>.eyebrow,.sidebar-note,.account{display:none}.sidebar .brand{font-size:22px}.sidebar nav{display:flex;margin-top:15px;gap:4px;flex-wrap:wrap}nav a{font-size:11px;padding:8px}nav a span{margin-right:4px}.workspace{margin:0}.topbar{height:58px;padding:0 20px}main{padding:24px 18px}.page-heading{align-items:flex-start;flex-direction:column;gap:16px}.page-heading h1{font-size:29px}.metrics{gap:10px;grid-template-columns:1fr}.metric{display:grid;grid-template-columns:42px 1fr;column-gap:15px}.metric-icon{grid-row:1/4;margin:0}.metric h2{font-size:23px}.metric p{margin:0}.panel{padding:22px}.panel-heading{align-items:flex-start;flex-direction:column}.next-panel{align-items:flex-start}.next-icon{display:none}footer{margin:0 20px}.form-footer{align-items:flex-start;flex-direction:column}.login-shell{grid-template-columns:1fr}.login-story{min-height:0;padding:22px}.login-story>div,.login-story>small{display:none}.login-main{padding:48px 24px;min-height:80vh}.login-card h1{font-size:30px}.skip:focus{left:0}}


/* Original HiveLink mobile assets, kept at their native aspect ratio. */
.brand-wordmark { display: block; width: 164px; height: auto; }
.brand-logo { display: block; object-fit: contain; }
.login-story > .brand { align-self: flex-start; }
.orbit span { background: var(--surface); }
.orbit img, .avatar img { display: block; object-fit: contain; }

.password-field { position: relative; }
.password-field input { padding-right: 54px; }
.password-toggle { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--secondary-text); cursor: pointer; }
.password-toggle:hover { color: var(--primary-dark); background: var(--primary-soft); }
.password-toggle[hidden], .password-toggle .eye-closed { display: none; }
.password-toggle[aria-pressed="true"] .eye-open { display: none; }
.password-toggle[aria-pressed="true"] .eye-closed { display: block; }
.login-shell { min-height: 100dvh; }

/* Shared administration layout, adapted from Servy's header/menu/footer. */
.admin-shell { --sidebar-width: 260px; --header-height: 80px; }
.admin-shell .sidebar { width: var(--sidebar-width); padding: 0; z-index: 40; transition: width .18s ease, transform .18s ease; }
.shell-brand { display: flex; align-items: center; gap: 10px; height: var(--header-height); padding: 16px 22px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.shell-brand img { flex-shrink: 0; background: var(--primary-soft); border-radius: 12px; }
.brand-copy strong { display: block; font-size: 21px; font-weight: 800; line-height: 1.2; letter-spacing: -.6px; }
.brand-copy small { color: var(--muted); font-size: 10px; letter-spacing: 1px; }
.admin-shell .shell-navigation { display: block; padding: 24px 16px; overflow-y: auto; overscroll-behavior-y: contain; min-height: 0; flex: 1; }
.menu-section + .menu-section { margin-top: 26px; }
.menu-caption { display: block; padding: 0 14px; margin-bottom: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 1.3px; font-size: 10px; font-weight: 600; }
.admin-shell .menu-link { display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: var(--ink); font-size: 14px; font-weight: 700; border-radius: 8px; min-height: 46px; }
.admin-shell .menu-link span { margin: 0; font-size: inherit; }
.admin-shell .menu-link:hover { background: var(--bg); color: var(--primary-dark); }
.admin-shell .menu-link[aria-current="page"] { position: relative; background: var(--primary-soft); color: var(--primary-dark); }
.admin-shell .menu-link[aria-current="page"]::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--primary); }
/* Keep light selection soft, including when the selected item is hovered. */
:root:not([data-theme="dark"]) .admin-shell .menu-link[aria-current="page"] { background: #E8F1FE; color: #1D5FB8; box-shadow: inset 0 0 0 1px #C9DDFC; }
.admin-shell svg { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.menu-bottom { display: flex; align-items: center; gap: 10px; padding: 18px 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.admin-shell .workspace { margin-left: var(--sidebar-width); min-height: 100dvh; display: flex; flex-direction: column; padding-top: var(--header-height); transition: margin-left .18s ease; }
.admin-shell .topbar { position: fixed; top: 0; right: 0; left: var(--sidebar-width); height: var(--header-height); padding: 0 30px; z-index: 50; transition: left .18s ease; }
.header-start { display: flex; align-items: center; gap: 22px; }
.shell-icon-button { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); cursor: pointer; }
.shell-icon-button:hover { background: var(--primary-soft); color: var(--primary-dark); }
.shell-icon-button[hidden], .menu-backdrop[hidden] { display: none; }
.admin-shell .breadcrumb { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--muted); }
.admin-shell .breadcrumb a { padding: 0; font-size: inherit; color: var(--ink); }
.profile-menu { position: relative; }
.profile-menu summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; border-radius: 8px; padding: 5px; }
.profile-menu summary::-webkit-details-marker { display: none; }
.profile-menu summary:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.profile-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-dark); display: grid; place-items: center; font-weight: 600; }
.profile-summary strong, .profile-summary small { display: block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-summary strong { font-size: 12px; }
.profile-summary small { font-size: 10px; color: var(--muted); }
.profile-popover { position: absolute; top: calc(100% + 14px); right: 0; width: 280px; max-width: calc(100vw - 32px); padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px color-mix(in srgb, var(--primary-text) 12%, transparent); }
.profile-info { padding: 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; overflow-wrap: anywhere; }
.profile-info strong { display: block; margin-bottom: 7px; }
.profile-info small { display: block; margin-top: 8px; color: var(--muted); }
.profile-popover > a, .profile-popover button { display: flex; justify-content: space-between; width: 100%; padding: 11px 12px; border: 0; border-radius: 6px; background: transparent; text-align: left; font-size: 12px; cursor: pointer; }
.profile-popover > a:hover, .profile-popover button:hover { background: var(--primary-soft); }
.profile-popover button { color: var(--error); }
.admin-shell .admin-content { width: 100%; max-width: 1500px; margin: 0 auto; padding: 32px; flex: 1; }
.admin-shell .admin-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; justify-content: space-between; margin: 0; padding: 19px 30px; background: var(--surface); border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; flex-shrink: 0; }
.footer-brand { color: var(--ink); font-weight: 700; letter-spacing: .7px; }
.footer-brand span { color: var(--muted); font-weight: 400; margin-left: 7px; letter-spacing: 0; }
.footer-credit a { color: var(--primary-dark); font-weight: 600; }
.footer-heart { color: var(--error); }
.footer-build { font-variant-numeric: tabular-nums; }
.menu-backdrop { display: none; }
.admin-shell.menu-collapsed { --sidebar-width: 86px; }
.menu-collapsed .shell-brand { padding: 16px 20px; }
.menu-collapsed .brand-copy, .menu-collapsed .menu-caption, .menu-collapsed .menu-label { display: none; }
.menu-collapsed .shell-navigation { padding: 24px 13px; }
.menu-collapsed .menu-link { justify-content: center; padding: 12px; }
.menu-collapsed .menu-bottom { justify-content: center; padding: 18px; }
@media(max-width:900px) {
  .admin-shell { --sidebar-width: 260px; --header-height: 68px; }
  .admin-shell .sidebar { position: fixed; inset: var(--header-height) auto 0 0; transform: translateX(-100%); border-right: 1px solid var(--line); border-bottom: 0; }
  .admin-shell.menu-open .sidebar { transform: translateX(0); }
  .admin-shell .workspace { margin-left: 0; }
  .admin-shell .topbar { left: 0; padding: 0 16px; }
  .admin-shell .shell-navigation { display: block; margin: 0; }
  .admin-shell .admin-content { padding: 24px 18px; }
  .admin-shell .admin-footer { padding: 18px; }
  .menu-backdrop:not([hidden]) { display: block; position: fixed; inset: var(--header-height) 0 0; border: 0; background: color-mix(in srgb, var(--dark-background) 40%, transparent); z-index: 30; }
  .admin-shell.menu-open { overflow: hidden; }
  .profile-summary { display: none; }
  .header-start { gap: 12px; }
  .admin-shell .breadcrumb { gap: 7px; font-size: 11px; }
  .admin-shell .skip:focus { left: 10px; z-index: 100; }
}
@media(prefers-reduced-motion:reduce) { .admin-shell .sidebar, .admin-shell .workspace, .admin-shell .topbar { transition: none; } }

.management-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.filter-form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 22px; padding: 18px 22px; }
.filter-form label { margin: 0; }
.filter-form select { border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; background: var(--surface); color: var(--primary-text); }
.management-form .hint { display: block; margin-top: 8px; color: var(--secondary-text); }
.management-form input:not([type=checkbox]) { max-width: none; }
.policy-list { display: grid; gap: 18px; }
.policy-editor summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer; }
.policy-editor summary:before { content: '+'; color: var(--primary); }
.policy-editor[open] summary:before { content: '−'; }
.policy-editor summary strong { flex: 1; }
@media(max-width:900px) { .management-grid { grid-template-columns: 1fr; } }

/* One integration editor at a time avoids gaps between unequal-height forms. */
.compact-heading { margin: 0 0 22px; }
.compact-heading .eyebrow { margin-bottom: 8px; }
.compact-heading h1 { font-size: 28px; margin-bottom: 8px; }
.integration-workspace { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 24px; align-items: start; max-width: 1180px; }
.admin-shell .provider-navigation { display: grid; gap: 6px; padding: 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.admin-shell .provider-link { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 12px; border-radius: 8px; }
.admin-shell .provider-link > span { margin: 0; font-size: 13px; }
.provider-link strong { display: block; color: var(--primary-text); font-weight: 600; }
.provider-link small { display: block; margin-top: 4px; color: var(--secondary-text); font-size: 11px; line-height: 1.5; font-weight: 400; }
.provider-link[aria-current="page"] strong { color: var(--primary-dark); }
.provider-indicator { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--border); }
.provider-indicator.is-enabled { background: var(--success); }
.integration-editor { padding: 24px; }
.integration-editor-heading { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.integration-editor-heading h2 { font-size: 20px; margin: 0 0 5px; }
.integration-editor-heading p { font-size: 12px; margin: 0; }
.integration-status { padding: 4px 9px; border-radius: 6px; background: var(--background); color: var(--secondary-text); font-size: 10px; font-weight: 600; }
.integration-status.is-enabled { color: var(--success); background: color-mix(in srgb, var(--success) 10%, var(--surface)); }
.credential-note { padding: 12px 0; margin: 12px 0 20px; border-bottom: 1px solid var(--border); font-size: 11px; }
.integration-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.integration-field { min-width: 0; }
.integration-field.field-wide { grid-column: 1 / -1; }
.integration-field label { margin: 0 0 7px; font-size: 12px; }
.integration-field input, .integration-field textarea { padding: 10px 12px; font-size: 13px; }
.required-mark { color: var(--primary-dark); }
.saved-secret { display: block; color: var(--success); margin-top: 6px; font-size: 10px; }
.integration-editor-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border); }
.integration-editor-footer .check-label { margin: 0; }
.admin-shell .release-platforms { display: inline-flex; gap: 4px; margin-bottom: 20px; padding: 4px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.release-platforms a { --platform-eye: var(--surface); display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 40px; text-transform: none; padding: 9px 24px; border: 1px solid transparent; background: transparent; font-size: 12px; }
.release-platforms a[aria-current="page"] { --platform-eye: var(--primary-soft); border-color: var(--primary); }
.release-platforms .platform-icon { width: 19px; height: 19px; flex: 0 0 19px; }
@media(max-width:1100px) { .integration-workspace { grid-template-columns: 200px minmax(0,1fr); gap: 18px; } }
@media(max-width:760px) {
  .integration-workspace { grid-template-columns: 1fr; }
  .admin-shell .provider-navigation { display: flex; overflow-x: auto; }
  .admin-shell .provider-link { flex: 0 0 auto; padding: 10px 12px; }
  .provider-link small { display: none; }
  .integration-editor { padding: 20px; }
}
@media(max-width:480px) {
  .integration-fields { grid-template-columns: 1fr; }
  .integration-editor-footer { flex-wrap: wrap; }
  .integration-editor-footer button { width: 100%; }
}

.integration-editor-column { display: grid; gap: 18px; min-width: 0; }
.integration-check { padding: 24px; scroll-margin-top: 100px; }
.integration-check h2 { margin: 0 0 8px; font-size: 18px; }
.integration-check > p { margin-bottom: 20px; font-size: 12px; }
.integration-check-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px; }
.integration-check-form label { margin: 0 0 8px; }
.integration-check-form .button { min-height: 46px; gap: 9px; }
.integration-check .hint { display: block; margin-top: 12px; color: var(--secondary-text); }
.integration-check :disabled { opacity: .6; cursor: not-allowed; }
.integration-check .notice { font-size: 12px; }
@media(max-width:1100px) { .integration-check-form { grid-template-columns: 1fr; } }
.policy-editor .policy-rich-editor { height: clamp(240px, 32vh, 320px); min-height: 0; background: var(--surface); font: inherit; }
.policy-editor .ql-toolbar.ql-snow { margin-top: 8px; border-color: var(--border); border-radius: 8px 8px 0 0; background: var(--background); }
.policy-editor .ql-container.ql-snow { border-color: var(--border); border-radius: 0 0 8px 8px; font-family: var(--font-family); font-size: 14px; }
.policy-editor .ql-editor { height: 100%; min-height: 0; padding: 18px 20px; overflow-y: auto; overscroll-behavior: contain; line-height: 1.8; }
.policy-editor .ql-container:focus-within { border-color: var(--primary); }
.policy-editor .ql-toolbar.ql-snow { padding: 10px 12px; }
.policy-editor .ql-toolbar.ql-snow button { border: 0; border-radius: 4px; }
.policy-editor .ql-toolbar.ql-snow button:hover { background: var(--primary-soft); }
.policy-editor .ql-toolbar button, .policy-editor .ql-picker { color: var(--primary-text); }
.policy-editor .ql-stroke { stroke: var(--primary-text); }
.policy-editor .ql-fill { fill: var(--primary-text); }
.policy-preview-actions { display: flex; align-items: center; gap: 14px; margin: 16px 0; }
.policy-preview-frame { width: 100%; height: 450px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.policy-preview-frame[hidden], .policy-rich-editor[hidden] { display: none; }
.policy-editor textarea[hidden], .policy-preview-actions button[hidden] { display: none; }

.policy-editor-column { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.policy-workspace .policy-editor, .policy-preview-panel { padding: 24px; min-width: 0; }
.policy-workspace .policy-rich-editor { overflow-wrap: anywhere; }
.policy-publish-note { margin: 12px 0 0; color: var(--secondary-text); font-size: 11px; }
.policy-preview-panel .integration-editor-heading { align-items: center; }
.policy-preview-panel .hint { margin: 18px 0 0; color: var(--secondary-text); }
.policy-preview-panel .policy-preview-frame { margin-top: 18px; display: block; }
.policy-preview-panel .policy-preview-frame[hidden], .policy-preview-panel button[hidden] { display: none; }
.policy-navigation .provider-link strong { overflow-wrap: anywhere; }
@media(max-width:760px) {
  .policy-workspace .policy-navigation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .policy-workspace .policy-navigation small { display: block; }
  .policy-workspace .policy-editor, .policy-preview-panel { padding: 18px; }
  .policy-preview-panel .integration-editor-heading { align-items: start; flex-direction: column; }
}

/* Admin theme uses the mobile application's dark palette. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --background: var(--dark-background);
  --surface: var(--dark-surface);
  --primary-text: var(--dark-primary-text);
  --secondary-text: var(--dark-secondary-text);
  --border: var(--dark-border);
  --secondary: var(--dark-secondary);
  --tertiary: var(--dark-tertiary);
  --success: var(--dark-success);
  --warning: var(--dark-warning);
  --error: var(--dark-error);
  --primary-soft: #172338;
  --secondary-soft: #172338;
}
.header-actions { display: flex; align-items: center; gap: 18px; }
.theme-selector { display: inline-flex; align-items: center; flex-shrink: 0; gap: 3px; padding: 4px; border: 1px solid var(--border); border-radius: 24px; background: var(--background); }
.theme-selector[hidden] { display: none; }
.theme-option { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; padding: 6px 12px; border: 1px solid transparent; border-radius: 20px; background: transparent; color: var(--secondary-text); font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer; transition: background .18s ease, color .18s ease, box-shadow .18s ease; }
.theme-option svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.theme-option:hover { color: var(--primary-text); background: var(--primary-soft); }
.theme-option[aria-pressed="true"] { background: var(--surface); color: var(--primary-dark); border-color: var(--border); box-shadow: 0 1px 4px color-mix(in srgb, var(--primary-text) 10%, transparent); }
[data-theme="dark"] .theme-option[aria-pressed="true"] { color: var(--dark-secondary); }
.theme-option:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media(prefers-reduced-motion:reduce) { .theme-option { transition: none; } }
[data-theme="dark"] .primary { color: #FFFFFF; }
[data-theme="dark"] nav a[aria-current],
[data-theme="dark"] .provider-link[aria-current],
[data-theme="dark"] .profile-avatar,
[data-theme="dark"] .badge { color: var(--dark-secondary); }
[data-theme="dark"] .secondary { color: var(--primary-text); }
[data-theme="dark"] .ql-snow .ql-picker-options,
[data-theme="dark"] .ql-snow .ql-tooltip { background: var(--surface); color: var(--primary-text); border-color: var(--border); }
[data-theme="dark"] .ql-editor.ql-blank::before { color: var(--secondary-text); }
@media(max-width:600px) {
  .header-actions { gap: 8px; }
  .theme-option span { display: none; }
  .theme-option { min-width: 34px; padding: 7px; }
}

/* Locally bundled Lucide icons share the surrounding text color. */
.tabler-icon { width: 20px; height: 20px; stroke-width: 1.75; vertical-align: middle; flex-shrink: 0; }
.metric-icon, .next-icon { display: grid; place-items: center; }
.metric-icon .tabler-icon, .next-icon .tabler-icon { width: 22px; height: 22px; }
.footer-heart .tabler-icon { width: 13px; height: 13px; fill: currentColor; }
.profile-popover button { display: flex; align-items: center; gap: 8px; }
.text-link .tabler-icon { width: 16px; height: 16px; margin-left: 4px; }

.release-form { max-width: 1180px; }
.release-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); align-items: start; gap: 24px; }
.release-details, .release-options { padding: 24px; min-width: 0; }
.release-details .panel-heading { margin-bottom: 24px; align-items: start; }
.release-details h2, .release-options h2 { margin: 0 0 6px; font-size: 18px; }
.release-details .panel-heading p, .release-options > p { font-size: 12px; margin: 0; }
.release-group-title { font-size: 13px; margin: 0 0 14px; font-weight: 700; }
.release-details .management-grid { gap: 20px; }
.release-details .management-grid > div { padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--background); }
.release-details label { margin: 14px 0 6px; font-size: 12px; }
.release-details input { padding: 10px 12px; }
.release-distribution { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border); }
.release-switch-row { display: flex; align-items: center; gap: 16px; justify-content: space-between; padding: 20px 0; margin: 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.release-switch-row strong { display: block; font-size: 13px; }
.release-switch-row small { display: block; font-weight: 400; font-size: 12px; color: var(--secondary-text); margin-top: 5px; }
.release-switch { appearance: none; width: 38px; height: 22px; flex-shrink: 0; border-radius: 20px; border: 1px solid var(--border); background: var(--border); cursor: pointer; position: relative; margin: 0; }
.release-switch::after { content: ''; position: absolute; width: 16px; height: 16px; top: 2px; left: 2px; background: #FFFFFF; border-radius: 50%; }
.release-switch:checked { background: var(--primary); border-color: var(--primary); }
.release-switch:checked::after { transform: translateX(16px); }
.release-guidance { background: var(--background); border-radius: 10px; padding: 16px; margin-top: 20px; }
.release-guidance h3 { font-size: 12px; margin: 0 0 8px; }
.release-guidance p { font-size: 12px; margin: 8px 0 0; }
.release-save { margin-top: 24px; }
.release-save .button { width: 100%; }
.release-save p { text-align: center; font-size: 11px; margin: 10px 0 0; }
@media(max-width:1100px) { .release-layout { grid-template-columns: 1fr; } }
@media(max-width:600px) { .release-details .management-grid { grid-template-columns: 1fr; } .release-details, .release-options { padding: 18px; } }

.configuration-form { max-width: 1180px; }
.configuration-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(290px, 1fr); align-items: start; gap: 24px; }
.configuration-details, .configuration-availability { padding: 26px; min-width: 0; }
.configuration-section-heading, .configuration-message-heading { display: flex; align-items: start; gap: 12px; margin-bottom: 24px; }
.configuration-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); flex-shrink: 0; }
.configuration-form h2 { font-size: 17px; margin: 0 0 5px; }
.configuration-section-heading p, .configuration-message-heading p { font-size: 12px; margin: 0; }
.configuration-form label:not(.release-switch-row) { font-size: 12px; margin: 20px 0 7px; }
.configuration-details input { padding: 11px 13px; }
.configuration-help { margin: 7px 0 0; font-size: 11px; color: var(--secondary-text); }
.configuration-optional { font-size: 10px; font-weight: 400; color: var(--secondary-text); margin-left: 6px; }
.configuration-message-heading { margin: 28px 0 0; padding-top: 24px; border-top: 1px solid var(--border); }
.configuration-availability .release-switch-row { padding-top: 0; }
.configuration-status { margin-top: 16px; color: var(--success); font-size: 11px; font-weight: 600; }
.configuration-status:empty { display: none; }
.configuration-status[data-enabled="true"] { color: var(--warning); }
.configuration-status::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 7px; }
.configuration-form .button { gap: 8px; }
@media(max-width:1100px) { .configuration-layout { grid-template-columns: 1fr; } }
@media(max-width:600px) { .configuration-details, .configuration-availability { padding: 18px; } }

/* Keep active navigation distinct from hover in both sidebar widths. */
[data-theme="dark"] .admin-shell .menu-link:hover {
  background: color-mix(in srgb, var(--primary) 14%, var(--dark-surface));
  color: var(--dark-primary-text);
}
[data-theme="dark"] .admin-shell .menu-link[aria-current="page"] {
  position: relative;
  background: var(--primary-dark);
  color: #FFFFFF;
  box-shadow: inset 0 0 0 1px var(--primary);
}
[data-theme="dark"] .admin-shell .menu-link[aria-current="page"]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--dark-primary-text);
}
[data-theme="dark"] .admin-shell .menu-link[aria-current="page"] svg { stroke: currentColor; }

.business-configuration { margin-top: 28px; display: grid; gap: 20px; }
.business-configuration-heading p { margin: 6px 0 0; font-size: 12px; }
.business-settings-group { padding: 24px; }
.business-save-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; padding: 18px 0; border-top: 1px solid var(--border); }
.business-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
@media(max-width:600px) { .business-settings-grid { grid-template-columns: 1fr; } }
.language-add, .language-list { max-width: 1180px; }
.language-list { display: grid; gap: 16px; margin-top: 24px; }
.language-fields { display: flex; flex-wrap: wrap; align-items: end; gap: 16px; }
.language-fields > div { flex: 1 1 150px; min-width: 0; }
.language-fields label { font-size: 12px; margin: 8px 0; }
.language-fields .check-label { align-self: center; }
.language-card h2 { margin: 0; }
.language-card h2 small { color: var(--secondary-text); font-size: 11px; margin-left: 8px; }
@media(max-width:600px) { .language-fields > div { flex-basis: 100%; } }
.location-editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 24px 0; }
.language-fields select { display: block; width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--primary-text); }
.location-add-button { margin-top: 16px; }
.location-city-row { padding: 16px 0; border-top: 1px solid var(--border); }
@media(max-width:760px) { .location-editor-grid { grid-template-columns: 1fr; } }

.location-master-layout { display: grid; grid-template-columns: minmax(260px, .85fr) minmax(0, 1.7fr); align-items: start; gap: 24px; }
.location-states { padding: 0; overflow: hidden; }
.location-list-heading { padding: 22px; border-bottom: 1px solid var(--border); }
.location-list-heading h2 { margin: 0; }
.location-list-heading p { font-size: 12px; margin: 6px 0 0; }
.location-list-heading label, .location-city-list > label { font-size: 12px; margin-top: 16px; }
.location-state-list { display: grid; gap: 6px; max-height: 640px; overflow-y: auto; padding: 10px; scrollbar-gutter: stable; }
.location-state-list .location-state-link { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 12px; border-radius: 8px; border-bottom: 1px solid var(--border); }
.location-state-list .location-state-link > span { margin: 0; font-size: 12px; }
.location-state-link strong { display: block; font-size: 12px; }
.location-state-link small { display: block; margin-top: 4px; color: var(--secondary-text); }
.location-state-list .location-state-link[aria-current] { background: transparent; color: var(--primary-dark); }
[data-theme="dark"] .location-state-list .location-state-link[aria-current] { background: transparent; color: #FFFFFF; }
[data-theme="dark"] .location-state-link[aria-current] small { color: #FFFFFF; }
.location-state-list .location-status { font-size: 10px; color: var(--secondary-text); border: 1px solid var(--border); border-radius: 20px; padding: 3px 7px; white-space: nowrap; background: var(--surface); }
.location-state-list .location-status.is-active { color: var(--success); }
.location-city-column { min-width: 0; display: grid; gap: 20px; }
.location-state-controls { display: grid; gap: 20px; }
.location-state-controls h2 { margin-bottom: 8px; }
.location-city-list input[type="search"] { margin-bottom: 16px; }
.location-state-link[hidden], .location-city-row[hidden], .location-empty[hidden] { display: none; }
.location-empty { padding: 16px; font-size: 12px; }
@media(max-width:900px) { .location-master-layout { grid-template-columns: 1fr; } .location-state-list { max-height: 280px; } }
.location-modern { grid-template-columns: 290px minmax(0, 1fr); gap: 20px; }
.location-modern .location-state-list { max-height: 720px; }
.location-modern .location-state-link { padding: 11px 12px; }
.location-modern .location-state-link > span:first-child { flex: 1; }
.location-state-list .state-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--secondary-text); flex-shrink: 0; }
.location-state-list .state-status-dot.is-active { background: var(--success); }
.location-manager { padding: 0; overflow: hidden; }
.location-manager-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px; border-bottom: 1px solid var(--border); }
.location-manager-header h2 { font-size: 22px; margin: 0 0 4px; }
.location-manager-header p { font-size: 12px; margin: 0; }
.location-manager-header .eyebrow { margin-bottom: 7px; }
.location-state-action { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.location-state-action label { margin: 0; font-size: 12px; }
.location-tools { display: flex; gap: 18px; align-items: end; padding: 18px 24px; background: var(--background); }
.location-search-form { flex: 1; min-width: 0; }
.location-search-form > div { display: flex; align-items: center; gap: 8px; }
.location-search-form label { margin: 0 0 6px; font-size: 11px; }
.location-search-form input { min-width: 0; }
.location-add { flex-shrink: 0; }
.location-add summary { list-style: none; }
.location-add summary::-webkit-details-marker { display: none; }
.location-add[open] { flex: 1; }
.location-add form { margin-top: 12px; }
.location-add form label { margin: 0 0 6px; font-size: 12px; }
.location-add form button { margin-top: 10px; }
.city-table-heading, .city-table-row { display: grid; grid-template-columns: minmax(120px, 1fr) 115px 75px; align-items: center; gap: 16px; padding: 12px 24px; border-bottom: 1px solid var(--border); }
.city-table-heading { font-size: 11px; font-weight: 600; color: var(--secondary-text); }
.city-table-row input:not([type=hidden]):not([type=checkbox]) { padding: 9px 11px; font-size: 13px; }
.city-table-row label { margin: 0; font-size: 12px; }
.city-table-row .button { padding: 8px 12px; }
.city-pagination { padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--secondary-text); }
.city-pagination nav { display: flex; align-items: center; gap: 12px; }
.city-pagination button:disabled { opacity: .45; cursor: default; }
.location-attribution { margin: 0; padding: 0 24px 18px; font-size: 10px; }
@media(max-width:1200px) { .location-modern { grid-template-columns: 240px minmax(0, 1fr); } .location-manager-header, .city-pagination { flex-wrap: wrap; } }
@media(max-width:900px) { .location-modern { grid-template-columns: 1fr; } .location-modern .location-state-list { max-height: 240px; } }
@media(max-width:600px) { .location-tools { align-items: stretch; flex-direction: column; } .city-table-row, .city-table-heading { gap: 8px; grid-template-columns: minmax(80px, 1fr) 80px 60px; padding: 12px; } .city-pagination { padding: 16px 12px; } .city-pagination nav { gap: 6px; } }

.location-create-card { margin-bottom: 24px; }
.location-create-card h2 { margin-bottom: 6px; }
.location-create-card .language-fields { margin-top: 14px; }
.master-status { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--border); border-radius: 20px; padding: 7px 10px; background: var(--background); color: var(--secondary-text); font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.master-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.master-status.is-active { color: var(--success); background: color-mix(in srgb, var(--success) 10%, var(--surface)); border-color: color-mix(in srgb, var(--success) 35%, var(--border)); }
.master-status:hover { box-shadow: 0 0 0 2px var(--border); }
.state-master-row { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: 1px solid transparent; border-radius: 10px; }
.state-master-row:hover { background: var(--background); }
.state-master-row.is-selected { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); box-shadow: inset 3px 0 var(--primary); }
[data-theme="dark"] .state-master-row.is-selected { background: var(--primary-dark); border-color: var(--primary); }
.state-master-row > form { flex-shrink: 0; }
.location-state-list .state-master-row .location-state-link:hover { background: transparent; }
.location-state-link strong { overflow-wrap: anywhere; line-height: 1.5; }
.state-master-row > a { flex: 1; min-width: 0; }
.location-state-list .state-master-row .location-state-link { border-bottom: 0; }
.state-master-row .master-status { font-size: 9px; padding: 6px; }
.state-master-row[hidden] { display: none; }
.city-name-display strong { font-size: 13px; font-weight: 600; }
.city-name-display small { display: block; font-size: 11px; color: var(--secondary-text); margin-top: 3px; }
.city-edit summary { cursor: pointer; color: var(--primary); font-size: 12px; font-weight: 600; }
.city-edit[open] { grid-column: 1 / -1; }
.city-edit form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 12px; }
.city-edit form input:not([type=hidden]) { flex: 1; width: auto; min-width: 100px; }

.kyc-guidelines-card { margin-top: 24px; }
.kyc-guidelines-card [hidden] { display: none !important; }
.kyc-guidelines-card .panel-heading { align-items: start; }
.option-manager { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; max-width: 1240px; align-items: start; }
.option-count { padding: 6px 12px; border: 1px solid var(--border); border-radius: 20px; font-size: 12px; color: var(--secondary-text); background: var(--surface); }
.option-directory { padding: 0; overflow: hidden; }
.option-directory-header { padding: 24px 24px 18px; }
.option-directory-header h2, .option-create h2 { font-size: 18px; margin: 0 0 6px; }
.option-directory-header p, .option-create > p { font-size: 12px; margin: 0; }
.option-toolbar { padding: 0 24px 22px; display: grid; grid-template-columns: minmax(0, 1fr) 145px; gap: 14px; }
.option-toolbar label { font-size: 11px; margin: 0 0 6px; }
.option-toolbar select { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--primary-text); }
.option-column-labels { display: flex; justify-content: space-between; padding: 10px 24px; background: var(--background); border-block: 1px solid var(--border); color: var(--secondary-text); font-size: 11px; }
.option-row { border-bottom: 1px solid var(--border); }
.option-row > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 24px; cursor: pointer; list-style: none; }
.option-row > summary::-webkit-details-marker { display: none; }
.option-row > summary:hover, .option-row[open] > summary { background: var(--background); }
.option-row > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: -3px; }
.option-name { min-width: 0; flex: 1; text-align: left; }
.option-row > summary > img { flex-shrink: 0; object-fit: contain; }
.option-name strong { font-size: 13px; display: block; overflow-wrap: anywhere; }
.option-name small { display: block; color: var(--secondary-text); font-size: 11px; margin-top: 4px; overflow-wrap: anywhere; }
.option-row-meta { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.option-status { font-size: 10px; border-radius: 20px; padding: 4px 8px; color: var(--secondary-text); background: var(--background); border: 1px solid var(--border); }
.option-status.is-active { color: var(--success); border-color: color-mix(in srgb, var(--success) 30%, var(--border)); background: color-mix(in srgb, var(--success) 8%, var(--surface)); }
.option-order { font-size: 11px; color: var(--secondary-text); min-width: 20px; }
.option-edit-label { display: flex; align-items: center; gap: 4px; color: var(--primary); font-size: 11px; }
.option-edit-label svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.75; fill: none; }
.option-row[open] .option-edit-label svg { transform: rotate(90deg); }
.option-edit-form { padding: 4px 24px 20px; background: var(--background); }
.option-input-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
.option-input-grid label, .option-create label { margin: 16px 0 7px; font-size: 12px; }
.option-form-actions { margin-top: 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.option-form-actions label { margin: 0; font-size: 12px; }
.option-form-actions > div { display: flex; gap: 8px; }
.option-directory-footer { display: flex; justify-content: space-between; gap: 12px; padding: 16px 24px; font-size: 11px; color: var(--secondary-text); }
.option-create { padding: 24px; }
.option-create-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--primary); background: var(--primary-soft); font-size: 24px; margin-bottom: 16px; }
.option-create label small { color: var(--secondary-text); font-weight: 400; }
.option-create .option-create-active { margin-block: 20px; }
.option-create-submit { width: 100%; }
.option-tip { border-top: 1px solid var(--border); margin-top: 24px; padding-top: 18px; font-size: 11px; }
.option-tip p { margin: 6px 0 0; }
.option-empty { padding: 24px; margin: 0; font-size: 13px; }
.option-row[hidden], .option-empty[hidden], [data-option-cancel][hidden] { display: none; }
@media(max-width:1100px) { .option-manager { grid-template-columns: 1fr; } }
@media(max-width:600px) { .option-row > summary { padding: 16px; flex-wrap: wrap; } .option-row-meta { gap: 10px; } .option-toolbar { padding: 0 16px 16px; grid-template-columns: minmax(0, 1fr) 120px; } .option-edit-form { padding-inline: 16px; } .option-directory-footer { flex-wrap: wrap; } }

/* Shared action feedback, matching the admin palette in both themes. */
.admin-alert-stack { position: fixed; top: 68px; right: 4px; z-index: 10000; width: min(460px, 100vw); box-sizing: border-box; display: grid; gap: 12px; max-height: calc(100dvh - 68px); overflow-y: auto; padding: 24px; background: transparent; border: 0; box-shadow: none; pointer-events: none; }
.admin-alert { display: grid; grid-template-columns: 32px minmax(0, 1fr) 28px; align-items: start; gap: 12px; padding: 18px; border: 1px solid #CBD5E3; border-left: 4px solid var(--alert-color); border-radius: 14px; background: #FFFFFF; color: #172338; box-shadow: 0 4px 12px #0E162414; pointer-events: auto; }
.admin-alert.is-success { --alert-color: #237A4B; }
.admin-alert.is-error { --alert-color: #BA1A1A; }
.admin-alert-icon { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid currentColor; border-radius: 50%; color: var(--alert-color); font-weight: 700; }
.admin-alert strong { display: block; font-size: 14px; margin: 1px 0 5px; }
.admin-alert p { margin: 0; font-size: 13px; line-height: 1.6; color: #526176; overflow-wrap: anywhere; }
.admin-alert-close { display: grid; place-items: center; padding: 0; width: 28px; height: 28px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; font-size: 23px; cursor: pointer; }
.admin-alert-close:hover { background: #E8F1FE; color: #1D5FB8; }
[data-theme="dark"] .admin-alert { background: #172235; color: #EDF3FC; border-color: #46566D; border-left-color: var(--alert-color); }
[data-theme="dark"] .admin-alert p { color: #B2BFD2; }
[data-theme="dark"] .admin-alert.is-success { --alert-color: #7DD9A5; }
[data-theme="dark"] .admin-alert.is-error { --alert-color: #FFB4AB; }
@media (max-width: 600px) { .admin-alert-stack { top: 0; right: 0; padding: 16px; max-height: 100dvh; } }

.admin-alert { position: relative; overflow: hidden; padding-bottom: 22px; transition: opacity 180ms ease, transform 180ms ease; }
.admin-alert.is-leaving { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.admin-alert-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--alert-color); transform-origin: left; }
@media (prefers-reduced-motion: reduce) { .admin-alert { transition: none; } }

/* Promotion banner library and upload preview. */
.banner-heading, .banner-dialog-heading, .banner-card-title, .banner-card-actions, .banner-dialog-footer, .banner-pagination { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.banner-summary { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 24px 0; color: var(--muted, #526176); font-size: 13px; }
.banner-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.banner-card, .banner-empty { background: var(--surface, #fff); border: 1px solid var(--border, #CBD5E3); border-radius: 16px; overflow: hidden; }
.banner-image-button { display: block; width: 100%; padding: 0; border: 0; position: relative; cursor: zoom-in; background: var(--background, #F7F9FD); color: inherit; }
.banner-image-button img { display: block; width: 100%; height: auto; aspect-ratio: 1024 / 500; object-fit: contain; }
.banner-image-button span { position: absolute; bottom: 12px; right: 12px; background: #172338; color: #fff; border-radius: 8px; padding: 6px 10px; font-size: 12px; }
.banner-card-body { padding: 20px; }
.banner-card-title h2 { font-size: 17px; margin: 0; overflow-wrap: anywhere; }
.banner-card-actions { margin-top: 20px; flex-wrap: wrap; }
.banner-card-actions form { margin: 0; }
.banner-empty { grid-column: 1 / -1; padding: 64px 24px; text-align: center; }
.banner-pagination { justify-content: center; margin: 28px 0; }
.banner-preview-dialog { width: min(1080px, calc(100vw - 32px)); }
.banner-dialog-heading { margin-bottom: 24px; }
.banner-dialog-heading h2 { margin: 8px 0 0; }
.banner-form-preview { margin: 20px 0; border: 1px dashed #CBD5E3; border-radius: 12px; overflow: hidden; aspect-ratio: 1024 / 500; background: #F7F9FD; display: grid; place-items: center; }
.banner-form-preview img, .banner-preview-dialog img { width: 100%; height: auto; display: block; }
.banner-form-preview img[hidden], .banner-form-preview p[hidden], .banner-spinner[hidden], [data-banner-error][hidden] { display: none; }
.banner-form-preview p { padding: 20px; text-align: center; color: #526176; }
.banner-form-fields { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
.banner-enabled { display: flex; align-items: center; gap: 10px; margin: 24px 0; }
.banner-enabled input { width: 18px; height: 18px; margin: 0; }
.banner-dialog-footer { justify-content: flex-end; border-top: 1px solid #CBD5E3; padding-top: 20px; margin-top: 20px; }
.banner-spinner { width: 16px; height: 16px; display: inline-block; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: banner-spin .7s linear infinite; }
@keyframes banner-spin { to { transform: rotate(360deg); } }
[data-theme="dark"] .banner-card, [data-theme="dark"] .banner-empty, [data-theme="dark"] .banner-dialog, [data-theme="dark"] .banner-preview-dialog { background: #172235; color: #EDF3FC; border-color: #46566D; }
[data-theme="dark"] .banner-form-preview { background: #0E1624; border-color: #46566D; }
[data-theme="dark"] .banner-summary, [data-theme="dark"] .banner-form-preview p { color: #B2BFD2; }
@media(max-width:1200px) { .banner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media(max-width:650px) { .banner-grid, .banner-form-fields { grid-template-columns: 1fr; } .banner-heading { align-items: flex-start; flex-direction: column; } .banner-dialog, .banner-preview-dialog { padding: 20px; } }
@media(prefers-reduced-motion:reduce) { .banner-spinner { animation: none; } }

.banner-list-heading { margin-top: 32px; }
.banner-delete-dialog { width: min(480px, calc(100vw - 32px)); }
.banner-delete-dialog p { line-height: 1.7; overflow-wrap: anywhere; }
.button.banner-delete-button { color: var(--error, #BA1A1A); }
.button.banner-delete-confirm { background: #BA1A1A; color: #fff; }
[data-theme="dark"] .button.banner-delete-button { color: #FFB4AB; }
@media(max-width:800px) { .banner-editor form { display: block; } }

/* Compact compose form: field groups prevent grid rows stretching inputs. */
.banner-editor.panel { padding: 22px; margin: 24px 0 28px; scroll-margin-top: 96px; }
.banner-editor form { display: block; }
.banner-editor .banner-dialog-heading { margin: 0 0 18px; }
.banner-editor .banner-dialog-heading h2 { margin: 0; font-size: 18px; }
.banner-compose { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 360px); gap: 28px; align-items: start; }
.banner-compose-fields { display: grid; gap: 14px; min-width: 0; }
.banner-compose-fields label { margin: 0 0 7px; }
.banner-compose-fields input:not([type="checkbox"]) { box-sizing: border-box; width: 100%; min-width: 0; height: 42px; margin: 0; padding: 10px 12px; }
.banner-compose-fields input[type="file"] { height: auto; padding: 8px; font-size: 12px; }
.banner-compose-fields input::file-selector-button { border: 0; border-radius: 5px; padding: 6px 10px; margin-right: 10px; background: #E8F1FE; color: #1D5FB8; font: inherit; cursor: pointer; }
.banner-compose-fields small { display: block; margin-top: 7px; font-size: 11px; }
.banner-compose .banner-form-fields { gap: 14px; grid-template-columns: minmax(0, 1fr) 120px; }
.banner-compose-fields .banner-enabled { margin: 0; }
.banner-preview-caption { font-size: 12px; font-weight: 600; }
.banner-compose-preview { min-width: 0; }
.banner-editor .banner-form-preview { margin: 9px 0; width: 100%; aspect-ratio: 1024 / 500; }
.banner-editor .banner-form-preview p { font-size: 12px; }
.banner-compose-preview > small { font-size: 11px; }
.banner-editor .banner-dialog-footer { margin-top: 18px; padding-top: 16px; }
.banner-summary { margin: 12px 0 18px; }
.banner-pagination.city-pagination { justify-content: space-between; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 16px 20px; gap: 16px; flex-wrap: wrap; }
.option-directory-footer nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
@media(max-width:1000px) { .banner-compose { grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; } }
@media(max-width:760px) { .banner-compose { grid-template-columns: 1fr; } .banner-compose-preview { width: 100%; max-width: 360px; } .banner-editor.panel { padding: 18px; } .banner-pagination.city-pagination, .option-directory-footer { align-items: flex-start; flex-direction: column; } }
@media(max-width:420px) { .banner-compose .banner-form-fields { grid-template-columns: 1fr; } .banner-dialog-footer { flex-wrap: wrap; } .banner-pagination nav { flex-wrap: wrap; } }

/* Push notification composer and reports. */
.push-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin: 24px 0 12px; }
.push-stats > div { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.push-stats span { display: block; color: var(--muted); font-size: 11px; margin-bottom: 10px; }
.push-stats strong { font-size: 27px; }
.push-compose { scroll-margin-top: 96px; margin: 24px 0; }
.push-compose-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; }
.push-fields { display: grid; gap: 16px; min-width: 0; }
.push-fields label { margin: 0 0 7px; }
.push-fields input, .push-fields textarea, .push-fields select { margin: 0; min-width: 0; width: 100%; box-sizing: border-box; }
.push-fields textarea { min-height: 84px; resize: vertical; }
.push-fields small { display: inline-block; margin-top: 6px; font-size: 11px; }
.push-field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.push-preview { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 18px; align-self: start; }
.push-preview-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin: 18px 0; overflow-wrap: anywhere; }
.push-preview-brand { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.push-preview-brand small { margin-left: auto; color: var(--muted); }
.push-preview-card h3 { font-size: 14px; margin: 14px 0 8px; }
.push-preview-card p { font-size: 12px; line-height: 1.6; white-space: pre-wrap; }
.push-preview-card > img { display: block; width: 100%; height: auto; border-radius: 8px; margin-top: 12px; }
.push-preview-card > img[hidden], [data-push-error][hidden], [data-push-custom][hidden] { display: none; }
.push-preview > small { font-size: 11px; line-height: 1.6; }
.push-form-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-top: 1px solid var(--line); margin-top: 22px; padding-top: 18px; }
.push-form-footer > span { font-size: 12px; }
.push-form-footer > div { display: flex; gap: 10px; flex-wrap: wrap; }
.push-table-scroll { overflow-x: auto; }
.push-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.push-table th { text-align: left; color: var(--muted); font-size: 11px; }
.push-table th, .push-table td { padding: 16px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.push-table td p { margin: 6px 0 0; max-width: 270px; overflow-wrap: anywhere; line-height: 1.6; }
.push-table td:first-child { min-width: 200px; }
.push-table td form { margin: 8px 0 0; }
.push-table .button { padding: 8px 12px; white-space: nowrap; }
.push-empty { text-align: center; padding: 36px !important; }
@media(max-width:1200px) { .push-stats { grid-template-columns: repeat(3, 1fr); } .push-compose-grid { grid-template-columns: minmax(0, 1fr) 250px; } }
@media(max-width:900px) { .push-compose-grid { grid-template-columns: 1fr; } .push-preview { max-width: 360px; } .push-form-footer { align-items: flex-start; flex-direction: column; } }
@media(max-width:600px) { .push-stats { grid-template-columns: repeat(2, 1fr); } .push-field-pair { grid-template-columns: 1fr; } }

/* Shared summary-card treatment for overview and notification reports. */
.stat-card, .metrics .metric { position: relative; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 3px 12px #17233805; overflow: hidden; }
.stat-card { --stat-accent: #2F80EC; padding: 20px; min-width: 0; border-top: 3px solid var(--stat-accent); }
.stat-green { --stat-accent: #237A4B; } .stat-purple { --stat-accent: #5265A8; } .stat-teal { --stat-accent: #007D83; } .stat-red { --stat-accent: #BA1A1A; } .stat-amber { --stat-accent: #916000; }
.stat-heading { display: flex; align-items: center; gap: 10px; min-height: 38px; }
.stat-card .stat-icon { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 11px; background: color-mix(in srgb, var(--stat-accent) 10%, var(--surface)); color: var(--stat-accent); margin: 0; }
.stat-icon svg { width: 19px; height: 19px; }
.stat-card .stat-label { color: var(--muted); font-size: 11px; line-height: 1.5; font-weight: 600; margin: 0; }
.stat-card .stat-value { display: block; font-size: 32px; line-height: 1.2; letter-spacing: -1px; margin: 18px 0 8px; font-variant-numeric: tabular-nums; }
.stat-caption { color: var(--muted); font-size: 10px; line-height: 1.5; display: block; }
.metrics .metric { border-top: 3px solid var(--primary); }
.metrics .metric:has(.lavender) { border-top-color: #5265A8; }
.metrics .metric:has(.mint) { border-top-color: #237A4B; }
[data-theme="dark"] .stat-green { --stat-accent: #7DD9A5; } [data-theme="dark"] .stat-purple { --stat-accent: #BBC7FF; } [data-theme="dark"] .stat-teal { --stat-accent: #76D5DA; } [data-theme="dark"] .stat-red { --stat-accent: #FFB4AB; } [data-theme="dark"] .stat-amber { --stat-accent: #FFD180; }
.push-select-wrap { position: relative; }
.push-fields .push-select-wrap select { appearance: none; -webkit-appearance: none; display: block; min-height: 48px; padding: 12px 44px 12px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--primary-text); font: inherit; font-size: 14px; line-height: 22px; cursor: pointer; }
.push-select-wrap > svg { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.push-select-wrap select:hover { border-color: var(--primary); }
.push-select-wrap select:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 25%, transparent); outline-offset: 2px; border-color: var(--primary); }
.push-fields label > small { margin: 0 0 0 4px; font-weight: 400; color: var(--muted); }
.push-fields #push-audience-help { display: block; margin-top: 8px; line-height: 1.5; }
@media(min-width:1201px) and (max-width:1500px) { .push-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media(max-width:600px) { .stat-card { padding: 16px; } .stat-heading { align-items: flex-start; flex-direction: column; gap: 8px; } .stat-card .stat-value { font-size: 28px; margin-top: 12px; } }

.banner-compose-fields textarea { width: 100%; min-height: 72px; box-sizing: border-box; margin: 0; resize: vertical; }
.banner-compose .banner-schedule-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.banner-description { font-size: 12px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.banner-schedule-summary { display: grid; gap: 5px; font-size: 11px; color: var(--muted); padding: 12px 0; border-bottom: 1px solid var(--line); }
@media(max-width:500px) { .banner-compose .banner-schedule-fields { grid-template-columns: 1fr; } }

/* Administrator profile and account security. */
.profile-header-link { text-decoration: none; flex-shrink: 0; overflow: hidden; }
.profile-header-link img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.admin-profile-layout { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 24px; margin-top: 28px; align-items: start; }
.admin-profile-summary { text-align: center; }
.admin-profile-avatar { width: 112px; height: 112px; border-radius: 50%; margin: 0 auto 20px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-size: 40px; font-weight: 700; overflow: hidden; border: 4px solid var(--surface); box-shadow: 0 0 0 1px var(--line); }
.admin-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.admin-profile-summary h2 { margin-bottom: 8px; overflow-wrap: anywhere; }
.admin-profile-summary p { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.admin-profile-summary dl { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 20px; text-align: left; }
.admin-profile-summary dt { color: var(--muted); font-size: 11px; margin-top: 14px; }
.admin-profile-summary dd { margin: 6px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.admin-profile-content { display: grid; gap: 24px; min-width: 0; }
.profile-field-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.profile-field-grid label { margin: 0 0 8px; }
.profile-field-grid input { margin: 0; width: 100%; min-width: 0; box-sizing: border-box; }
.profile-field-grid small { color: var(--muted); font-size: 11px; font-weight: 400; }
.profile-photo-field { display: flex; align-items: center; gap: 18px; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.profile-photo-field label { margin-top: 0; }
.profile-photo-field small { display: block; font-size: 11px; }
.profile-photo-preview { flex: 0 0 72px; height: 72px; overflow: hidden; border-radius: 18px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-size: 26px; }
.profile-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.profile-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); margin-top: 24px; padding-top: 20px; }
.profile-form-footer > span { font-size: 11px; }
.profile-password { position: relative; }
.profile-password input { padding-right: 60px; }
.profile-password button { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--primary); padding: 8px; cursor: pointer; font: inherit; font-size: 11px; }
[data-profile-error][hidden], [data-email-confirm][hidden], .profile-photo-preview [hidden] { display: none; }
@media(max-width:1100px) { .admin-profile-layout { grid-template-columns: 1fr; } .admin-profile-summary { display: none; } }
@media(max-width:650px) { .profile-field-grid { grid-template-columns: 1fr; } .profile-field-grid > div:empty { display: none; } .profile-photo-field { align-items: flex-start; flex-direction: column; } .profile-photo-field input { max-width: 100%; box-sizing: border-box; } .profile-form-footer { flex-wrap: wrap; } }

/* Category selectors use the same field sizing in create and edit forms. */
.option-select-wrap { position: relative; width: 100%; }
.option-select-wrap select { appearance: none; -webkit-appearance: none; display: block; width: 100%; min-height: 48px; padding: 12px 42px 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--primary-text); font: inherit; font-size: 14px; line-height: 22px; cursor: pointer; }
.option-select-wrap > svg { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; fill: none; stroke: var(--secondary-text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.option-select-wrap select:hover { border-color: var(--primary); }
.option-select-wrap select:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 25%, transparent); outline-offset: 2px; border-color: var(--primary); }
.option-select-wrap select:required:invalid { color: var(--secondary-text); }
.option-select-wrap option { color: var(--primary-text); background: var(--surface); }
.option-edit-form > label[for^="parent-"] { margin: 16px 0 7px; font-size: 12px; }

.badge-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin:24px 0}.badge-card{padding:24px;align-self:start}.badge-card summary{cursor:pointer;list-style:none}.badge-card summary::-webkit-details-marker{display:none}.badge-card img{display:block;margin:0 auto 16px;object-fit:contain}.badge-card h2{margin:14px 0 8px}.badge-card p{font-size:13px;min-height:42px}.badge-card small{display:block;color:var(--primary);margin-top:16px}.badge-card form{margin-top:20px;border-top:1px solid var(--line);padding-top:12px}.badge-create{max-width:700px}.badge-card select,.badge-create select{width:100%;padding:12px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}.badge-card .check-label input,.badge-create .check-label input{width:auto}.badge-card summary:focus-visible{outline:2px solid var(--primary);outline-offset:6px}
.faq-row .faq-collapse{display:none}.faq-row[open] .faq-collapse{display:inline}.faq-row[open] .faq-expand{display:none}.faq-expand,.faq-collapse{font-size:12px;color:var(--primary);font-weight:600;white-space:nowrap}.faq-manager textarea{resize:vertical;min-height:140px}.faq-row .option-edit-form{padding-top:16px}.faq-manager .check-label input{width:auto}.faq-row .option-name strong{font-size:14px}

/* Shared navigation for admin detail pages. */
.detail-navigation { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; padding: 20px 30px; background: var(--surface); border-bottom: 1px solid var(--line); }
.detail-back { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); font-size: 14px; font-weight: 600; white-space: nowrap; }
.detail-back:hover { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-dark); }
.detail-back:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.detail-navigation-title { font-size: 16px; overflow-wrap: anywhere; }
.admin-shell .detail-navigation .breadcrumb { border-left: 1px solid var(--line); padding-left: 16px; min-width: 0; flex-wrap: wrap; overflow-wrap: anywhere; }
@media(max-width:720px) {
  .detail-navigation { padding: 16px; gap: 12px; }
  .detail-navigation-title { flex: 1; min-width: 0; }
  .admin-shell .detail-navigation .breadcrumb { flex-basis: 100%; border-left: 0; padding-left: 0; }
}

/* Shared page toolbar, matching the two-row admin header. */
.detail-navigation { min-height: 76px; gap: 14px; }
.detail-back { width: 44px; height: 44px; padding: 10px; border-radius: 4px; background: var(--bg); }
.detail-navigation-title { font-size: 18px; }
.detail-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-left: auto; }
.detail-actions .button { min-height: 46px; gap: 10px; padding: 12px 16px; border-radius: 4px; font-size: 11px; letter-spacing: .5px; text-transform: uppercase; }
.user-action-notify { background: #354dd5; color: #fff; }
.user-action-disable { background: #ffa012; color: #172b40; }
.user-action-delete { background: #d9323b; color: #fff; }
.detail-actions a:hover { filter: brightness(.92); }
.detail-actions button:disabled { cursor: not-allowed; color: var(--muted); background: var(--bg); }
.action-accessible-note { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 1200px) { .detail-actions { flex-basis: 100%; margin-left: 0; } }
@media (max-width: 560px) { .detail-actions { display: grid; grid-template-columns: 1fr; width: 100%; } .detail-actions .button { white-space: normal; } }