:root {
  --dr-primary: #0798e8;
  --dr-cyan: #0acdd4;
  --dr-deep: #28212f;
  --dr-muted: #625b6a;
  --dr-soft: #e9f8fd;
  --dr-line: #d8e7ee;
  --dr-focus: #ffbf47;
  --dr-white: #ffffff;
  --dr-gradient: linear-gradient(110deg, var(--dr-cyan), var(--dr-primary));
  --dr-hero: linear-gradient(125deg, #ffffff 0%, #ecfbfd 52%, #e8f3ff 100%);
  --dr-page-background: radial-gradient(circle at 12% 22%, rgba(10, 205, 212, 0.08), transparent 28rem), linear-gradient(180deg, #eefbfe 0, #f7f8fb 34rem);
  --dr-shadow: 0 18px 48px rgba(35, 57, 82, 0.07);
  --dr-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body { background: var(--dr-page-background); color: var(--dr-deep); font-family: var(--dr-font); font-size: 1rem; line-height: 1.5; }
h1, h2, h3, h4 { font-family: var(--dr-font); font-weight: 800; line-height: 1.08; letter-spacing: -0.025em; }
p, li, label, input, textarea, select, button { font-family: var(--dr-font); }
.dr-surface { background: var(--dr-white); border: 1px solid var(--dr-line); border-radius: 16px; box-shadow: var(--dr-shadow); }
.dr-hero { background: var(--dr-hero); }
.dr-button-primary { background: var(--dr-gradient); border: 0; border-radius: 11px; color: var(--dr-white); font-weight: 700; }
.dr-link { color: var(--dr-primary); }
:focus-visible { outline: 3px solid var(--dr-focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }
/* Social Studio application components */
html{background:#f7f8fb}body{min-height:100vh}a{color:#0671ad}.shell{max-width:1400px;padding:32px 40px}.header{padding:24px 28px;border:1px solid var(--dr-line);border-radius:18px;background:var(--dr-hero);box-shadow:var(--dr-shadow);margin-bottom:24px}.brand{gap:24px}.logo{width:160px;height:48px;background:transparent;border-radius:0;display:flex;align-items:center;justify-content:center;flex:none}.logo img{display:block;width:100%;height:auto;max-height:48px;object-fit:contain}.header .brand>div:last-child{border-left:1px solid var(--dr-line);padding-left:24px}.header h1{font-size:30px;margin:2px 0 6px}.eyebrow{color:#0671ad;letter-spacing:.12em}.card{border-color:var(--dr-line);box-shadow:var(--dr-shadow);border-radius:16px;padding:26px}.card h2{font-size:21px;line-height:1.2}.muted{color:var(--dr-muted)}button{background:var(--dr-gradient);color:var(--dr-deep);border-radius:11px;font-weight:700;line-height:1.4;transition:background .15s,box-shadow .15s}button:hover{background:linear-gradient(110deg,#09bcc3,#0785cc);color:var(--dr-deep);box-shadow:0 4px 14px #0798e820}button:disabled{box-shadow:none}.secondary{background:var(--dr-soft);color:#174e78}.secondary:hover{background:#d8eff9;color:#174e78}input,textarea,select{border-color:var(--dr-line);color:var(--dr-deep);border-radius:10px}input:focus,textarea:focus,select:focus{border-color:var(--dr-primary)}.preview,.advanced,.platform-card,.admin-detail,.access-step,.access-guide>div,.access-choice>div,.role-guide>div{border-color:var(--dr-line)}.preview{background:#fbfdff}.composer-intro{background:var(--dr-hero);border-color:var(--dr-line);padding:24px 28px}.composer-intro h2{font-size:26px}.owner-nav{background:#e7f2fa;padding:5px;gap:6px}.owner-nav button{background:transparent;color:#174e78}.owner-nav button.active{background:var(--dr-deep);color:#fff}.steps button{background:#edf6fb;color:#174e78;border-color:var(--dr-line)}.steps button:hover{background:#e0f1fa}.steps button[aria-current=step]{background:var(--dr-soft);color:#174e78;border-color:var(--dr-primary);box-shadow:inset 0 0 0 1px var(--dr-primary)}.media-switch button{background:#edf6fb;color:#174e78}.media-switch button.switch-active{background:var(--dr-deep);color:#fff}.admin-stats div{background:var(--dr-soft);border-color:var(--dr-line)}.admin-stats strong{color:#174e78}.admin-stats span,.dashboard-kv span:nth-child(odd),.dashboard-list small{color:var(--dr-muted)}.admin-table th{color:var(--dr-muted)}.admin-table tr.selected{background:var(--dr-soft)}.client-link,.client-link:hover{color:#0671ad;background:transparent;box-shadow:none}.post,.workspace-choice{background:#f3f8fc;color:var(--dr-deep)}.post:hover,.workspace-choice.active{background:var(--dr-soft);color:var(--dr-deep)}.chip:has(input:checked){border-color:var(--dr-primary);background:var(--dr-soft)}.pill{background:var(--dr-soft);color:#174e78}.avatar{background:var(--dr-soft);color:#174e78}.gallery-item.active{border-color:var(--dr-primary)}.message{background:#e9f8fd;color:#174e78}.message.error{background:#fff0ec;color:#9b422f}.approval-toggle input,#clientDashboard .approval-toggle input{accent-color:var(--dr-primary)}#login,#inviteForm{max-width:460px;padding:36px}#login .logo{margin-bottom:28px}#login h1,#inviteForm h1{font-size:30px}#loginHelp,#inviteHelp{font-size:15px}.grid{gap:24px;grid-template-columns:minmax(0,1.35fr) minmax(320px,.7fr)}.admin-layout{gap:24px}.workspace-bar{padding:0 4px}.step-actions{border-color:var(--dr-line)}.dashboard-post:focus-visible{outline:3px solid var(--dr-focus)}.platform-card .media-pending{background:#28212fe8;color:#fff} 
@media(max-width:1000px){.shell{padding:24px}.grid{grid-template-columns:1fr}.grid aside .card:first-child{position:static}.header{padding:22px}.brand{gap:18px}.header .brand>div:last-child{padding-left:18px}}
@media(max-width:600px){.shell{padding:16px}.header{align-items:flex-start;gap:16px;padding:20px}.brand{display:block}.header .brand>div:last-child{border-left:0;padding-left:0;margin-top:16px}.logo{width:132px;height:40px}.header h1{font-size:26px}.header #logout{padding:9px 12px;font-size:12px}.card{padding:20px}.owner-nav{max-width:100%;flex-wrap:wrap}.composer-intro{padding:20px}.composer-intro h2{font-size:23px}}

/* Compact desktop header, aligned with Digital Revenue's 79px navigation bar. */
.header{background:#fff;box-shadow:none;border:0;border-bottom:1px solid var(--dr-line);border-radius:0;min-height:79px;padding:14px 22px;gap:24px;margin-bottom:20px;align-items:center}
.header .brand{gap:24px;min-width:0;align-items:center}
.header .logo{width:190px;height:26px}
.header .logo img{width:190px;height:auto;max-height:26px}
.header .brand>div:last-child{padding-left:24px;min-width:0;border-left:1px solid var(--dr-line)}
.header .eyebrow{font-size:9px;line-height:12px;letter-spacing:.1em;margin:0 0 2px}
.header h1{font-size:23px;line-height:26px;letter-spacing:-.025em;margin:0 0 2px}
.header #appTagline{display:block;font-size:12px;line-height:17px}
.header #logout{flex:none;font-size:13px;line-height:18px;padding:10px 16px;border-radius:10px}
@media(max-width:1000px){.header{padding:14px 18px}.header .brand{gap:20px}.header .brand>div:last-child{padding-left:20px}.header .logo{width:170px;height:auto}.header .logo img{width:170px;max-height:26px}}
@media(max-width:600px){.header{padding:16px;gap:14px;align-items:center}.header .brand{display:flex;flex-wrap:wrap;gap:12px}.header .logo{width:150px;height:auto}.header .logo img{width:150px;max-height:24px}.header .brand>div:last-child{border-left:0;padding-left:0;margin-top:0;width:100%}.header h1{font-size:21px;line-height:24px}.header #appTagline{font-size:11px;line-height:16px}.header #logout{padding:9px 12px;font-size:12px}}

/* Clear blue interface and a quieter hierarchy for everyday use. */
:root{--dr-hero:linear-gradient(125deg,#fff 0%,#f2f9ff 52%,#e8f3ff 100%);--dr-page-background:linear-gradient(180deg,#f1f7fd 0,#f7f8fb 34rem)}
body{background:var(--dr-page-background);font-size:15px}
button{background:#0671ad;color:#fff;box-shadow:0 2px 4px #075b9610}
button:hover{background:#075b96;color:#fff;box-shadow:0 4px 12px #075b9620}
.secondary,.owner-nav button,.media-switch button{background:#edf5fc;color:#174e78;box-shadow:none}
.secondary:hover,.owner-nav button:hover,.media-switch button:hover{background:#deecf8;color:#174e78}
.owner-nav button.active,.media-switch button.switch-active{background:#0671ad;color:#fff}
.header{border-radius:14px;border:1px solid #e0e8f1}
.card{border-color:#e0e8f1;background:#fff;box-shadow:0 6px 24px #243e6010}
.card h2{font-size:23px;line-height:1.25}
.card h3{font-size:16px;line-height:1.35}
.muted{line-height:1.55}
label{font-size:14px;color:#394454}
input,select,textarea{border-color:#d5dfeb;line-height:1.5}
textarea{padding:14px}
.workspace-bar{background:#fff;border:1px solid #e0e8f1;border-radius:12px;padding:12px 18px;margin-bottom:18px;gap:18px}
.workspace-bar #signedInAs{margin-left:auto;font-size:12px;overflow-wrap:anywhere}
.owner-nav,.clientAdminNav{margin-bottom:20px}
.owner-nav{background:#e9f1fa}
.composer-intro{background:var(--dr-hero);border-color:#d8e7f5;padding:26px 28px;margin-bottom:20px}
.composer-intro h2{font-size:28px;margin-bottom:8px}
.composer-intro p{font-size:14px;max-width:680px;color:#59667a}
.steps{gap:12px;margin-bottom:24px}
.steps button{padding:16px 18px;background:#fff;border:1px solid #dce5ef;color:#59667a;box-shadow:none;font-size:15px}
.steps button small{font-size:12px;margin-top:5px;opacity:1}
.steps button[aria-current=step]{background:#0671ad;color:#fff;border-color:#0671ad;box-shadow:0 4px 14px #0671ad20}
.steps button[aria-current=step] small{color:#e8f4ff}
.steps button:hover{background:#eaf4ff;color:#174e78}
.steps button[aria-current=step]:hover{background:#075b96;color:#fff}
.post,.post:hover,.workspace-choice{box-shadow:none}
.post{background:#f5f8fc;border:1px solid #e1e8f2;border-radius:12px;line-height:1.5}
.post:hover{background:#eaf4ff;color:#174e78;border-color:#bed9f0}
.admin-stats div{background:#f2f7fd;border-color:#dce7f2;border-radius:14px;padding:20px}
.admin-stats strong{color:#075b96;font-size:30px}
.admin-stats span{display:block;margin-top:6px;font-size:13px}
.admin-table th,.admin-table td{padding:15px 12px;border-color:#e5ebf3}
.admin-table th{background:#f4f8fc}
.admin-table-wrap{border:1px solid #e0e8f1;border-radius:12px}
.admin-detail{background:#f8fbff;padding:22px;border-color:#dce7f2}
.admin-attention{background:#f4f8fd;border-color:#dce7f2}
.admin-attention h3{color:#174e78}
.client-dashboard-grid{gap:20px}
.client-dashboard-grid .preview{padding:22px}
.preview,.platform-card,.advanced,.access-step,.access-guide>div,.role-guide>div{background:#fbfdff;border-color:#e0e8f1}
.message{background:#eaf4ff;color:#174e78;border:1px solid #c6ddf2}
.message.error{background:#fff0ec;color:#9b422f;border-color:#f2d4cb}
.pill{background:#e9f3ff;color:#075b96;font-weight:650}
.settings-panel{padding:0}
.settings-panel>.panel-summary{padding:18px 24px;cursor:pointer;list-style-position:inside;font-size:16px;font-weight:700;color:#174e78}
.settings-panel>.panel-summary span{display:inline-block;margin-left:14px;font-size:12px;font-weight:400}
.settings-panel[open]>.panel-summary{border-bottom:1px solid #e0e8f1}
.settings-body{padding:24px}
.settings-body>h2{font-size:20px}
.settings-body .workspace-list{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.settings-body .row label{flex:1;min-width:160px}
#clientSetup>summary{padding:18px 20px;font-size:16px;font-weight:700;cursor:pointer}
#clientSetup>.advanced-body{padding:0 20px 20px}
#billingAdminPanel>.preview{padding:24px}
#billingAdminPanel .row label{flex:1;min-width:220px}
#billingAdminPanel .advanced-body{padding:20px 0}
#postGrid aside .card:first-child{top:24px}
#postGrid aside .preview{background:#fff}
.step-actions{padding:18px 22px;border-color:#dce5ef;background:#fff}
.client-link,.client-link:hover{background:transparent;color:#0671ad;box-shadow:none}
@media(max-width:850px){.workspace-bar #signedInAs{margin-left:0}.steps{gap:8px}.steps button{padding:14px}.settings-panel>.panel-summary span{display:block;margin:6px 0 0 20px}.composer-intro h2{font-size:25px}.settings-body{padding:20px}}

/* Primary actions match the supplied bright Digital Revenue button reference. */
:root{--dr-gradient:linear-gradient(110deg,#0acdd4 0%,#0798e8 100%)}
button{background:var(--dr-gradient);color:#fff;font-weight:750;box-shadow:0 5px 14px rgba(7,152,232,.13)}
button:hover{background:linear-gradient(110deg,#09bec8 0%,#078ddd 100%);color:#fff;box-shadow:0 6px 16px rgba(7,152,232,.18)}
.secondary,.owner-nav button,.media-switch button{background:#edf7ff;color:#174e78;box-shadow:none}
.secondary:hover,.owner-nav button:hover,.media-switch button:hover{background:#e2f2ff;color:#174e78;box-shadow:none}
.owner-nav button.active,.media-switch button.switch-active{background:#e2f4ff;color:#174e78;box-shadow:inset 0 0 0 1px #a6d9f6}
.steps button[aria-current=step]{background:#e5f6ff;color:#174e78;border-color:#0798e8;box-shadow:inset 0 0 0 1px #0798e8}
.steps button[aria-current=step] small{color:#47667c}
.steps button[aria-current=step]:hover{background:#daf1ff;color:#174e78}
.admin-stats strong{color:#087bb8}
.client-link,.client-link:hover,.post,.post:hover,.workspace-choice,.steps button{box-shadow:none}
.client-link,.client-link:hover{background:transparent;color:#087bb8}
.post{background:#f5f8fc;color:var(--dr-deep)}.post:hover{background:#eaf4ff;color:#174e78}

/* Selected dashboard tab: clearer Digital Revenue blue contrast. */
.owner-nav button.active{background:#bee6ff;color:#174e78;box-shadow:inset 0 0 0 1px #0798e8}
.owner-nav button.active:hover{background:#addeff;color:#174e78}

/* One status palette for post summaries, list tags and calendar entries. */
:root{--ss-posted-bg:#dff3ff;--ss-posted-fg:#075b86;--ss-posted-edge:#72c5ee;--ss-scheduled-bg:#eee9ff;--ss-scheduled-fg:#5b4086;--ss-scheduled-edge:#bea8ee;--ss-draft-bg:#eff2f6;--ss-draft-fg:#4d5968;--ss-draft-edge:#b0bac8;--ss-attention-bg:#fff0dc;--ss-attention-fg:#805016;--ss-attention-edge:#e9b66a}
#app .overview-platform-tag.posted,#app .posts-overview-stats button.posted{background:var(--ss-posted-bg);color:var(--ss-posted-fg);border-color:var(--ss-posted-edge)}
#app .overview-platform-tag.scheduled,#app .posts-overview-stats button.scheduled{background:var(--ss-scheduled-bg);color:var(--ss-scheduled-fg);border-color:var(--ss-scheduled-edge)}
#app .overview-platform-tag.draft,#app .posts-overview-stats button.draft{background:var(--ss-draft-bg);color:var(--ss-draft-fg);border-color:var(--ss-draft-edge)}
#app .overview-platform-tag.attention,#app .posts-overview-stats button.attention{background:var(--ss-attention-bg);color:var(--ss-attention-fg);border-color:var(--ss-attention-edge)}
#app .posts-overview-stats .overview-summary strong{color:inherit}
#app .posts-overview-stats .overview-summary[aria-pressed=true]{box-shadow:inset 0 0 0 2px currentColor}
#app .posts-overview-stats .overview-summary:hover{box-shadow:inset 0 0 0 1px currentColor}

/* Clearly identify the currently open photo/video tools. */
#app .media-switch button{background:#edf7ff;color:#174e78;border:1px solid transparent;box-shadow:none}
#app .media-switch button:hover{background:#e2f2ff;color:#174e78}
#app .media-switch button[aria-selected=true],#app .media-switch button.switch-active{background:#bee6ff;color:#174e78;border-color:#0798e8;box-shadow:inset 0 0 0 1px #0798e8}
#app .media-switch button[aria-selected=true]:hover,#app .media-switch button.switch-active:hover{background:#addeff;color:#174e78}