:root {
  --navy: #173955;
  --navy-deep: #102e49;
  --blue: #287aa8;
  --ink: #303846;
  --muted: #7b8694;
  --line: #dfe4ea;
  --bg: #f2f4f7;
  --green: #34b982;
  --amber: #f0a43d;
  --red: #e05a60;
  --purple: #8b69c7;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); font-family: "Segoe UI Variable", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
.shell { min-height: 100vh; display: flex; }

.sidebar { width: 250px; position: fixed; inset: 0 auto 0 0; z-index: 20; display: flex; flex-direction: column; padding: 0 13px 20px; background: #fff; border-right: 1px solid #d9dee5; }
.sidebar-logo { height: 84px; display: flex; align-items: center; padding: 0 9px; margin-bottom: 20px; border-bottom: 1px solid #edf0f3; }
.sidebar-logo img { width: 172px; height: auto; }
.sidebar-label { margin: 0; padding: 0 12px 9px; color: #a0a8b3; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.side-nav { display: flex; flex-direction: column; gap: 5px; }
.side-nav a { min-height: 48px; display: flex; align-items: center; gap: 12px; padding: 0 13px; border-radius: 9px; color: #4a5361; font-size: 15px; font-weight: 600; }
.side-nav a > span { width: 20px; color: #778596; font-size: 17px; text-align: center; }
.side-nav a > b { min-width: 23px; height: 23px; margin-left: auto; display: grid; place-items: center; border-radius: 7px; background: #eef1f4; color: #7a8492; font-size: 10px; }
.side-nav a:hover { background: #f1f3f6; }
.side-nav a.active { background: var(--blue); color: #fff; }
.side-nav a.active > span { color: #fff; }
.side-nav a.active > b { background: rgba(255,255,255,.2); color: #fff; }
.sidebar-spacer { flex: 1; }

.workspace { width: 100%; min-width: 0; padding-left: 250px; }
.topbar { height: 84px; position: sticky; top: 0; z-index: 10; display: flex; align-items: center; padding: 0 32px; background: #fff; border-bottom: 1px solid #d9dee5; }
.top-title small { display: block; margin: 0; color: #a0a8b3; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.top-title h1 { margin: 0; color: #303846; font-size: 23px; font-weight: 600; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.readonly { padding: 7px 10px; border-radius: 6px; background: #eff2f5; color: #7a8593; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.refresh { height: 39px; display: inline-flex; align-items: center; gap: 5px; padding: 0 13px; border: 1px solid #d6dce3; border-radius: 8px; background: #fff; color: #566270; font-size: 14px; font-weight: 600; }
.profile { display: flex; align-items: center; gap: 8px; }
.profile-dot { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #e8f3f8; color: #3189b1; font-size: 12px; font-weight: 700; }
.profile button { border: 0; background: transparent; color: #667383; font-size: 12px; font-weight: 600; cursor: pointer; }
.mobile-logo { display: none; }

.page-body { width: 100%; padding: 30px 32px 46px; }
.overview-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 20px; }
.overview-head h2 { margin: 0; font-size: 28px; font-weight: 600; }
.overview-head p { margin: 0; color: var(--muted); font-size: 15px; }
.live-state { display: grid; grid-template-columns: 12px auto; align-items: center; gap: 2px 8px; }
.live-state .health-dot { grid-row: 1 / 3; }
.live-state strong { font-size: 14px; }
.live-state small { color: #9aa3ae; font-size: 12px; }
.health-dot { width: 8px; height: 8px; display: inline-block; flex: 0 0 auto; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(52,185,130,.12); }
.health-dot.review { background: var(--amber); box-shadow: 0 0 0 4px rgba(240,164,61,.13); }

.metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 20px; }
.metric-card { min-height: 136px; display: flex; align-items: center; gap: 17px; padding: 22px; border: 1px solid var(--line); border-radius: 11px; background: #fff; box-shadow: 0 4px 14px rgba(30,51,70,.035); }
.metric-icon { width: 51px; height: 51px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; font-size: 22px; font-weight: 700; }
.metric-icon.blue { background: #e7f3f8; color: #3996bf; }
.metric-icon.green { background: #e7f7f0; color: #2b9f70; }
.metric-icon.purple { background: #f0ebf8; color: #8260ba; }
.metric-icon.amber { background: #fff3e3; color: #d88d28; }
.metric-card small { display: block; margin-bottom: 4px; color: #7e8997; font-size: 13px; }
.metric-card strong { display: block; color: #29323e; font-size: 32px; font-weight: 600; line-height: 1.05; }
.metric-card:last-child strong { font-size: 23px; }
.metric-card p { margin: 5px 0 0; color: #9aa3ae; font-size: 12px; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.68fr) minmax(390px, .72fr); gap: 20px; align-items: stretch; }
.main-column, .side-column { min-width: 0; }
.main-column { display: grid; grid-template-rows: minmax(450px,1fr) 210px; gap: 20px; height: 100%; }
.side-column { display: grid; grid-template-rows: 176px minmax(0,1fr) 210px; gap: 20px; height: 100%; }
.surface, .job-card { background: #fff; border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 5px 18px rgba(26,48,67,.035); }
.surface { overflow: hidden; }
.surface-head { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 21px; border-bottom: 1px solid #e8ecf0; }
.surface-head h2 { margin: 0 0 4px; font-size: 19px; font-weight: 600; }
.surface-head p { margin: 0; color: #9099a5; font-size: 13px; }
.soft-count { padding: 7px 10px; border-radius: 7px; background: #f1f3f5; color: #808a97; font-size: 12px; font-weight: 600; }
.status-chip { display: inline-flex; align-items: center; gap: 6px; color: #4d7a66; font-size: 12px; }
.status-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.queue-panel { min-height: 450px; }
.queue-body { min-height: 374px; padding: 18px; }
.queue-body > .empty-panel:only-child { margin: -18px; }
.empty-panel { min-height: 374px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 34px; text-align: center; }
.empty-panel > span, .empty-small > span { width: 52px; height: 52px; display: grid; place-items: center; margin: 0 auto 13px; border: 1px solid #daf1e7; border-radius: 50%; background: #e3f7ed; color: #2da371; font-size: 18px; font-weight: 700; }
.empty-panel h2 { margin: 0 0 7px; font-size: 23px; font-weight: 600; }
.empty-panel > p { margin: 0; color: #8994a2; font-size: 14px; }
.empty-stats { display: flex; margin-top: 22px; overflow: hidden; border: 1px solid #e7eaee; border-radius: 9px; }
.empty-stats div { min-width: 125px; padding: 10px 14px; border-left: 1px solid #e7eaee; }
.empty-stats div:first-child { border-left: 0; }
.empty-stats strong { display: block; color: #47515e; font-size: 17px; }
.empty-stats small { color: #8c96a2; font-size: 11px; }

.workflow-panel { min-height: 210px; height: 210px; flex: 0 0 210px; }
.workflow-steps { display: grid; grid-template-columns: repeat(4, 1fr); padding: 25px 21px; }
.workflow-steps > div { position: relative; display: grid; grid-template-columns: 31px minmax(0,1fr); align-content: center; column-gap: 10px; min-height: 66px; padding-right: 16px; }
.workflow-steps > div:after { content: ""; position: absolute; top: 15px; right: 10px; width: 18%; height: 1px; background: #dfe5ea; }
.workflow-steps > div:last-child:after { display: none; }
.workflow-steps span { width: 29px; height: 29px; grid-row: 1 / 3; display: grid; place-items: center; border-radius: 50%; background: #e6f5ee; color: #2d9e72; font-size: 10px; font-weight: 700; }
.workflow-steps strong { align-self: end; font-size: 14px; }
.workflow-steps small { margin-top: 3px; color: #929ba7; font-size: 11px; line-height: 1.35; }

.side-panel { min-height: 0; }
.activity-side { min-height: 0; overflow: auto; }
.text-button { color: var(--blue); font-size: 13px; font-weight: 600; }
.empty-small { padding: 25px 16px 28px; color: #8190a1; text-align: center; }
.empty-small > span { width: 38px; height: 38px; margin-bottom: 9px; font-size: 13px; }
.empty-small strong { display: block; color: #334256; font-size: 13px; }
.empty-small p { margin: 5px 0 0; font-size: 11px; }
.activity-list { padding: 6px 21px; }
.activity-item { display: grid; grid-template-columns: 9px minmax(0,1fr) auto; gap: 11px; align-items: start; padding: 15px 0; border-top: 1px solid #edf0f2; }
.activity-item:first-child { border-top: 0; }
.activity-dot { width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: #9ba7b5; }
.activity-dot.success { background: var(--green); }
.activity-dot.waiting { background: var(--amber); }
.activity-dot.review { background: var(--red); }
.activity-item strong { display: block; font-size: 14px; }
.activity-item p { margin: 4px 0 0; color: #8c96a2; font-size: 12px; line-height: 1.4; }
.activity-item time { color: #a0a8b2; font-size: 11px; white-space: nowrap; }
.activity-page .activity-item { padding: 18px 0; }
.activity-page .activity-item strong { font-size: 12px; }
.activity-page .activity-item p { font-size: 10px; }
.health-list { padding: 8px 21px 12px; }
.health-row { min-height: 43px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #edf0f2; font-size: 13px; }
.health-row:first-child { border-top: 0; }
.health-row > div { display: flex; align-items: center; gap: 8px; }
.health-row > span { color: #708093; font-size: 11px; }
.health-row .health-dot { width: 7px; height: 7px; box-shadow: none; }

.overview-layout { display: grid; gap: 20px; }
.overview-top { display: grid; grid-template-columns: minmax(0,1.68fr) minmax(390px,.72fr); gap: 20px; }
.overview-top > .queue-panel, .overview-top > .activity-side { min-height: 450px; }
.health-panel-wide { min-height: 150px; }
.health-panel-wide .health-list { display: grid; grid-template-columns: repeat(4,1fr); gap: 0 20px; padding: 9px 21px 12px; }
.health-panel-wide .health-row { min-height: 58px; padding-left: 20px; border-top: 0; border-left: 1px solid #edf0f2; }
.health-panel-wide .health-row:first-child { padding-left: 0; border-left: 0; }
.single-layout { width: 100%; min-height: 0; display: flex; flex: 1; }

.job-card { overflow: visible; margin-bottom: 14px; }
.job-card:last-child { margin-bottom: 0; }
.job-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px; border-bottom: 1px solid #edf1f4; }
.job-title { display: flex; align-items: center; gap: 12px; }
.waiting-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 9px; background: #fff3df; color: #d77a18; font-size: 18px; }
.status-pill { display: inline-flex; padding: 3px 7px; border-radius: 99px; background: #fff1dd; color: #b46512; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.status-pill.review { background: #fde8e8; color: #b23f3f; }
.job-title h2 { display: inline; margin: 0 0 0 7px; font-size: 20px; }
.job-title p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.detail-toggle { position: relative; }
.detail-toggle summary { list-style: none; padding: 8px 10px; border-radius: 8px; background: #e7f4fa; color: #247aa1; font-size: 10px; font-weight: 700; cursor: pointer; }
.detail-toggle summary::-webkit-details-marker { display: none; }
.detail-toggle > div { width: min(420px,80vw); position: absolute; top: 42px; right: 0; z-index: 5; padding: 13px 15px; border: 1px solid #d8e2e9; border-radius: 10px; background: #f7fafc; box-shadow: 0 10px 30px rgba(20,40,60,.14); }
.detail-toggle strong { font-size: 11px; }
.detail-toggle p { margin: 5px 0 0; color: #687687; font-size: 10px; line-height: 1.5; }
.job-details { display: grid; grid-template-columns: 1.45fr 1.35fr .8fr .55fr; gap: 18px; padding: 17px 18px; }
.job-details small, .setting small { display: block; margin-bottom: 5px; color: #8b96a5; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.job-details strong { display: block; overflow-wrap: anywhere; font-size: 12px; }
.progress { display: grid; grid-template-columns: repeat(4,1fr); padding: 17px 18px 20px; border-top: 1px solid #edf1f4; }
.progress-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; color: #a1aab5; text-align: center; }
.progress-step:before { content: ""; height: 2px; position: absolute; top: 12px; right: 0; left: 0; background: #dce4ea; }
.progress-step:first-child:before { left: 50%; }
.progress-step:last-child:before { right: 50%; }
.progress-step span { width: 25px; height: 25px; position: relative; z-index: 1; display: grid; place-items: center; border-radius: 50%; background: #e9eef2; font-size: 9px; font-weight: 800; }
.progress-step small { font-size: 11px; font-weight: 600; }
.progress-step.complete { color: #28956a; }
.progress-step.complete:before { background: #65c49c; }
.progress-step.complete span { background: #34b77d; color: #fff; }
.progress-step.current { color: #247aa1; }
.progress-step.current span { background: #4aa7d2; color: #fff; box-shadow: 0 0 0 4px #e5f3f9; }

.settings-panel { min-height: 410px; }
.settings-panel > .muted { margin: 22px 22px 0; }
.muted { color: #718093; font-size: 11px; line-height: 1.6; }
.settings-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; padding: 20px 22px; }
.setting { padding: 16px; border: 1px solid var(--line); border-radius: 9px; }
.setting strong { font-size: 12px; }
.mobile-accordions, .bottom-nav { display: none; }

.login-page { min-height: 100vh; display: grid; place-items: center; padding: 38px; background: radial-gradient(circle at 85% 12%,rgba(40,122,168,.08),transparent 30%),#f2f4f7; }
.login-shell { width: min(620px,100%); overflow: hidden; border: 1px solid #dce2e8; border-radius: 18px; background: #fff; box-shadow: 0 24px 70px rgba(27,49,69,.13); }
.login-brand { min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 22px; padding-bottom: 28px; margin-bottom: 30px; border-bottom: 1px solid #e5e9ed; }
.login-brand img { width: 182px; height: auto; }
.login-brand span { min-height: 40px; display: flex; align-items: center; padding-left: 22px; border-left: 1px solid #d7dde3; color: #657282; font-size: 19px; line-height: 1.15; font-weight: 600; }
.login-card { padding: 48px 54px 52px; background: #fff; }
.login-card-inner { width: 100%; }
.login-card label { display: block; margin: 16px 0; color: #3f4d60; font-size: 13px; font-weight: 700; }
.login-card input { width: 100%; height: 50px; display: block; margin-top: 8px; padding: 0 14px; border: 1px solid #ccd7df; border-radius: 9px; outline: 0; }
.login-card input:focus { border-color: #4aa7d2; box-shadow: 0 0 0 4px #e3f2f8; }
.login-card button { width: 100%; height: 50px; margin-top: 13px; border: 0; border-radius: 9px; background: var(--blue); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 7px 18px rgba(40,122,168,.2); }
.login-card button:disabled { background: #a8b5c0; cursor: not-allowed; }
.login-error { padding: 10px 12px; border-radius: 8px; background: #feeeee; color: #a83d3d; font-size: 11px; line-height: 1.5; }

@media (max-width: 1100px) {
  .metrics-grid { grid-template-columns: repeat(2,1fr); }
  .overview-top { grid-template-columns: 1fr; }
  .health-panel-wide .health-list { grid-template-columns: repeat(2,1fr); }
  .health-panel-wide .health-row:nth-child(3) { padding-left: 0; border-left: 0; }
}

@media (max-width: 720px) {
  body { background: #eef3f7; }
  .sidebar { display: none; }
  .workspace { padding: 0; }
  .topbar { height: 64px; position: static; padding: 0 14px; border: 0; }
  .mobile-logo { width: 135px; height: auto; display: block; }
  .top-title { display: none; }
  .top-actions { gap: 7px; }
  .readonly, .refresh span, .profile button { display: none; }
  .refresh { width: 34px; justify-content: center; padding: 0; }
  .profile-dot { width: 33px; height: 33px; }
  .page-body { padding: 18px 14px 88px; }
  .overview-head { align-items: flex-start; }
  .overview-head h2 { font-size: 22px; }
  .overview-head p { max-width: 260px; line-height: 1.5; }
  .live-state strong, .live-state small { display: none; }
  .metrics-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .metric-card { min-height: 103px; padding: 13px; gap: 10px; }
  .metric-icon { width: 36px; height: 36px; font-size: 16px; }
  .metric-card strong, .metric-card:last-child strong { font-size: 24px; }
  .overview-top { display: block; }
  .overview-top > .activity-side { margin-top: 12px; }
  .health-panel-wide .health-list { grid-template-columns: 1fr; }
  .health-panel-wide .health-row, .health-panel-wide .health-row:nth-child(3) { padding-left: 0; border-left: 0; }
  .queue-panel { min-height: 370px; }
  .queue-body, .empty-panel { min-height: 300px; }
  .empty-stats { width: 100%; }
  .empty-stats div { min-width: 0; flex: 1; padding: 9px 5px; }
  .surface-head { min-height: 63px; padding: 12px 14px; }
  .job-head { align-items: flex-start; padding: 15px; }
  .job-title { align-items: flex-start; gap: 9px; }
  .job-title h2 { display: block; margin: 6px 0 0; font-size: 16px; }
  .detail-toggle summary { padding: 8px; font-size: 0; }
  .detail-toggle summary:after { content: "Details"; font-size: 9px; }
  .detail-toggle > div { width: auto; position: fixed; top: 85px; right: 14px; left: 14px; }
  .job-details { grid-template-columns: 1fr 1fr; gap: 15px 10px; padding: 15px; }
  .progress { display: flex; flex-direction: column; padding: 15px; }
  .progress-step { min-height: 44px; flex-direction: row; gap: 11px; text-align: left; }
  .progress-step:before { width: 2px; height: auto; top: 0; bottom: 0; right: auto !important; left: 12px !important; }
  .progress-step:first-child:before { top: 50%; }
  .progress-step:last-child:before { bottom: 50%; }
  .bottom-nav { min-height: 68px; position: fixed; right: 0; bottom: 0; left: 0; z-index: 30; display: grid; grid-template-columns: repeat(4,1fr); padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid #dce4ea; background: #fff; box-shadow: 0 -4px 18px rgba(28,47,68,.08); }
  .bottom-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #8390a0; font-size: 11px; font-weight: 700; }
  .bottom-nav a span { font-size: 17px; }
  .bottom-nav a.active { color: var(--blue); }
  .settings-grid { grid-template-columns: 1fr; }
  .login-page { padding: 14px; background: #f2f4f7; }
  .login-shell { border-radius: 14px; }
  .login-card { padding: 36px 25px 40px; }
  .login-brand { gap: 15px; }
  .login-brand img { width: 156px; }
  .login-brand span { min-height: 34px; padding-left: 15px; font-size: 15px; }
}

/* v0.6.1 social-content workspace and passkey access */
.content-page { width: 100%; display: grid; align-content: start; align-self: flex-start; gap: 16px; }
.content-page h2, .content-page h3, .content-page strong, .content-page b { font-weight: 500; }
.content-notice { width: 100%; min-height: 44px; display: flex; align-items: center; padding: 10px 14px; border: 1px solid transparent; border-radius: 10px; font-size: 12px; font-weight: 400; line-height: 1.45; }
.content-notice.success { border-color: #ccebdd; background: #edf9f4; color: #36785e; }
.content-notice.error { border-color: #f2d6d6; background: #fff3f3; color: #9a4c4c; }
.content-notice:before { width: 22px; height: 22px; display: grid; place-items: center; flex: 0 0 auto; margin-right: 9px; border-radius: 50%; font-size: 11px; font-weight: 500; }
.content-notice.success:before { content: "✓"; background: #d7f0e5; color: #37795f; }
.content-notice.error:before { content: "!"; background: #f5dddd; color: #9a4c4c; }
.content-create { overflow: hidden; }
.content-create > summary { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; list-style: none; cursor: pointer; }
.content-create > summary::-webkit-details-marker { display: none; }
.content-create > summary span strong, .content-create > summary span small { display: block; }
.content-create > summary span strong { margin-bottom: 4px; font-size: 17px; font-weight: 500; }
.content-create > summary span small { color: var(--muted); font-size: 12px; font-weight: 400; }
.content-create > summary > b { min-height: 38px; display: inline-flex; align-items: center; padding: 0 13px; border-radius: 8px; background: var(--blue); color: #fff; font-size: 12px; font-weight: 500; }
.content-create[open] > summary { border-bottom: 1px solid var(--line); }
.content-create form { padding: 20px; }
.content-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.content-form-grid label { display: block; }
.content-form-grid label > small { display: block; margin-bottom: 7px; color: #667687; font-size: 12px; font-weight: 500; }
.content-form-grid input, .content-form-grid select, .content-form-grid textarea { width: 100%; min-height: 43px; padding: 10px 12px; border: 1px solid #ccd7df; border-radius: 8px; background: #fff; color: #26323f; font: inherit; outline: 0; }
.content-form-grid textarea { min-height: 92px; resize: vertical; line-height: 1.45; }
.content-form-grid input:focus, .content-form-grid select:focus, .content-form-grid textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 4px #e3f2f8; }
.content-form-grid .content-wide { grid-column: 1 / -1; }
.content-form-grid em { color: #8995a1; font-size: 10px; font-style: normal; font-weight: 400; }
.content-defaults { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; padding: 13px 14px; border: 1px solid #dfe7ec; border-radius: 8px; background: #f8fafb; }
.content-defaults span small, .content-defaults span strong { display: block; }
.content-defaults span small { margin-bottom: 4px; color: #82909d; font-size: 10px; }
.content-defaults span strong { color: #526170; font-size: 12px; font-weight: 400; }
.content-defaults p { grid-column: 1 / -1; margin: 1px 0 0; color: #7e8b98; font-size: 11px; }
.content-submit { min-width: 190px; min-height: 44px; margin-top: 16px; padding: 0 16px; border: 0; border-radius: 8px; background: var(--blue); color: #fff; font-weight: 500; cursor: pointer; }
.content-submit:disabled { opacity: .48; cursor: not-allowed; }
.product-library { overflow: hidden; }
.product-library > summary { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 20px; list-style: none; cursor: pointer; }
.product-library > summary::-webkit-details-marker, .product-profile > summary::-webkit-details-marker { display: none; }
.product-library > summary span strong, .product-library > summary span small, .product-profile > summary span strong, .product-profile > summary span small { display: block; }
.product-library > summary span small, .product-profile > summary span small { margin-top: 3px; color: #84919e; font-size: 11px; font-weight: 400; }
.product-library > summary > b, .product-profile > summary > b { color: var(--blue); font-size: 11px; font-weight: 400; }
.product-library-body { padding: 0 20px 18px; border-top: 1px solid var(--line); }
.product-profile { border-bottom: 1px solid #e8edf0; }
.product-profile > summary { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 14px; list-style: none; cursor: pointer; }
.product-profile form { padding: 3px 0 18px; }
.product-new { border-bottom: 0; }
.content-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.content-summary span { min-height: 68px; display: flex; align-items: center; gap: 8px; padding: 0 18px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: #718093; font-size: 12px; }
.content-summary strong { color: #344352; font-size: 24px; font-weight: 500; }
.content-page .soft-count { font-weight: 400; }
.content-results { overflow: hidden; }
.content-list { padding: 0 20px 20px; }
.content-card { display: grid; grid-template-columns: 250px minmax(0,1fr); gap: 20px; padding: 20px 0; border-top: 1px solid #e8ecf0; }
.content-card:first-child { border-top: 0; }
.content-preview { min-height: 250px; overflow: hidden; border: 1px solid #e2e7eb; border-radius: 10px; background: #f7f9fa; }
.content-preview img { width: 100%; height: 100%; display: block; object-fit: cover; }
.content-placeholder { height: 100%; min-height: 250px; display: grid; place-content: center; gap: 8px; color: #82909f; text-align: center; }
.content-placeholder span { font-size: 26px; font-weight: 400; }
.content-placeholder strong { font-weight: 400; }
.content-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.content-card-head > small { color: #98a2ad; font-size: 11px; }
.content-status { display: inline-flex; align-items: center; min-height: 25px; padding: 0 9px; border-radius: 99px; background: #eef2f5; color: #687687; font-size: 10px; font-weight: 500; }
.content-status.waiting { background: #fff1dd; color: #a96717; }
.content-status.success { background: #e7f7f0; color: #237b59; }
.content-status.approved { background: #e8f2fb; color: #2a6f99; }
.content-status.review { background: #feeeee; color: #a83d3d; }
.content-copy h3 { margin: 12px 0 4px; font-size: 20px; font-weight: 500; }
.content-meta { margin: 0 0 12px; color: #7b8997; font-size: 12px; }
.caption-preview { width: 100%; min-height: 168px; padding: 13px; border: 1px solid #e0e6eb; border-radius: 8px; background: #f8fafb; color: #435264; font: 12px/1.55 inherit; resize: vertical; }
.content-waiting { min-height: 86px; margin: 16px 0; display: flex; align-items: center; padding: 13px; border-radius: 8px; background: #f7f9fa; color: #788696; font-size: 12px; line-height: 1.5; }
.content-error { margin: 12px 0; padding: 10px 12px; border-radius: 8px; background: #feeeee; color: #a83d3d; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.content-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.content-actions a, .content-actions button { min-height: 36px; display: inline-flex; align-items: center; padding: 0 11px; border: 1px solid #d3dbe2; border-radius: 7px; background: #fff; color: #526171; font: inherit; font-size: 11px; font-weight: 500; cursor: pointer; }
.content-actions .content-primary { border-color: var(--blue); background: var(--blue); color: #fff; }
.content-actions .content-danger { border-color: #ead7d7; color: #a45151; }
.content-actions form { margin: 0; }
.content-empty p { max-width: 430px; margin: 7px auto 0; color: #8593a2; font-size: 12px; }
.preview-open { overflow: hidden; }
.image-preview-modal[hidden] { display: none; }
.image-preview-modal { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 28px; }
.image-preview-backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(17,31,43,.78); cursor: zoom-out; }
.image-preview-modal > section { position: relative; width: min(92vw, 1080px); max-height: 94vh; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 22px 70px rgba(0,0,0,.32); }
.image-preview-modal header { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; border-bottom: 1px solid #e5eaee; }
.image-preview-modal header strong { color: #344352; font-size: 13px; font-weight: 400; }
.image-preview-modal header button { width: 34px; height: 34px; border: 0; border-radius: 7px; background: #f2f5f7; color: #596878; font: 23px/1 inherit; cursor: pointer; }
.image-preview-modal > section > div { max-height: calc(94vh - 54px); overflow: auto; background: #eef2f4; }
.image-preview-modal img { width: 100%; height: auto; display: block; }
.passkey-setting { grid-column: 1 / -1; margin: 0 22px 22px; }
.passkey-setting > p { margin: 8px 0 14px; color: #718093; font-size: 12px; line-height: 1.5; }
.passkey-list { margin-bottom: 12px; }
.passkey-row { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid #e8ecf0; }
.passkey-row strong, .passkey-row small { display: block; }
.passkey-row strong { margin-bottom: 3px; font-size: 13px; }
.passkey-row small { color: #84919e; font-size: 11px; }
.passkey-row button { min-height: 32px; padding: 0 10px; border: 1px solid #d4dbe2; border-radius: 7px; background: #fff; color: #6c7885; font-size: 11px; font-weight: 700; cursor: pointer; }
.passkey-add, .passkey-login { min-height: 44px; padding: 0 14px; border: 0; border-radius: 8px; background: var(--blue); color: #fff; font-weight: 800; cursor: pointer; }
.passkey-login { width: 100%; height: 50px; margin: 0; font-size: 14px; box-shadow: 0 7px 18px rgba(40,122,168,.2); }
.login-divider { display: flex; align-items: center; gap: 10px; margin: 22px 0 6px; color: #929da8; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.login-divider:before, .login-divider:after { content: ""; height: 1px; flex: 1; background: #e0e5e9; }

@media (max-width: 720px) {
  .bottom-nav { grid-template-columns: repeat(5,1fr); }
  .content-page { gap: 12px; }
  .content-create > summary { padding: 13px 14px; }
  .content-create > summary span small { display: none; }
  .content-create form { padding: 14px; }
  .content-form-grid { grid-template-columns: 1fr; }
  .content-form-grid .content-wide { grid-column: 1; }
  .content-defaults { grid-template-columns: 1fr; }
  .content-defaults p { grid-column: 1; }
  .product-library > summary { padding: 12px 14px; }
  .product-library-body { padding: 0 14px 14px; }
  .content-submit { width: 100%; }
  .content-summary { gap: 7px; }
  .content-summary span { min-height: 58px; display: block; padding: 10px 11px; }
  .content-summary strong { display: block; font-size: 20px; }
  .content-list { padding: 0 14px 14px; }
  .content-card { grid-template-columns: 1fr; gap: 14px; padding: 14px 0 18px; }
  .content-preview { min-height: 0; aspect-ratio: 1; }
  .content-actions a, .content-actions button, .content-actions form { flex: 1 1 auto; justify-content: center; }
  .content-actions form button { width: 100%; }
  .passkey-setting { margin: 0 14px 14px; }
  .image-preview-modal { padding: 10px; }
  .image-preview-modal > section { width: 100%; max-height: 96vh; }
}

/* v0.5.9 viewport-fitted health and activity rows */
.health-inline { min-height: 72px; display: flex; align-items: center; gap: 16px; padding: 0 20px; }
.health-inline h2 { flex: 0 0 auto; margin: 0; font-size: 17px; font-weight: 600; }
.health-divider { width: 1px; height: 30px; flex: 0 0 auto; background: #e1e6eb; }
.health-services { min-width: 0; display: flex; align-items: center; flex: 1; padding: 0; }
.health-services > div { min-width: 0; display: flex; align-items: center; gap: 6px; padding: 0 14px; border-left: 1px solid #edf0f2; white-space: nowrap; }
.health-services > div:first-child { padding-left: 0; border-left: 0; }
.health-services .health-dot { width: 7px; height: 7px; box-shadow: none; }
.health-services strong { overflow: hidden; color: #465363; font-size: 11px; text-overflow: ellipsis; }
.health-services small { color: #8a96a4; font-size: 10px; }
.health-inline .status-chip { min-height: 34px; flex: 0 0 auto; padding: 0 11px; border-radius: 8px; background: #eaf7f1; color: #2f805f; font-size: 11px; font-weight: 800; }

@media (min-width: 721px) and (min-height: 760px) {
  .page-body.overview-page { height: calc(100vh - 84px); min-height: 0; padding-bottom: 20px; overflow: hidden; }
  .overview-page .metrics-grid { margin-bottom: 16px; }
  .overview-page .overview-layout { min-height: 0; flex: 1; grid-template-rows: minmax(142px,.52fr) minmax(235px,1.45fr) 72px; gap: 16px; }
  .page-body.overview-page .overview-layout > .queue-panel,
  .page-body.overview-page .overview-layout > .activity-side { min-height: 0; }
  .page-body.overview-page .health-panel-wide { height: 72px; min-height: 0; }
  .overview-page .queue-panel .queue-body { min-height: 0; height: calc(100% - 76px); overflow: auto; }
  .overview-page .queue-panel .empty-panel { min-height: 0; height: 100%; }
  .overview-page .activity-side { display: flex; flex-direction: column; overflow: hidden; }
  .overview-page .activity-side .activity-list { min-height: 0; display: flex; flex: 1; flex-direction: column; overflow-y: auto; }
  .overview-page .activity-side .activity-item { min-height: 92px; flex: 1 0 92px; align-content: center; }
  .overview-page .activity-side .activity-item:has(.activity-detail[open]) { min-height: max-content; flex-basis: auto; }
}

@media (max-width: 1120px) and (min-width: 721px) {
  .health-inline { gap: 11px; padding: 0 15px; }
  .health-services > div { padding: 0 8px; }
  .health-services strong { max-width: 92px; }
}

@media (max-width: 720px) {
  .health-inline { min-height: 0; display: block; padding: 0; }
  .health-inline h2 { min-height: 62px; display: flex; align-items: center; padding: 0 18px; border-bottom: 1px solid #e8ecf0; }
  .health-divider { display: none; }
  .health-services { display: grid; grid-template-columns: 1fr; padding: 7px 18px; }
  .health-services > div { min-height: 42px; padding: 0; border-left: 0; border-top: 1px solid #edf0f2; }
  .health-services > div:first-child { border-top: 0; }
  .health-inline .status-chip { margin: 0 18px 14px; display: inline-flex; }
}

/* v0.5.4 overview and editable settings */
.top-title { display: flex; align-items: center; align-self: stretch; }
.top-title small { margin: 0; font-size: 12px; }
.page-body { min-height: calc(100vh - 84px); display: flex; flex-direction: column; }
.overview-layout {
  min-height: max(680px, calc(100vh - 338px));
  display: grid;
  grid-template-rows: minmax(170px, auto) minmax(360px, 1fr) auto;
  gap: 20px;
}
.overview-layout > .queue-panel { min-height: 170px; }
.overview-layout > .queue-panel .queue-body { min-height: 94px; }
.overview-layout > .queue-panel .empty-panel { min-height: 94px; padding: 18px; }
.overview-layout > .queue-panel .empty-panel > span { width: 36px; height: 36px; margin-bottom: 8px; }
.overview-layout > .queue-panel .empty-panel h2 { font-size: 18px; }
.overview-layout > .activity-side { min-height: 360px; }
.overview-layout > .health-panel-wide { align-self: end; }
.activity-detail { margin-top: 8px; }
.activity-detail summary { width: max-content; list-style: none; color: var(--blue); font-size: 11px; font-weight: 700; cursor: pointer; }
.activity-detail summary::-webkit-details-marker { display: none; }
.activity-detail summary:after { content: " +"; }
.activity-detail[open] summary:after { content: " −"; }
.activity-detail > div { margin-top: 7px; padding: 9px 11px; border-radius: 7px; background: #f4f7f9; color: #687687; font: 11px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }
.settings-panel { min-height: 0; }
.settings-form { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; padding: 22px; }
.settings-form > label, .settings-form > .setting { min-height: 105px; padding: 18px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.settings-form label small { display: block; margin-bottom: 13px; color: #687687; font-size: 13px; font-weight: 700; }
.settings-form label span { display: flex; align-items: center; gap: 10px; color: #667383; font-size: 13px; }
.settings-form input[type="number"] { width: 108px; height: 43px; padding: 0 12px; border: 1px solid #ccd7df; border-radius: 8px; color: #29323e; font: inherit; outline: 0; }
.settings-form input[type="number"]:focus { border-color: var(--blue); box-shadow: 0 0 0 4px #e3f2f8; }
.settings-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.settings-actions button { min-width: 150px; height: 43px; border: 0; border-radius: 8px; background: var(--blue); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.settings-notice { margin: 20px 22px 0; padding: 11px 13px; border-radius: 8px; font-size: 13px; }
.settings-notice.success { background: #e7f7f0; color: #237b59; }
.settings-notice.error { background: #feeeee; color: #a83d3d; }

@media (max-width: 720px) {
  .page-body { min-height: calc(100vh - 64px); }
  .overview-layout { min-height: 0; display: grid; grid-template-rows: auto auto auto; gap: 12px; }
  .overview-layout > .activity-side { min-height: 420px; }
  .overview-layout > .queue-panel, .overview-layout > .queue-panel .queue-body,
  .overview-layout > .queue-panel .empty-panel { min-height: 0; }
  .settings-form { grid-template-columns: 1fr; padding: 14px; }
  .settings-actions { grid-column: 1; }
  .settings-actions button { width: 100%; }
}

/* v0.5.9 subscription administration and header alignment */
.page-body { padding-top: 20px; }
.overview-head { min-height: 38px; align-items: center; margin-bottom: 16px; }
.overview-head h2 { line-height: 1.15; }
.live-state { display: flex; align-items: center; gap: 9px; }
.live-state .health-dot { grid-row: auto; }
.activity-tools { min-height: 62px; display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 10px 21px; border-bottom: 1px solid #e8ecf0; }
.activity-tools a { min-height: 38px; display: inline-flex; align-items: center; padding: 0 13px; border: 1px solid #d6dce3; border-radius: 8px; color: #536272; font-size: 12px; font-weight: 700; }
.activity-tools a:last-child { border-color: var(--blue); background: var(--blue); color: #fff; }
.subscriptions-panel { min-height: 430px; }
.subscription-list { padding: 0 21px; }
.subscription-row { min-height: 82px; display: grid; grid-template-columns: 34px minmax(240px,1fr) minmax(220px,.7fr); align-items: center; gap: 15px; border-top: 1px solid #edf0f2; }
.subscription-row:first-child { border-top: 0; }
.subscription-row.complete { opacity: .7; }
.subscription-row form { margin: 0; }
.subscription-check { width: 25px; height: 25px; display: grid; place-items: center; padding: 0; border: 2px solid #b7c2cc; border-radius: 6px; background: #fff; color: #fff; font-size: 15px; font-weight: 800; cursor: pointer; }
.subscription-check[aria-checked="true"] { border-color: var(--green); background: var(--green); }
.subscription-primary strong, .subscription-primary span { display: block; }
.subscription-primary strong { margin-bottom: 4px; font-size: 15px; }
.subscription-primary span { color: #677586; font-size: 13px; overflow-wrap: anywhere; }
.subscription-meta { text-align: right; }
.subscription-meta span, .subscription-meta small { display: block; }
.subscription-meta span { color: #566575; font-size: 12px; }
.subscription-meta small { margin-top: 5px; color: #a06a1d; font-size: 11px; font-weight: 700; }
.subscription-row.complete .subscription-meta small { color: #398164; }
.subscriptions-empty { min-height: 350px; }
.approvals-panel { min-height: 0; display: flex; flex: 1; }
.approvals-panel .queue-body { min-height: 0; width: 100%; display: flex; padding: 0; }
.approvals-panel .queue-body > .empty-panel:only-child { min-height: 0; width: 100%; margin: 0; }

@media (min-width: 1200px) {
  .side-nav a { font-size: 17px; }
  .side-nav a > span { font-size: 19px; }
  .top-title small { font-size: 15px; }
  .overview-head h2 { font-size: 32px; }
  .live-state strong { font-size: 16px; }
  .metric-card small { font-size: 15px; }
  .metric-card strong { font-size: 36px; }
  .metric-card:last-child strong { font-size: 26px; }
  .surface-head h2 { font-size: 21px; }
  .soft-count, .text-button { font-size: 14px; }
  .overview-layout > .queue-panel .empty-panel h2 { font-size: 20px; }
  .activity-item strong { font-size: 16px; }
  .activity-item p { font-size: 14px; }
  .activity-item time { font-size: 13px; }
  .activity-detail summary { font-size: 13px; }
  .activity-detail > div { font-size: 12px; }
  .health-inline h2 { font-size: 19px; }
  .health-services strong { font-size: 13px; }
  .health-services small { font-size: 12px; }
  .health-inline .status-chip { font-size: 13px; }
  .subscription-primary strong { font-size: 17px; }
  .subscription-primary span { font-size: 15px; }
  .subscription-meta span { font-size: 14px; }
  .subscription-meta small { font-size: 13px; }
}

@media (max-width: 720px) {
  .page-body { padding-top: 14px; }
  .overview-head { min-height: 32px; margin-bottom: 13px; }
  .subscription-list { padding: 0 14px; }
  .subscription-row { grid-template-columns: 31px minmax(0,1fr); gap: 10px; padding: 15px 0; }
  .subscription-meta { grid-column: 2; text-align: left; }
  .activity-tools { justify-content: stretch; padding: 10px 14px; }
  .activity-tools a { flex: 1; justify-content: center; }
  .bottom-nav { grid-template-columns: repeat(5,1fr); }
}