:root {
  --ink: #0b1726; --muted: #6d7b8e; --line: #e7ecf2; --paper: #fff;
  --surface: #f4f7fa; --navy: #07111f; --navy-2: #0c1b2d;
  --orange: #ff8a3d; --orange-soft: #fff0e7; --green: #16a777;
  --violet: #7658f6; --cyan: #109dba; --shadow: 0 18px 55px rgba(20,36,55,.09);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--surface); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
.brand { display: flex; align-items: center; gap: 12px; color: white; letter-spacing: .08em; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: #fff; background: linear-gradient(145deg,#ff9d59,#fb6b28); font-size: 13px; font-weight: 900; box-shadow: 0 8px 24px rgba(255,122,48,.28); letter-spacing: -.03em; transform: rotate(-3deg); }
.brand > span:last-child { display: flex; flex-direction: column; }
.brand strong { font-size: 14px; line-height: 1.15; }
.brand small { font-size: 8px; margin-top: 4px; color: #8697ab; letter-spacing: .16em; }

/* Login */
.login-page { min-height: 100vh; background: var(--navy); }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(420px,1.08fr) minmax(420px,.92fr); }
.login-story { position: relative; display: flex; flex-direction: column; padding: 42px clamp(42px,6vw,94px); color: #fff; overflow: hidden; isolation: isolate; }
.login-story::before,.login-story::after { content: ""; position: absolute; border-radius: 999px; z-index: -1; }
.login-story::before { width: 620px; height: 620px; left: -220px; top: 120px; background: radial-gradient(circle,rgba(255,127,57,.19),rgba(255,127,57,0) 68%); }
.login-story::after { width: 520px; height: 520px; right: -290px; bottom: -170px; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 0 0 80px rgba(255,255,255,.015),0 0 0 160px rgba(255,255,255,.012); }
.brand-login { align-self: flex-start; }
.login-copy { margin: auto 0; max-width: 730px; padding: 80px 0; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; color: var(--orange); font-size: 11px; font-weight: 800; letter-spacing: .18em; }
.eyebrow span { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 5px rgba(255,138,61,.13); }
.login-copy h1 { margin: 0; font-size: clamp(44px,5.6vw,82px); line-height: .99; letter-spacing: -.055em; max-width: 820px; }
.login-copy h1 em { color: #a8b7c9; font-style: normal; font-weight: 500; }
.login-copy > p:not(.eyebrow) { max-width: 630px; margin: 28px 0 0; color: #91a1b5; font-size: 17px; line-height: 1.75; }
.login-features { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 48px; }
.login-features span { display: flex; align-items: center; gap: 9px; color: #c5d0dc; font-size: 12px; font-weight: 650; }
.login-features i { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; color: var(--orange); font-size: 9px; font-style: normal; }
.login-foot { color: #52657b; font-size: 11px; letter-spacing: .06em; }
.login-panel { display: grid; place-items: center; padding: 40px; background: #f6f8fb; position: relative; }
.login-panel::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(#cbd3dc 1px,transparent 1px); background-size: 24px 24px; opacity: .24; mask-image: linear-gradient(to bottom,black,transparent 70%); }
.login-card { position: relative; z-index: 1; width: min(450px,100%); padding: 46px; border: 1px solid #e8edf2; border-radius: 25px; background: rgba(255,255,255,.96); box-shadow: 0 30px 80px rgba(21,39,59,.11); }
.secure-badge { display: inline-flex; align-items: center; gap: 8px; color: var(--green); background: #eaf9f4; border-radius: 999px; padding: 8px 12px; font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.secure-badge span { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(22,167,119,.12); }
.login-card h2 { margin: 28px 0 7px; font-size: 31px; letter-spacing: -.035em; }
.login-card > p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.login-form { display: grid; gap: 20px; margin-top: 32px; }
.login-form label > span { display: block; margin-bottom: 9px; color: #344255; font-size: 12px; font-weight: 750; }
.input-shell { display: flex; align-items: center; height: 54px; border: 1px solid #dfe5ec; border-radius: 13px; background: #fbfcfd; transition: .2s ease; }
.input-shell:focus-within { border-color: var(--orange); box-shadow: 0 0 0 4px var(--orange-soft); background: #fff; }
.input-shell b { width: 47px; text-align: center; color: #a0adbb; font-size: 12px; }
.input-shell input { flex: 1; height: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); padding-right: 14px; }
.input-shell input::placeholder { color: #a9b4c0; }
.remember-login { display: flex; align-items: center; gap: 11px; margin-top: -3px; cursor: pointer; user-select: none; }
.remember-login input { width: 18px; height: 18px; margin: 0; accent-color: var(--orange); cursor: pointer; }
.remember-login > span { display: flex !important; flex-direction: column; gap: 2px; margin: 0 !important; }
.remember-login strong { color: #344255; font-size: 12px; }
.remember-login small { color: var(--muted); font-size: 10px; font-weight: 500; }
.primary-button { height: 55px; margin-top: 5px; border: 0; border-radius: 13px; color: white; background: linear-gradient(135deg,#ff914c,#fb6d29); font-weight: 800; font-size: 13px; cursor: pointer; box-shadow: 0 12px 28px rgba(250,107,40,.24); transition: transform .18s ease,box-shadow .18s ease; }
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(250,107,40,.3); }
.primary-button span { margin-left: 10px; }
.security-note { display: flex; gap: 12px; align-items: center; margin-top: 24px !important; padding-top: 22px; border-top: 1px solid var(--line); font-size: 11px !important; }
.security-note i { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; background: #edf9f5; color: var(--green); font-style: normal; font-weight: 900; }
.security-note strong { color: #344255; }
.login-error { margin-top: 22px; padding: 12px 14px; border-radius: 10px; color: #a73c32; background: #fff0ee; font-size: 12px; line-height: 1.5; }
.login-error.success { color: #28745e; background: #eaf9f4; }
.forgot-link { justify-self: center; color: #637388; font-size: 11px; font-weight: 700; }
.forgot-link:hover { color: var(--orange); }
.security-settings-grid { display: grid; grid-template-columns: minmax(360px,1.15fr) minmax(300px,.85fr); gap: 24px; }
.password-change-form { margin-top: 24px; }
.password-change-form label { display: grid; gap: 7px; }
.password-change-form label > span { color: #47586b; font-size: 10px; font-weight: 800; }
.password-change-form small,.recovery-card > p { color: var(--muted); font-size: 10px; line-height: 1.65; }
.recovery-card { align-self: start; }
.recovery-card .secondary-action { display: inline-flex; margin-top: 18px; }

/* Dashboard */
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 245px minmax(0,1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 28px 20px 22px; background: var(--navy); color: #8ea0b5; z-index: 20; }
.sidebar .brand { padding: 0 8px 25px; }
.main-nav { margin-top: 15px; }
.main-nav p { margin: 25px 12px 10px; color: #45586e; font-size: 8px; font-weight: 900; letter-spacing: .18em; }
.main-nav a { min-height: 45px; display: flex; align-items: center; gap: 12px; padding: 0 13px; margin: 4px 0; border-radius: 11px; color: #8294a9; font-size: 12px; font-weight: 650; transition: .18s ease; }
.main-nav a:hover { color: #e2e9f0; background: rgba(255,255,255,.04); }
.main-nav a.active { color: #fff; background: rgba(255,138,61,.12); box-shadow: inset 2px 0 var(--orange); }
.main-nav a.active .nav-icon { color: var(--orange); }
.main-nav a b { margin-left: auto; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; color: var(--orange); background: rgba(255,138,61,.12); font-size: 9px; }
.nav-icon { width: 18px; text-align: center; font-size: 15px; }
.sidebar-status { display: flex; align-items: center; gap: 11px; margin: auto 3px 14px; padding: 14px; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; background: rgba(255,255,255,.025); }
.sidebar-status div { display: flex; flex-direction: column; }
.sidebar-status strong { color: #c7d2de; font-size: 10px; }
.sidebar-status small { margin-top: 3px; color: #5e7187; font-size: 8px; }
.pulse-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(22,167,119,.1); }
.logout-button { width: 100%; height: 42px; border: 0; border-top: 1px solid rgba(255,255,255,.07); color: #71849a; background: transparent; font-size: 11px; cursor: pointer; text-align: left; padding: 14px 12px 0; }
.logout-button span { margin-right: 12px; font-size: 15px; }
.logout-button:hover { color: #fff; }
.main-content { min-width: 0; padding: 0 clamp(24px,4vw,64px); background: #f5f7fa; }
.topbar { height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 25px; border-bottom: 1px solid var(--line); }
.search-box { width: min(390px,45vw); height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border: 1px solid #e3e8ee; border-radius: 11px; background: white; }
.search-box > span { color: #8b99a9; font-size: 19px; transform: rotate(-15deg); }
.search-box input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--ink); font-size: 11px; background: transparent; }
.search-box input::placeholder { color: #98a5b3; }
kbd { padding: 3px 7px; border: 1px solid #dce2e9; border-radius: 5px; color: #98a5b4; background: #f6f8fa; font-size: 9px; font-family: inherit; }
.topbar-actions { display: flex; align-items: center; gap: 16px; }
.live-clock { padding-right: 16px; border-right: 1px solid #dfe5eb; text-align: right; }
.live-clock span { display: block; font-size: 12px; font-weight: 850; }
.live-clock small { display: block; margin-top: 2px; color: #8492a2; font-size: 8px; text-transform: uppercase; letter-spacing: .1em; }
.admin-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: #fff; background: var(--navy-2); font-size: 10px; font-weight: 800; }
.menu-button { display: none; border: 0; background: transparent; font-size: 22px; }
.hero-section { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; padding: 45px 0 28px; }
.hero-section .eyebrow { margin-bottom: 13px; font-size: 8px; }
.hero-section h1 { margin: 0; font-size: clamp(29px,3vw,42px); letter-spacing: -.04em; }
.hero-section > div > p:last-child { margin: 9px 0 0; color: var(--muted); font-size: 12px; }
.refresh-button { height: 39px; padding: 0 15px; border: 1px solid #e1e6ec; border-radius: 10px; color: #445266; background: white; font-size: 10px; font-weight: 750; cursor: pointer; }
.refresh-button span { display: inline-block; margin-right: 6px; font-size: 14px; }
.refresh-button.loading span { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.metric-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.metric-card { position: relative; min-height: 118px; display: flex; align-items: center; gap: 15px; padding: 21px; border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; }
.metric-card.accent::before { content: ""; position: absolute; left: 0; top: 19px; bottom: 19px; width: 3px; border-radius: 0 4px 4px 0; background: var(--orange); }
.metric-icon { display: grid; place-items: center; width: 39px; height: 39px; flex: 0 0 auto; border-radius: 11px; color: var(--orange); background: var(--orange-soft); font-size: 16px; }
.metric-icon.green { color: var(--green); background: #eaf9f4; }
.metric-icon.violet { color: var(--violet); background: #f0edff; }
.metric-icon.cyan { color: var(--cyan); background: #e8f8fb; }
.metric-card div { min-width: 0; display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 7px; }
.metric-card small { grid-column: 1/-1; margin-bottom: 4px; color: #96a2b0; font-size: 7px; font-weight: 900; letter-spacing: .13em; }
.metric-card strong { font-size: 23px; letter-spacing: -.03em; white-space: nowrap; }
.metric-card p { margin: 0; color: #8c99a8; font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sites-section { padding: 42px 0 0; scroll-margin-top: 20px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 16px; }
.section-heading p,.security-card p { margin: 0 0 5px; color: var(--orange); font-size: 7px; font-weight: 900; letter-spacing: .16em; }
.section-heading h2,.security-card h2 { margin: 0; font-size: 19px; letter-spacing: -.025em; }
.section-heading > span { color: #98a5b3; font-size: 9px; }
.site-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.site-card { position: relative; min-height: 285px; padding: 24px; border: 1px solid var(--line); border-radius: 17px; background: white; box-shadow: 0 8px 35px rgba(28,45,65,.045); overflow: hidden; transition: transform .2s ease,box-shadow .2s ease; }
.site-card::after { content: ""; position: absolute; right: -60px; top: -80px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle,rgba(118,88,246,.09),transparent 68%); pointer-events: none; }
.site-card.cyan::after { background: radial-gradient(circle,rgba(16,157,186,.1),transparent 68%); }
.site-card.orange::after { background: radial-gradient(circle,rgba(242,113,33,.12),transparent 68%); }
.site-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.site-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.site-identity { display: flex; align-items: center; gap: 13px; min-width: 0; }
.site-mark { display: grid; place-items: center; width: 47px; height: 47px; flex: 0 0 auto; border-radius: 13px; color: white; background: linear-gradient(145deg,#8369fc,#5b3fde); font-size: 12px; font-weight: 900; letter-spacing: -.04em; box-shadow: 0 10px 24px rgba(91,63,222,.22); }
.cyan .site-mark { background: linear-gradient(145deg,#1ab7d0,#087e9a); box-shadow: 0 10px 24px rgba(8,126,154,.21); }
.orange .site-mark { background: linear-gradient(145deg,#ff9858,#e35e16); box-shadow: 0 10px 24px rgba(227,94,22,.22); }
.site-identity h3 { margin: 0 0 5px; font-size: 16px; letter-spacing: -.02em; }
.site-identity a { color: #8a98a7; font-size: 9px; }
.site-identity a:hover { color: var(--ink); }
.site-status { display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 999px; color: #9a7b35; background: #fff8e9; font-size: 8px; font-weight: 800; white-space: nowrap; }
.site-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.site-status.online { color: var(--green); background: #eaf9f4; }
.site-status.offline { color: #c34f43; background: #fff0ee; }
.site-description { min-height: 43px; margin: 25px 0 18px; color: #667589; font-size: 10px; line-height: 1.65; max-width: 90%; }
.section-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.section-tags span { padding: 7px 9px; border-radius: 7px; color: #6f7d8d; background: #f4f6f8; font-size: 8px; font-weight: 650; }
.site-card-foot { position: absolute; left: 24px; right: 24px; bottom: 22px; display: flex; align-items: center; justify-content: space-between; padding-top: 17px; border-top: 1px solid var(--line); }
.site-card-foot small { display: flex; align-items: center; gap: 7px; color: #95a1af; font-size: 8px; }
.status-ping { width: 7px; height: 7px; border-radius: 50%; background: #d2ad58; }
.status-ping.online { background: var(--green); box-shadow: 0 0 0 4px rgba(22,167,119,.09); }
.status-ping.offline { background: #c34f43; }
.panel-button { min-width: 113px; height: 37px; display: inline-flex; justify-content: center; align-items: center; gap: 10px; border-radius: 9px; color: white; background: var(--navy-2); font-size: 9px; font-weight: 800; transition: .18s ease; }
.panel-button:hover { background: #152b43; transform: translateX(2px); }
.panel-button span { color: var(--orange); font-size: 13px; }
.site-skeleton { height: 285px; border-radius: 17px; background: linear-gradient(90deg,#eef2f5 25%,#f8fafb 50%,#eef2f5 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.empty-state,.load-error { padding: 35px; border: 1px dashed #dce3ea; border-radius: 14px; color: #8997a7; background: white; text-align: center; font-size: 11px; }
.bottom-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 18px; padding: 18px 0 45px; }
.activity-card,.security-card { min-height: 188px; padding: 23px; border: 1px solid var(--line); border-radius: 16px; background: white; scroll-margin-top: 20px; }
.section-heading.compact { margin-bottom: 13px; }
.activity-list { border-top: 1px solid var(--line); }
.activity-empty { display: flex; align-items: center; justify-content: center; gap: 13px; min-height: 95px; color: #94a1af; }
.activity-empty > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--violet); background: #f0edff; }
.activity-empty p { font-size: 9px; line-height: 1.6; }
.activity-empty strong { color: #5e6d7f; }
.activity-row { min-height: 56px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; border-bottom: 1px solid #f0f2f5; }
.activity-icon { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; color: var(--violet); background: #f0edff; font-size: 12px; }
.activity-row div { display: flex; flex-direction: column; gap: 3px; }
.activity-row strong { font-size: 10px; }
.activity-row small,.activity-row time { color: #95a1af; font-size: 8px; }
.security-card { display: flex; align-items: center; gap: 21px; color: #fff; border: 0; background: linear-gradient(145deg,#0b1a2c,#10243a); }
.security-symbol { position: relative; display: grid; place-items: center; width: 62px; height: 62px; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.09); border-radius: 18px; color: var(--orange); background: rgba(255,255,255,.04); font-size: 27px; }
.security-symbol i { position: absolute; right: -5px; bottom: -5px; display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; color: white; background: var(--green); border: 3px solid #10243a; font-size: 9px; font-style: normal; }
.security-card h2 { font-size: 17px; }
.security-card span { display: block; margin-top: 10px; color: #8395a9; font-size: 9px; line-height: 1.6; }
.credentials-card { margin: 0 0 45px; padding: 26px; border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: 0 8px 35px rgba(28,45,65,.04); scroll-margin-top: 20px; }
.credentials-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 25px; }
.credentials-heading p { margin: 0 0 6px; color: var(--orange); font-size: 7px; font-weight: 900; letter-spacing: .16em; }
.credentials-heading h2 { margin: 0; font-size: 19px; letter-spacing: -.025em; }
.credentials-heading span { display: block; margin-top: 8px; color: #8795a5; font-size: 9px; }
.credentials-heading > strong { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border-radius: 999px; color: var(--green); background: #eaf9f4; font-size: 8px; white-space: nowrap; }
.credentials-heading > strong i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.credential-list { display: grid; gap: 14px; margin-top: 22px; }
.credential-entry { padding: 17px; border: 1px solid #e4e9ee; border-radius: 13px; background: #fbfcfd; }
.credential-entry header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 13px; }
.credential-entry header div { display: flex; align-items: baseline; gap: 8px; }
.credential-entry header strong { color: #25364a; font-size: 11px; }
.credential-entry header small { color: #98a4b1; font-size: 8px; }
.credential-entry header a { padding: 6px 9px; border-radius: 7px; color: #526275; background: #eef2f5; font-size: 8px; font-weight: 750; }
.credential-entry header a:hover { color: var(--orange); }
.credential-fields { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.credential-list label > span { display: block; margin: 0 0 7px; color: #67768a; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.credential-list label > div { min-height: 44px; display: flex; align-items: center; gap: 6px; padding: 5px; border: 1px solid #e1e7ed; border-radius: 10px; background: #fff; }
.credential-list input { min-width: 0; flex: 1; border: 0; outline: 0; padding: 0 8px; color: #27374a; background: transparent; font-size: 10px; font-family: ui-monospace,SFMono-Regular,Consolas,monospace; }
.credential-list button { height: 32px; padding: 0 10px; border: 1px solid #dfe5eb; border-radius: 7px; color: #536277; background: #fff; font-size: 8px; font-weight: 800; cursor: pointer; }
.credential-list button:hover { color: var(--orange); border-color: #ffd0b5; }
.manual-panel-links { display: flex; align-items: center; gap: 8px; margin-top: 16px; color: #8c99a8; font-size: 8px; }
.manual-panel-links a { padding: 6px 10px; border-radius: 7px; color: #526275; background: #f2f5f7; font-weight: 750; }
.manual-panel-links a:hover { color: var(--orange); }
.credential-warning { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: #a07c5d; font-size: 8px; line-height: 1.6; }
.dashboard-footer { min-height: 66px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); color: #9ca8b5; font-size: 8px; }
.dashboard-footer span:last-child { display: flex; align-items: center; gap: 7px; }
.dashboard-footer i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.sidebar-backdrop { display: none; }
.page-back { color: #64758a; font-size: 10px; font-weight: 750; }
.page-back:hover { color: var(--orange); }
.page-hero { padding-bottom: 20px; }
.compact-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); }
.quick-management { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-top: 18px; }
.quick-management > a { min-height: 88px; display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; transition: .18s ease; }
.quick-management > a:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.quick-management div { display: flex; flex-direction: column; gap: 5px; }
.quick-management strong { color: #27394d; font-size: 11px; }
.quick-management small { color: #8997a7; font-size: 8px; }
.quick-management b { color: var(--orange); font-size: 18px; }
.first-section { padding-top: 10px; }
.field-hint { display: block; margin-top: 5px; color: #9a7b61; font-size: 7px; }
.advanced-login [hidden] { display: none; }
.transition-page { min-height: 100vh; display: grid; place-items: center; padding: 22px; background: var(--navy); }
.transition-card { width: min(430px,100%); padding: 38px; border-radius: 20px; color: #fff; background: #0d1d30; box-shadow: 0 28px 80px rgba(0,0,0,.25); text-align: center; }
.transition-card .brand-mark { margin: 0 auto; }
.transition-card h1 { margin: 24px 0 8px; font-size: 25px; }
.transition-card p,.transition-card small { color: #91a2b6; font-size: 10px; line-height: 1.6; }
.transition-card button { min-height: 42px; margin: 20px 0 12px; padding: 0 18px; border: 0; border-radius: 10px; color: #fff; background: var(--orange); font-size: 10px; font-weight: 850; cursor: pointer; }

/* Panel and social automation management */
.management-section { padding: 42px 0 0; scroll-margin-top: 20px; }
.management-heading { align-items: center; }
.management-heading > div > span { display: block; margin-top: 8px; color: #8795a5; font-size: 9px; }
.primary-action,.secondary-action { min-height: 39px; padding: 0 15px; border-radius: 10px; font-size: 9px; font-weight: 850; cursor: pointer; transition: .18s ease; }
.primary-action { border: 0; color: #fff; background: linear-gradient(135deg,#ff914c,#fb6d29); box-shadow: 0 9px 22px rgba(250,107,40,.2); }
.primary-action:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(250,107,40,.27); }
.secondary-action { border: 1px solid #dfe5eb; color: #4b5b6f; background: #fff; }
.primary-action:disabled,.secondary-action:disabled,.management-row button:disabled,.social-card button:disabled { opacity: .55; cursor: wait; transform: none; }
.management-list { display: grid; gap: 10px; }
.site-skeleton.slim { height: 74px; }
.management-row { min-height: 76px; display: grid; grid-template-columns: 42px minmax(180px,1fr) auto auto; align-items: center; gap: 14px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.management-row.disabled,.social-card.disabled,.plan-card.disabled { opacity: .58; }
.mini-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; color: #fff; background: linear-gradient(145deg,#8369fc,#5b3fde); font-size: 9px; font-weight: 900; }
.mini-mark.cyan { background: linear-gradient(145deg,#1ab7d0,#087e9a); }
.mini-mark.orange { background: linear-gradient(145deg,#ff9858,#e35e16); }
.management-row > div:nth-child(2) { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.management-row strong { color: #26384c; font-size: 11px; }
.management-row small { color: #8b98a7; font-size: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.connection-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 25px; padding: 0 9px; border-radius: 999px; color: #66768a; background: #eef2f5; font-size: 7px; font-weight: 850; font-style: normal; white-space: nowrap; }
.connection-pill.connected { color: var(--green); background: #eaf9f4; }
.connection-pill.pending { color: #9a7330; background: #fff7e4; }
.connection-pill.error { color: #b8493f; background: #fff0ee; }
.row-actions,.social-card footer,.plan-card footer,.post-card footer { display: flex; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.row-actions a,.row-actions button,.social-card footer a,.social-card footer button,.plan-card footer button,.post-card footer button { min-height: 31px; padding: 0 10px; display: inline-flex; align-items: center; border: 1px solid #dfe5eb; border-radius: 8px; color: #536277; background: #fff; font-size: 8px; font-weight: 800; cursor: pointer; }
.row-actions a:hover,.row-actions button:hover,.social-card footer a:hover,.social-card footer button:hover,.plan-card footer button:hover,.post-card footer button:hover { color: var(--orange); border-color: #ffd0b5; }
.row-actions .danger,.social-card footer .danger,.plan-card footer .danger { color: #b45951; }
.info-strip { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 13px 15px; border: 1px solid #e5eaf0; border-radius: 11px; color: #768599; background: #fafdff; font-size: 8px; line-height: 1.6; }
.info-strip strong { color: #374a60; white-space: nowrap; }
.social-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.social-grid > .empty-state { grid-column: 1/-1; }
.social-card { min-height: 190px; display: flex; flex-direction: column; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.social-card header { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; }
.social-card header > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: #fff; background: var(--navy-2); font-size: 9px; font-weight: 900; }
.social-card header > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.social-card header strong { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.social-card header small { color: #93a0ae; font-size: 8px; }
.social-card p { margin: 18px 0 9px; color: #68788b; font-size: 9px; line-height: 1.55; }
.social-card em,.post-card em { margin: 0 0 10px; color: #b64e44; font-size: 8px; line-height: 1.5; font-style: normal; }
.social-card footer { margin-top: auto; justify-content: flex-start; }
.ai-settings-card { display: grid; grid-template-columns: .7fr 1.3fr; gap: 30px; margin-top: 14px; padding: 23px; border: 0; border-radius: 16px; color: #fff; background: linear-gradient(145deg,#0b1a2c,#10243a); }
.ai-settings-card p { margin: 0 0 7px; color: var(--orange); font-size: 7px; font-weight: 900; letter-spacing: .16em; }
.ai-settings-card h3 { margin: 0; font-size: 18px; }
.ai-settings-card > div > span { display: block; margin-top: 10px; color: #8da0b5; font-size: 9px; line-height: 1.65; }
.settings-form { display: grid; grid-template-columns: 1.4fr 1fr .7fr; align-items: end; gap: 10px; }
.settings-form label > span,.form-grid label > span { display: block; margin-bottom: 7px; color: #7f90a4; font-size: 8px; font-weight: 800; }
.settings-form input,.form-grid input,.form-grid select,.form-grid textarea { width: 100%; min-height: 40px; padding: 9px 11px; border: 1px solid #dfe5ec; border-radius: 9px; color: #27394e; background: #fbfcfd; outline: none; font-size: 9px; resize: vertical; }
.settings-form input { color: #dfe7ef; border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.055); }
.settings-form input:focus,.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,138,61,.12); }
.settings-form .toggle-field { align-self: center; }
.settings-form .secondary-action { min-height: 40px; }
.settings-form > strong { color: #71d5b3; font-size: 8px; align-self: center; }
.settings-form > strong.needs-config { color: #ffc072; }
.ai-center-actions { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; }
.ai-center-actions strong { color: #71d5b3; font-size: 10px; }
.ai-center-actions strong.needs-config { color: #ffc072; }
.ai-center-actions > span { color: #8da0b5; font-size: 8px; line-height: 1.5; }
.ai-center-actions .primary-action { display: inline-flex; align-items: center; margin-top: 2px; }
.toggle-field { display: flex !important; align-items: center; gap: 8px; }
.toggle-field input { width: 15px !important; min-height: auto !important; height: 15px; accent-color: var(--orange); }
.toggle-field span { margin: 0 !important; }
.automation-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: 16px; }
.automation-layout > div { min-width: 0; }
.subsection-title { margin: 0 0 10px; color: #516176; font-size: 10px; }
.plan-list,.post-list { display: grid; gap: 10px; }
.plan-card,.post-card { padding: 17px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.plan-card header,.post-card header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.plan-card header > div,.post-card header > div { display: flex; flex-direction: column; gap: 4px; }
.plan-card strong,.post-card strong { color: #273a4f; font-size: 10px; }
.plan-card small,.post-card small { color: #95a2af; font-size: 8px; }
.plan-card > p,.post-card > p { margin: 13px 0; color: #64758a; font-size: 9px; line-height: 1.65; white-space: pre-wrap; }
.plan-meta { display: flex; gap: 8px; margin: 0 0 13px; }
.plan-meta span,.post-targets span { padding: 6px 8px; border-radius: 7px; color: #76869a; background: #f2f5f7; font-size: 7px; }
.plan-card footer,.post-card footer { justify-content: flex-start; padding-top: 12px; border-top: 1px solid var(--line); }
.post-targets { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.post-targets span { display: inline-flex; flex-direction: column; gap: 4px; }
.post-targets span.failed { color: #b8493f; background: #fff0ee; }
.post-targets small { color: inherit; font-size: 7px; line-height: 1.4; }
.post-media-link { display: inline-flex; margin: -4px 0 12px; color: #526a86; font-size: 8px; font-weight: 800; }
.plan-meta { flex-wrap: wrap; }
.plan-meta .media-ready { color: var(--green); background: #eaf9f4; }
.plan-meta .media-missing { color: #b8493f; background: #fff0ee; }
.post-status { padding: 6px 8px; border-radius: 999px; color: #8c6e32; background: #fff7e4; font-size: 7px; font-weight: 850; }
.post-status.published { color: var(--green); background: #eaf9f4; }
.post-status.retrying { color: #8c6e32; background: #fff2cc; }
.post-status.failed { color: #b8493f; background: #fff0ee; }

.control-dialog { width: min(720px,calc(100vw - 30px)); max-height: calc(100vh - 30px); padding: 0; border: 0; border-radius: 18px; color: var(--ink); background: #fff; box-shadow: 0 30px 100px rgba(4,15,27,.35); }
.control-dialog.wide-dialog { width: min(820px,calc(100vw - 30px)); }
.control-dialog::backdrop { background: rgba(4,14,25,.65); backdrop-filter: blur(4px); }
.control-dialog form { padding: 24px; }
.control-dialog header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; }
.control-dialog header p { margin: 0 0 6px; color: var(--orange); font-size: 7px; font-weight: 900; letter-spacing: .16em; }
.control-dialog h2 { margin: 0; font-size: 21px; }
.dialog-close { width: 34px; height: 34px; border: 1px solid #e1e6ec; border-radius: 9px; color: #758398; background: #fff; font-size: 20px; cursor: pointer; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.form-grid .wide,.form-grid fieldset { grid-column: 1/-1; }
.form-grid textarea { min-height: 65px; }
.advanced-login { padding: 14px; border: 1px dashed #dce3ea; border-radius: 11px; background: #fafcfd; }
.advanced-login[hidden] { display: none; }
.form-grid fieldset { margin: 0; padding: 13px; border: 1px solid #e0e6ec; border-radius: 10px; }
.form-grid legend { padding: 0 6px; color: #7f90a4; font-size: 8px; font-weight: 800; }
.account-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.account-checks label { display: flex; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 8px; background: #f3f6f8; color: #536477; font-size: 8px; }
.account-checks input { width: 14px !important; min-height: auto !important; accent-color: var(--orange); }
.dual-time-field > span { display: block; margin-bottom: 7px; color: #7f90a4; font-size: 8px; font-weight: 800; }
.dual-time-field > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dual-time-field small { display: block; margin-bottom: 5px; color: #98a4b1; font-size: 7px; }
#tiktok-privacy-field[hidden] { display: none; }
.muted-note { color: #8b98a8; font-size: 8px; }
.dialog-note { margin: 15px 0 0; padding: 10px 12px; border-radius: 9px; color: #8b6d51; background: #fff7ef; font-size: 8px; line-height: 1.6; }
.form-message { min-height: 18px; margin: 13px 0 0; color: #b4493f; font-size: 9px; }
.control-dialog form > footer { display: flex; justify-content: flex-end; gap: 9px; padding-top: 15px; border-top: 1px solid var(--line); }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 100; max-width: 360px; padding: 13px 16px; border-radius: 11px; color: #fff; background: #153248; box-shadow: 0 18px 45px rgba(5,20,32,.25); font-size: 10px; font-weight: 750; opacity: 0; transform: translateY(15px); pointer-events: none; transition: .22s ease; }
.toast.visible { opacity: 1; transform: translateY(0); }
.toast.error { background: #9e443c; }

/* Multi-provider AI center */
.hero-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.openai-onboarding { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 2px 0 22px; padding: 18px 20px; border: 1px solid #dfe8f2; border-radius: 14px; background: linear-gradient(135deg,#f8fbff,#fff); }
.openai-onboarding p { margin: 0 0 5px; color: var(--orange); font-size: 7px; font-weight: 900; letter-spacing: .14em; }
.openai-onboarding h2 { margin: 0; color: #27394e; font-size: 14px; }
.openai-onboarding span { display: block; max-width: 790px; margin-top: 6px; color: #7d8da0; font-size: 8px; line-height: 1.55; }
.openai-onboarding > a { flex: 0 0 auto; display: inline-flex; align-items: center; }
.ai-routing-form { grid-template-columns: repeat(3,minmax(0,1fr)); padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.ai-routing-form input { color: #27394e; border-color: #dfe5ec; background: #fbfcfd; }
.ai-routing-form > strong { color: var(--green); }
.ai-role-form { padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.ai-role-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
.ai-role-grid article { display: grid; grid-template-columns: minmax(130px,1.05fr) repeat(2,minmax(120px,1fr)) auto; align-items: end; gap: 10px; padding: 14px; border: 1px solid #e7ebef; border-radius: 12px; background: #fbfcfd; }
.ai-role-grid article > div { align-self: center; display: flex; flex-direction: column; gap: 4px; }
.ai-role-grid strong { color: #314359; font-size: 9px; }
.ai-role-grid small { color: #8c99a8; font-size: 7px; }
.ai-role-grid label span,.fallback-row label span { display: block; margin-bottom: 6px; color: #7f90a4; font-size: 7px; font-weight: 800; }
.ai-role-grid select,.fallback-row select { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid #dfe5ec; border-radius: 9px; color: #27394e; background: #fff; font-size: 8px; }
.ai-role-grid i { align-self: center; max-width: 94px; padding: 6px 8px; border-radius: 999px; color: #b8493f; background: #fff0ee; font-size: 7px; font-weight: 850; font-style: normal; line-height: 1.35; text-align: center; }
.ai-role-grid i.ready { color: var(--green); background: #eaf9f4; }
.fallback-row { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 10px; margin-top: 13px; }
.publish-readiness { display: grid; grid-template-columns: minmax(220px,.8fr) minmax(300px,1.2fr); gap: 26px; margin-top: 14px; padding: 22px; border: 1px solid #e2e8ee; border-radius: 16px; background: #fff; }
.publish-readiness p { margin: 0 0 7px; color: var(--orange); font-size: 7px; font-weight: 900; letter-spacing: .16em; }
.publish-readiness h3 { margin: 0; color: #27394e; font-size: 17px; }
.publish-readiness > div > span { display: block; margin-top: 9px; color: #8291a2; font-size: 8px; line-height: 1.6; }
.publish-readiness ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.publish-readiness li { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 9px; color: #8a5f58; background: #fff4f2; font-size: 8px; line-height: 1.45; }
.publish-readiness li span { flex: 0 0 19px; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; color: #fff; background: #d87166; font-size: 8px; font-weight: 900; }
.publish-readiness li.ready { color: #397864; background: #edf9f5; }
.publish-readiness li.ready span { background: #42a384; }
.ai-provider-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
.ai-provider-grid > .empty-state { grid-column: 1/-1; }
.ai-provider-card { min-height: 250px; display: flex; flex-direction: column; padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: 0 8px 32px rgba(28,45,65,.035); }
.ai-provider-card.disabled,.ai-model-row.disabled { opacity: .58; }
.ai-provider-card header { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 10px; }
.ai-provider-card header > div:nth-child(2) { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ai-provider-card header strong { color: #26384c; font-size: 11px; }
.ai-provider-card header small { color: #8c99a8; font-size: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.provider-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: #fff; background: linear-gradient(145deg,#8369fc,#5b3fde); font-size: 10px; font-weight: 900; }
.provider-flags { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 12px; }
.provider-flags span { padding: 6px 8px; border-radius: 7px; color: #6f7e91; background: #f2f5f7; font-size: 7px; font-weight: 750; }
.quota-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.quota-bars > div { padding: 10px; border: 1px solid #edf0f3; border-radius: 9px; background: #fafcfd; }
.quota-bars span,.quota-bars b { display: block; }
.quota-bars span { margin-bottom: 4px; color: #96a2b0; font-size: 7px; font-weight: 800; text-transform: uppercase; }
.quota-bars b { color: #3d4e62; font-size: 9px; }
.ai-provider-card > em { margin: 10px 0 0; color: #b64e44; font-size: 8px; line-height: 1.5; font-style: normal; }
.ai-provider-card footer { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 15px; }
.ai-provider-card footer button,.ai-provider-card footer a,.ai-model-row button { min-height: 31px; padding: 0 9px; display: inline-flex; align-items: center; border: 1px solid #dfe5eb; border-radius: 8px; color: #536277; background: #fff; font-size: 8px; font-weight: 800; cursor: pointer; }
.ai-provider-card footer button:hover,.ai-model-row button:hover { color: var(--orange); border-color: #ffd0b5; }
.ai-provider-card footer button:disabled { opacity: .55; cursor: wait; }
.ai-provider-card footer .danger,.ai-model-row .danger { color: #b45951; }
.ai-model-list,.ai-usage-list { display: grid; gap: 9px; }
.ai-model-row { min-height: 69px; display: grid; grid-template-columns: minmax(190px,1.5fr) repeat(4,auto) auto; align-items: center; gap: 13px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.ai-model-row > div:first-child { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ai-model-row strong { color: #26384c; font-size: 10px; }
.ai-model-row small { color: #8c99a8; font-size: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-model-row > span { padding: 6px 8px; border-radius: 7px; color: #6f7e91; background: #f2f5f7; font-size: 7px; white-space: nowrap; }
.ai-model-row > div:last-child { display: flex; gap: 6px; justify-content: flex-end; }
.ai-usage-row { min-height: 61px; display: grid; grid-template-columns: auto minmax(200px,1.4fr) repeat(3,auto); align-items: center; gap: 13px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.ai-usage-row > div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ai-usage-row strong { color: #314359; font-size: 9px; }
.ai-usage-row small,.ai-usage-row > span:not(.post-status) { color: #8997a7; font-size: 8px; white-space: nowrap; }
.ai-usage-row em { grid-column: 2/-1; color: #b64e44; font-size: 8px; font-style: normal; }
#clear-key-field[hidden] { display: none !important; }

@media (max-width:1200px) { .site-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .social-grid,.ai-provider-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .settings-form { grid-template-columns: repeat(2,minmax(0,1fr)); } .ai-model-row { grid-template-columns: minmax(170px,1fr) repeat(2,auto); } .ai-model-row > div:last-child { grid-column: 2/-1; } .ai-role-grid { grid-template-columns: 1fr; } }
@media (max-width:1050px) { .metric-grid { grid-template-columns: repeat(2,1fr); } .compact-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); } .bottom-grid,.automation-layout,.security-settings-grid { grid-template-columns: 1fr; } .credential-fields { grid-template-columns: 1fr; } .ai-settings-card { grid-template-columns: 1fr; } .management-row { grid-template-columns: 42px 1fr auto; } .management-row .row-actions { grid-column: 2/-1; justify-content: flex-start; } }
@media (max-width:800px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-story { min-height: 46vh; padding: 30px; }
  .login-copy { padding: 70px 0 45px; }
  .login-copy h1 { font-size: clamp(40px,11vw,62px); }
  .login-copy > p:not(.eyebrow) { font-size: 14px; }
  .login-foot { display: none; }
  .login-panel { padding: 30px 18px 55px; }
  .login-card { padding: 30px 24px; }
  .app-shell { display: block; }
  .sidebar { position: fixed; left: 0; transform: translateX(-105%); width: 245px; transition: transform .22s ease; box-shadow: 15px 0 60px rgba(3,12,22,.3); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop { position: fixed; inset: 0; z-index: 15; background: rgba(3,11,20,.55); backdrop-filter: blur(2px); }
  .sidebar-backdrop.visible { display: block; }
  .menu-button { display: block; }
  .search-box { width: min(350px,62vw); }
  .site-grid { grid-template-columns: 1fr; }
  .social-grid { grid-template-columns: 1fr; }
  .quick-management,.ai-provider-grid { grid-template-columns: 1fr; }
  .ai-model-row,.ai-usage-row { grid-template-columns: 1fr 1fr; }
  .ai-model-row > div:first-child,.ai-usage-row > div { grid-column: 1/-1; }
  .ai-model-row > div:last-child,.ai-usage-row em { grid-column: 1/-1; justify-content: flex-start; }
}
@media (max-width:560px) {
  .main-content { padding: 0 17px; }
  .topbar { height: 66px; gap: 12px; }
  .search-box { flex: 1; width: auto; }
  .search-box kbd,.live-clock { display: none; }
  .hero-section { align-items: flex-start; padding-top: 34px; }
  .hero-section > div > p:last-child { max-width: 260px; }
  .refresh-button { width: 38px; padding: 0; font-size: 0; }
  .refresh-button span { margin: 0; font-size: 15px; }
  .metric-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .metric-card { min-height: 104px; padding: 15px; gap: 10px; }
  .metric-icon { width: 34px; height: 34px; }
  .metric-card strong { font-size: 18px; }
  .metric-card p { display: none; }
  .site-card { padding: 19px; }
  .site-card-foot { left: 19px; right: 19px; }
  .site-description { max-width: 100%; }
  .site-status { font-size: 0; padding: 8px; }
  .site-status i { width: 7px; height: 7px; }
  .login-features { display: grid; gap: 12px; }
  .login-copy { padding-bottom: 20px; }
  .credentials-card { padding: 20px; }
  .credentials-heading { display: block; }
  .credentials-heading > strong { margin-top: 14px; }
  .credential-list label > div { flex-wrap: wrap; }
  .management-heading { align-items: flex-start; gap: 14px; }
  .management-row { grid-template-columns: 38px 1fr; }
  .management-row > .connection-pill { grid-column: 2; justify-self: start; }
  .management-row .row-actions { grid-column: 1/-1; }
  .info-strip { display: block; }
  .info-strip strong { display: block; margin-bottom: 4px; }
  .settings-form,.form-grid { grid-template-columns: 1fr; }
  .form-grid .wide,.form-grid fieldset { grid-column: 1; }
  .ai-settings-card { padding: 19px; }
  .control-dialog form { padding: 18px; }
  .compact-metrics { grid-template-columns: 1fr; }
  .hero-actions { width: 100%; }
  .hero-actions > * { flex: 1; }
  .openai-onboarding { align-items: flex-start; flex-direction: column; }
  .ai-routing-form { grid-template-columns: 1fr; }
  .ai-role-grid article { grid-template-columns: 1fr 1fr; }
  .ai-role-grid article > div,.ai-role-grid article > i { grid-column: 1/-1; }
  .ai-role-grid article > i { justify-self: start; }
  .fallback-row,.publish-readiness { grid-template-columns: 1fr; }
  .ai-provider-card header { grid-template-columns: 40px 1fr; }
  .ai-provider-card header .connection-pill { grid-column: 2; justify-self: start; }
  .ai-model-row,.ai-usage-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* 2026 control-center interface refresh */
:root {
  --ink: #111d2d;
  --muted: #68798e;
  --line: #e3e9f0;
  --surface: #f3f6fa;
  --navy: #07111f;
  --navy-2: #10243a;
  --orange: #ff7a35;
  --orange-soft: #fff0e7;
  --green: #10a978;
  --shadow: 0 22px 60px rgba(20,36,55,.10);
}
.dashboard-page { background: radial-gradient(circle at 90% 0,rgba(255,122,53,.055),transparent 28%),var(--surface); }
.dashboard-page .app-shell { grid-template-columns: 270px minmax(0,1fr); }
.dashboard-page .sidebar { padding: 30px 22px 24px; background: linear-gradient(180deg,#07111f 0%,#091727 55%,#07111f 100%); box-shadow: inset -1px 0 rgba(255,255,255,.04); }
.dashboard-page .sidebar::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 10% 8%,rgba(255,122,53,.12),transparent 26%); }
.dashboard-page .sidebar > * { position: relative; }
.dashboard-page .brand-mark { width: 44px; height: 44px; border-radius: 14px; font-size: 13px; }
.dashboard-page .brand strong { font-size: 15px; }
.dashboard-page .brand small { font-size: 9px; }
.dashboard-page .main-nav p { margin-top: 27px; font-size: 9px; }
.dashboard-page .main-nav a { min-height: 48px; padding: 0 14px; font-size: 13px; border-radius: 12px; }
.dashboard-page .main-nav a.active { background: linear-gradient(90deg,rgba(255,122,53,.16),rgba(255,122,53,.055)); box-shadow: inset 3px 0 var(--orange); }
.dashboard-page .sidebar-status strong { font-size: 11px; }
.dashboard-page .sidebar-status small,.dashboard-page .logout-button { font-size: 10px; }
.dashboard-page .main-content { padding: 0 clamp(25px,3.7vw,68px); background: transparent; }
.dashboard-page .topbar { position: sticky; top: 0; z-index: 12; height: 80px; margin: 0 calc(clamp(25px,3.7vw,68px) * -1); padding: 0 clamp(25px,3.7vw,68px); background: rgba(243,246,250,.86); backdrop-filter: blur(18px); }
.topbar-context { display: flex; flex-direction: column; gap: 4px; margin-right: auto; }
.topbar-context small { color: #9aa7b5; font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.topbar-context strong { color: #26384d; font-size: 13px; }
.dashboard-page .search-box { height: 44px; border-radius: 12px; box-shadow: 0 5px 20px rgba(24,41,61,.04); }
.dashboard-page .search-box input { font-size: 12px; }
.dashboard-page .live-clock span { font-size: 13px; }
.dashboard-page .live-clock small { font-size: 9px; }
.dashboard-page .admin-avatar { width: 42px; height: 42px; border-radius: 13px; font-size: 11px; box-shadow: 0 8px 20px rgba(10,26,44,.16); }

.system-banner { min-height: 44px; display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 9px; margin-top: 20px; padding: 9px 12px; border: 1px solid #dce5ee; border-radius: 12px; color: #65778b; background: rgba(255,255,255,.86); box-shadow: 0 8px 26px rgba(20,36,55,.04); }
.system-banner-dot { width: 9px; height: 9px; border-radius: 50%; background: #e0a83d; box-shadow: 0 0 0 5px rgba(224,168,61,.1); }
.system-banner strong { color: #34475d; font-size: 11px; }
.system-banner small { font-size: 10px; }
.system-banner button { min-height: 30px; padding: 0 10px; border: 1px solid #dfe6ed; border-radius: 8px; color: #52657a; background: #fff; font-size: 9px; font-weight: 800; cursor: pointer; }
.system-banner.online { border-color: #cceadf; background: #f3fbf8; }
.system-banner.online .system-banner-dot { background: var(--green); box-shadow: 0 0 0 5px rgba(16,169,120,.1); }
.system-banner.warning { border-color: #f0dfb9; background: #fffaf0; }
.system-banner.offline { border-color: #f0d0cc; background: #fff5f3; }
.system-banner.offline .system-banner-dot { background: #d65649; box-shadow: 0 0 0 5px rgba(214,86,73,.1); }

.hero-command { position: relative; min-height: 310px; align-items: stretch; margin-top: 22px; padding: clamp(32px,4.5vw,58px); border-radius: 26px; color: #fff; background: linear-gradient(135deg,#081522 0%,#10263c 68%,#14314c 100%); box-shadow: 0 28px 70px rgba(7,21,35,.18); overflow: hidden; }
.hero-command::before,.hero-command::after { content: ""; position: absolute; pointer-events: none; border-radius: 50%; }
.hero-command::before { width: 430px; height: 430px; right: -135px; top: -240px; border: 1px solid rgba(255,255,255,.09); box-shadow: 0 0 0 65px rgba(255,255,255,.018),0 0 0 130px rgba(255,255,255,.012); }
.hero-command::after { width: 360px; height: 360px; left: -180px; bottom: -260px; background: radial-gradient(circle,rgba(255,122,53,.22),transparent 66%); }
.hero-copy { position: relative; z-index: 1; max-width: 780px; align-self: center; }
.hero-command .eyebrow { margin-bottom: 18px; color: #ff9c64; font-size: 9px; }
.hero-command h1 { max-width: 770px; color: #fff; font-size: clamp(34px,4vw,56px); line-height: 1.04; letter-spacing: -.052em; }
.hero-command h1 em { display: block; margin-top: 6px; color: #91a5ba; font-style: normal; font-weight: 520; }
.hero-command .hero-copy > p:last-of-type { max-width: 690px; margin-top: 18px; color: #9fb0c2; font-size: 14px; line-height: 1.7; }
.hero-actions { display: flex; align-items: center; gap: 12px; margin-top: 28px; }
.refresh-button.primary-refresh,.hero-link { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 16px; border: 0; border-radius: 11px; color: #fff; background: linear-gradient(135deg,#ff914c,#f56925); box-shadow: 0 12px 26px rgba(245,105,37,.24); font-size: 11px; font-weight: 800; }
.hero-link { color: #c4d0dc; background: rgba(255,255,255,.07); box-shadow: none; }
.hero-link:hover { color: #fff; background: rgba(255,255,255,.11); }
.hero-link span { margin-left: 10px; color: #ff9a60; }
.hero-system-card { position: relative; z-index: 1; width: min(305px,35%); align-self: center; padding: 22px; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: rgba(255,255,255,.055); backdrop-filter: blur(10px); }
.hero-system-head { display: flex; align-items: center; gap: 12px; padding-bottom: 17px; border-bottom: 1px solid rgba(255,255,255,.08); }
.hero-system-head > div { display: flex; flex-direction: column; gap: 3px; }
.hero-system-head small { color: #71869a; font-size: 8px; font-weight: 900; letter-spacing: .14em; }
.hero-system-head strong { color: #f1f5f8; font-size: 13px; }
.pulse-ring { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(16,169,120,.11); }
.pulse-ring i { width: 10px; height: 10px; border-radius: 50%; background: #35d0a0; box-shadow: 0 0 0 5px rgba(53,208,160,.1); }
.hero-system-card dl { margin: 14px 0 0; }
.hero-system-card dl div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; }
.hero-system-card dt { color: #8195aa; font-size: 10px; }
.hero-system-card dd { margin: 0; color: #d6e0e9; font-size: 10px; font-weight: 750; }

.dashboard-page .metric-grid { gap: 16px; margin-top: 20px; }
.dashboard-page .metric-card { min-height: 128px; padding: 23px; border-radius: 17px; box-shadow: 0 8px 28px rgba(27,46,67,.04); transition: transform .2s ease,box-shadow .2s ease; }
.dashboard-page .metric-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.dashboard-page .metric-icon { width: 44px; height: 44px; border-radius: 13px; }
.dashboard-page .metric-card small { font-size: 8px; }
.dashboard-page .metric-card strong { font-size: 25px; }
.dashboard-page .metric-card p { font-size: 9px; }
.quick-management { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-top: 16px; }
.quick-management > a { min-height: 105px; padding: 20px; border-radius: 16px; }
.quick-management strong { font-size: 12px; }
.quick-management small { font-size: 9px; line-height: 1.5; }
.dashboard-page .sites-section { padding-top: 52px; }
.dashboard-page .section-heading p,.dashboard-page .security-card p { font-size: 8px; }
.dashboard-page .section-heading h2,.dashboard-page .security-card h2 { font-size: 22px; }
.dashboard-page .section-heading > span { font-size: 10px; }
.dashboard-page .site-card { min-height: 310px; padding: 26px; border-radius: 19px; }
.dashboard-page .site-identity h3 { font-size: 17px; }
.dashboard-page .site-identity a,.dashboard-page .site-status { font-size: 9px; }
.dashboard-page .site-description { margin-top: 27px; color: #5f7186; font-size: 11px; }
.dashboard-page .section-tags span,.dashboard-page .site-card-foot small,.dashboard-page .panel-button { font-size: 9px; }
.dashboard-page .site-card-foot { left: 26px; right: 26px; }
.load-error { display: flex; grid-column: 1/-1; flex-direction: column; align-items: center; gap: 8px; }
.load-error strong { color: #40546a; font-size: 13px; }
.load-error span { font-size: 10px; }
.load-error button { margin-top: 6px; min-height: 35px; padding: 0 12px; border: 0; border-radius: 9px; color: #fff; background: var(--navy-2); font-size: 9px; font-weight: 800; cursor: pointer; }
.dashboard-page .activity-card,.dashboard-page .security-card { min-height: 205px; padding: 26px; border-radius: 18px; }
.security-card a { display: inline-flex; margin-top: 14px; color: #ff9a60; font-size: 10px; font-weight: 750; }
.dashboard-page .activity-empty p,.dashboard-page .activity-row strong { font-size: 10px; }
.dashboard-page .activity-row small,.dashboard-page .activity-row time { font-size: 9px; }

/* Shared management pages: improve readability and interaction targets. */
.dashboard-page .page-hero h1 { font-size: clamp(31px,3.2vw,44px); }
.dashboard-page .page-hero > div > p:last-child { font-size: 13px; line-height: 1.6; }
.dashboard-page .management-heading > div > span { font-size: 10px; }
.dashboard-page .primary-action,.dashboard-page .secondary-action { min-height: 42px; font-size: 10px; }
.dashboard-page .management-row { min-height: 86px; padding: 15px 17px; border-radius: 15px; }
.dashboard-page .management-row strong,.dashboard-page .social-card header strong { font-size: 12px; }
.dashboard-page .management-row small,.dashboard-page .social-card header small,.dashboard-page .connection-pill { font-size: 9px; }
.dashboard-page .row-actions a,.dashboard-page .row-actions button,.dashboard-page .social-card footer a,.dashboard-page .social-card footer button,.dashboard-page .plan-card footer button,.dashboard-page .post-card footer button { min-height: 34px; font-size: 9px; }
.dashboard-page .info-strip,.dashboard-page .social-card p,.dashboard-page .plan-card > p,.dashboard-page .post-card > p { font-size: 10px; }
.dashboard-page .form-grid label > span,.dashboard-page .settings-form label > span { font-size: 9px; }
.dashboard-page .form-grid input,.dashboard-page .form-grid select,.dashboard-page .form-grid textarea,.dashboard-page .settings-form input { min-height: 44px; font-size: 10px; }
.dashboard-page .field-hint,.dashboard-page .dialog-note,.dashboard-page .muted-note { font-size: 9px; }
.dashboard-page .ai-provider-card strong,.dashboard-page .ai-model-row strong,.dashboard-page .ai-usage-row strong { font-size: 11px; }
.dashboard-page .ai-provider-card small,.dashboard-page .ai-model-row small,.dashboard-page .ai-usage-row small { font-size: 9px; }
.system-message-card { max-width: 540px; }
.system-message-card .eyebrow { justify-content: center; margin-top: 24px; margin-bottom: 12px; }
.system-message-actions { display: flex; justify-content: center; gap: 10px; margin: 24px 0 16px; }
.system-message-actions a { display: inline-flex; align-items: center; justify-content: center; }

@media (max-width:1250px) {
  .quick-management { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hero-system-card { width: min(285px,38%); }
}
@media (max-width:900px) {
  .dashboard-page .app-shell { display: block; }
  .dashboard-page .sidebar { width: 270px; }
  .topbar-context { display: none; }
  .system-banner { grid-template-columns: auto 1fr auto; }
  .system-banner small { grid-column: 2; }
  .system-banner button { grid-column: 3; grid-row: 1/3; }
  .hero-command { flex-direction: column; }
  .hero-system-card { width: 100%; }
  .hero-system-card dl { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
  .hero-system-card dl div { flex-direction: column; }
}
@media (max-width:620px) {
  .dashboard-page .main-content { padding: 0 16px; }
  .dashboard-page .topbar { margin: 0 -16px; padding: 0 16px; }
  .dashboard-page .search-box { min-width: 0; }
  .system-banner { margin-top: 14px; }
  .system-banner small { display: none; }
  .system-banner button { grid-row: 1; }
  .hero-command { min-height: 0; margin-top: 14px; padding: 28px 22px; border-radius: 20px; }
  .hero-command h1 { font-size: 35px; }
  .hero-command .hero-copy > p:last-of-type { font-size: 12px; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .refresh-button.primary-refresh { width: 100%; font-size: 10px; }
  .hero-system-card dl { grid-template-columns: 1fr 1fr; }
  .hero-system-card dl div:last-child { grid-column: 1/-1; }
  .quick-management { grid-template-columns: 1fr; }
  .dashboard-page .metric-card { min-height: 115px; padding: 17px; }
  .dashboard-page .metric-card p { display: block; font-size: 8px; }
  .dashboard-page .site-card { min-height: 310px; }
}