/* DoBy Admin Workspace — демо-панель. Поверх токенов assets/style.css */
:root { --adm-nav: #0C2233; --adm-nav-2: #12304a; --adm-nav-fg: #C4D2DE; }
body.adm { background: var(--bg-canvas); }
.adm-shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }

/* Sidebar */
.adm-side { background: var(--adm-nav); color: var(--adm-nav-fg); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.adm-brand { padding: 18px 20px 14px; font-size: 21px; font-weight: 800; color: #fff; letter-spacing: -.3px; border-bottom: 1px solid rgba(255,255,255,.08); }
.adm-brand b { color: var(--cta); }
.adm-brand span { display: block; font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--brand-300); margin-top: 2px; }
.adm-nav { padding: 10px 10px 20px; display: flex; flex-direction: column; gap: 2px; }
.adm-nav a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px; color: var(--adm-nav-fg); font-size: 14.5px; font-weight: 500; cursor: pointer; }
.adm-nav a:hover { background: var(--adm-nav-2); color: #fff; text-decoration: none; }
.adm-nav a.on { background: var(--brand); color: #fff; }
.adm-nav a .ic { width: 20px; text-align: center; font-size: 15px; flex-shrink: 0; }
.adm-nav a .cnt { margin-left: auto; background: var(--cta); color: #17110a; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 1px 7px; min-width: 20px; text-align: center; }
.adm-nav a.on .cnt { background: #fff; color: var(--brand); }
.adm-side .who { margin-top: auto; padding: 14px 18px; border-top: 1px solid rgba(255,255,255,.08); font-size: 12.5px; color: var(--brand-300); }
.adm-side .who b { color: #fff; display: block; font-size: 13.5px; }

/* Topbar */
.adm-main { display: flex; flex-direction: column; min-width: 0; }
.adm-top { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); padding: 12px 24px; display: flex; align-items: center; gap: 16px; }
.adm-top h1 { font-size: 19px; margin: 0; font-weight: 700; }
.adm-top .sub { color: var(--fg-2); font-size: 13px; }
.adm-top .sp { flex: 1; }
.adm-top .search { border: 1px solid var(--border); border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 13.5px; width: 210px; max-width: 32vw; }
.adm-top .pill { font-size: 12.5px; color: var(--fg-2); border: 1px solid var(--border); border-radius: 999px; padding: 5px 11px; }
.adm-burger { display: none; border: 1px solid var(--border); background: #fff; border-radius: 8px; width: 38px; height: 34px; font-size: 17px; cursor: pointer; }
.adm-view { padding: 22px 24px 60px; }

/* KPI */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px,1fr)); gap: 12px; margin-bottom: 22px; }
.kpi { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 16px; box-shadow: var(--shadow); }
.kpi .v { font-size: 27px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi .l { font-size: 12.5px; color: var(--fg-2); margin-top: 3px; }
.kpi.alert .v { color: var(--warn); } .kpi.hot .v { color: var(--danger); } .kpi.good .v { color: var(--ok-700); }
.kpi.clickable { cursor: pointer; transition: box-shadow .15s; } .kpi.clickable:hover { box-shadow: 0 4px 18px rgba(15,94,99,.16); }

/* Panels & grid */
.adm-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: start; }
.panel2 { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow); overflow: hidden; }
.panel2 .ph { padding: 13px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
.panel2 .ph h3 { margin: 0; font-size: 15px; } .panel2 .ph .sp { flex: 1; }
.panel2 .pb { padding: 6px 16px 14px; }
.qa { display: flex; flex-wrap: wrap; gap: 8px; }

/* Tables */
.adm-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.adm-table th { text-align: left; color: var(--fg-2); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; padding: 9px 10px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg-surface); }
.adm-table td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.adm-table tr:hover td { background: var(--bg-canvas); }
.thumb { width: 54px; height: 40px; border-radius: 7px; object-fit: cover; display: block; flex-shrink: 0; }
.adm-wrap { overflow-x: auto; }
.tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; align-items: center; }
.tools select, .tools input { font: inherit; font-size: 13.5px; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: #fff; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; }
.seg button { border: 0; background: #fff; font: inherit; font-size: 13px; padding: 7px 12px; cursor: pointer; color: var(--fg-2); border-left: 1px solid var(--border); }
.seg button:first-child { border-left: 0; } .seg button.on { background: var(--brand); color: #fff; }

/* Status pills */
.st { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; display: inline-block; }
.st.moderation { background: var(--warn-100); color: var(--warn); }
.st.published, .st.verified, .st.approved, .st.active { background: var(--ok-100); color: var(--ok-700); }
.st.revision, .st.partner, .st.new { background: var(--info-100); color: var(--info); }
.st.rejected, .st.blocked { background: var(--danger-100); color: var(--danger); }
.st.draft, .st.archived, .st.inactive { background: var(--bg-canvas); color: var(--fg-2); border: 1px solid var(--border); }
.st.dot::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 5px; vertical-align: middle; }

/* Buttons small */
.b { font: inherit; font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: var(--r-sm); border: 1px solid var(--border); background: #fff; color: var(--fg); cursor: pointer; }
.b:hover { background: var(--bg-canvas); }
.b.pri { background: var(--cta); border-color: var(--cta); color: #fff; } .b.pri:hover { background: var(--cta-h); }
.b.ok { background: var(--ok); border-color: var(--ok); color: #fff; } .b.ok:hover { filter: brightness(.94); }
.b.warn { background: var(--warn); border-color: var(--warn); color: #fff; } .b.warn:hover { filter: brightness(.94); }
.b.dng { background: #fff; border-color: var(--danger); color: var(--danger); } .b.dng:hover { background: var(--danger-100); }
.b.xs { padding: 5px 9px; font-size: 12px; }
.b.ghost { border: 0; background: transparent; color: var(--brand); }

/* Partner cards */
.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 14px; }
.pcard { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; }
.pcard .top { display: flex; gap: 12px; align-items: center; }
.pcard .logo { width: 46px; height: 46px; border-radius: 11px; background: var(--brand-50); color: var(--brand); font-weight: 800; font-size: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pcard .nm { font-weight: 700; font-size: 15.5px; } .pcard .meta { font-size: 12.5px; color: var(--fg-2); }
.pcard .row { display: flex; gap: 14px; font-size: 12.5px; color: var(--fg-2); flex-wrap: wrap; }
.pcard .row b { color: var(--fg); }
.pcard .acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

/* Drawer */
.drawer-ov { position: fixed; inset: 0; background: rgba(12,34,51,.5); display: none; z-index: 60; }
.drawer-ov.open { display: block; }
.drawer { position: absolute; top: 0; right: 0; height: 100%; width: min(560px, 96vw); background: var(--bg-surface); box-shadow: -8px 0 40px rgba(0,0,0,.25); overflow-y: auto; padding: 20px 22px 40px; }
.drawer .dclose { position: absolute; top: 14px; right: 16px; border: 0; background: var(--bg-canvas); border-radius: 8px; width: 34px; height: 34px; font-size: 16px; cursor: pointer; }
.drawer h2 { font-size: 20px; margin: 4px 0 4px; padding-right: 40px; }
.drawer .dimg { width: 100%; height: 230px; object-fit: cover; border-radius: var(--r-md); margin: 12px 0; }
.drawer .fr { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: 14px; }
.drawer .fr .l { color: var(--fg-2); } .drawer .fr .v { font-weight: 600; text-align: right; }
.act-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.aibox { background: var(--brand-50); border: 1px solid var(--brand-300); border-radius: var(--r-md); padding: 12px 14px; margin: 12px 0; font-size: 13.5px; }
.aibox .t { font-weight: 700; color: var(--brand); margin-bottom: 6px; display: flex; align-items: center; gap: 7px; }
.aibox ul { margin: 0; padding-left: 18px; } .aibox li { margin: 3px 0; }
.aibox li.warn { color: var(--warn); } .aibox li.bad { color: var(--danger); } .aibox li.ok { color: var(--ok-700); }

/* Log / feed */
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.feed li:last-child { border-bottom: 0; }
.feed .fic { width: 30px; height: 30px; border-radius: 8px; background: var(--bg-canvas); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; }
.feed .ft { color: var(--fg-2); font-size: 12px; margin-left: auto; white-space: nowrap; }

/* Bars (analytics) */
.bars { display: flex; flex-direction: column; gap: 9px; }
.bars .brow { display: grid; grid-template-columns: 130px 1fr 44px; gap: 10px; align-items: center; font-size: 13px; }
.bars .track { background: var(--bg-canvas); border-radius: 6px; height: 12px; overflow: hidden; }
.bars .fill { height: 100%; background: var(--brand); border-radius: 6px; }
.bars .num { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Chat demo */
.chatwrap { display: grid; grid-template-columns: 260px 1fr; gap: 0; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--bg-surface); min-height: 440px; }
.chatlist { border-right: 1px solid var(--border); overflow-y: auto; }
.chatlist .ci { padding: 12px 14px; border-bottom: 1px solid var(--border); cursor: pointer; }
.chatlist .ci:hover, .chatlist .ci.on { background: var(--bg-canvas); }
.chatlist .ci .nm { font-weight: 600; font-size: 14px; } .chatlist .ci .pv { font-size: 12.5px; color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chatbody { display: flex; flex-direction: column; }
.msgs { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.msg { max-width: 74%; padding: 9px 13px; border-radius: 13px; font-size: 13.5px; }
.msg.u { background: var(--bg-canvas); align-self: flex-start; border-bottom-left-radius: 4px; }
.msg.p { background: var(--brand); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.msg .orig { display: block; font-size: 11.5px; opacity: .7; margin-top: 3px; font-style: italic; }
.chatfoot { border-top: 1px solid var(--border); padding: 10px 14px; display: flex; gap: 8px; align-items: center; }

.notice { background: var(--cta-100); border: 1px solid var(--cta); color: #6b4e0e; border-radius: var(--r-md); padding: 11px 14px; font-size: 13.5px; margin-bottom: 16px; }
.sec-title { font-size: 15px; font-weight: 700; margin: 22px 0 12px; }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--fg); color: #fff; padding: 11px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 500; opacity: 0; transition: all .25s; z-index: 90; pointer-events: none; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 960px) {
  .adm-shell { grid-template-columns: 1fr; }
  .adm-side { position: fixed; left: 0; top: 0; width: 250px; z-index: 70; transform: translateX(-100%); transition: transform .2s; }
  .adm-shell.nav-open .adm-side { transform: translateX(0); }
  .adm-burger { display: block; }
  .adm-grid { grid-template-columns: 1fr; }
  .chatwrap { grid-template-columns: 1fr; } .chatlist { max-height: 200px; }
}