:root { --blue:#1265e6; --blue-dark:#0a51c6; --ink:#132038; --muted:#657087; --border:#dce2eb; --soft:#f6f8fb; --green:#159447; }
* { box-sizing:border-box; }
html,body { margin:0; background:#fff; color:var(--ink); font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.shell { width:min(1370px,calc(100% - 64px)); margin:0 auto; }
.topbar { height:64px; border-bottom:1px solid var(--border); display:flex; align-items:center; }
.topbar-inner { display:flex; align-items:center; gap:22px; }
.brand { font-size:20px; font-weight:750; letter-spacing:-.35px; text-decoration:none; }
.divider { width:1px; height:28px; background:var(--border); }
.api-status { display:flex; align-items:center; gap:9px; color:var(--green); font-size:13px; font-weight:600; }
.api-status i { width:9px; height:9px; background:var(--green); border-radius:50%; box-shadow:0 0 0 4px #e1f5e8; }
.page { padding:34px 0 60px; }.page-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
h1 { margin:0; font-size:31px; line-height:1.15; letter-spacing:-.7px; }.page-heading p { margin:7px 0 0; color:var(--muted); }.total-top { color:var(--muted); font-size:13px; }
.filters { display:flex; align-items:center; gap:12px; margin:25px 0 19px; }
.search-field,.select-field { height:48px; border:1px solid #cfd7e3; border-radius:7px; display:flex; align-items:center; background:#fff; }.search-field { flex:1; min-width:240px; }.select-field { width:285px; }
.search-field:focus-within,.select-field:focus-within { border-color:var(--blue); box-shadow:0 0 0 3px #e5efff; }
.search-field svg,.select-field svg { flex:none; width:20px; margin-left:15px; fill:none; stroke:var(--muted); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.search-field input,.select-field select { width:100%; height:100%; border:0; outline:0; background:transparent; color:var(--ink); padding:0 14px; font:500 14px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }.search-field input::placeholder { color:#858fa1; }
.search-button,.clear-button { height:48px; border-radius:7px; padding:0 19px; display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; text-decoration:none; cursor:pointer; }
.search-button { border:1px solid var(--blue); background:var(--blue); color:#fff; }.search-button:hover { background:var(--blue-dark); }.clear-button { border:1px solid var(--border); color:var(--muted); }
.table-frame { border:1px solid var(--border); border-radius:7px; overflow:hidden; } table { width:100%; border-collapse:collapse; table-layout:fixed; }
th { height:44px; background:#fbfcfd; color:#303b50; font-size:12px; font-weight:750; text-align:left; } th,td { padding:10px 14px; border-bottom:1px solid var(--border); vertical-align:middle; }
th:nth-child(1),td:nth-child(1) { width:110px; } th:nth-child(2),td:nth-child(2) { width:25%; } th:nth-child(3),td:nth-child(3) { width:155px; } th:nth-child(5),td:nth-child(5) { width:122px; }
tbody tr:last-child td { border-bottom:0; } tbody tr { transition:background .15s; } tbody tr:hover { background:#f9fbfe; }
.post-image,.image-empty { display:block; width:76px; height:58px; border-radius:6px; }.post-image { object-fit:cover; background:var(--soft); }
.image-empty { display:grid; place-items:center; background:var(--soft); color:#98a3b6; }.image-empty svg { width:27px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.group-name,.author,time strong,time span { display:block; }.group-name { font-size:14px; }.author { margin-top:2px; color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
time strong { font-size:13px; font-weight:600; } time span { color:var(--muted); font-size:12px; }
.excerpt { margin:0; display:-webkit-box; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; color:#354159; font-size:13px; line-height:1.55; }
.action-cell { text-align:right; }.open-button { display:inline-flex; align-items:center; gap:8px; background:var(--blue); color:#fff; border-radius:6px; padding:9px 13px; font-size:13px; font-weight:700; text-decoration:none; }.open-button:hover { background:var(--blue-dark); }.open-button svg { width:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.table-footer { min-height:58px; display:flex; align-items:center; justify-content:space-between; gap:20px; color:var(--muted); font-size:12px; }.table-footer p { margin:0; }.table-footer strong { color:var(--ink); }
.pagination { display:flex; gap:6px; }.pagination a,.pagination span { min-width:34px; height:34px; border:1px solid var(--border); border-radius:6px; display:grid; place-items:center; padding:0 8px; text-decoration:none; background:#fff; color:var(--ink); }.pagination a:hover { border-color:var(--blue); color:var(--blue); }.pagination .current { background:var(--blue); border-color:var(--blue); color:#fff; }.pagination [aria-disabled=true] { color:#a6afbd; background:var(--soft); }.pagination .dots { border-color:transparent; }
.empty-state { min-height:245px; border:1px dashed #c7d0dc; display:flex; align-items:center; justify-content:center; gap:22px; padding:34px; }.empty-icon { width:68px; height:68px; border-radius:50%; display:grid; place-items:center; background:var(--soft); color:#657087; }.empty-icon svg { width:34px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }.empty-state h2 { margin:0; font-size:18px; }.empty-state p { margin:5px 0 13px; color:var(--muted); }.empty-state a { color:var(--blue); text-decoration:none; font-weight:700; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
@media (max-width:900px) { html,body { max-width:100%; overflow-x:hidden; }.shell { width:min(calc(100% - 32px),1370px); }.filters { flex-wrap:wrap; }.select-field { width:calc(100% - 180px); }.table-frame { max-width:100%; overflow:auto; overscroll-behavior-inline:contain; } table { min-width:860px; }.total-top { display:none; } }
@media (max-width:600px) { .topbar { height:58px; }.page { padding-top:25px; }.shell { width:calc(100% - 24px); } h1 { font-size:27px; }.page-heading p { font-size:13px; }.filters { gap:9px; }.search-field,.select-field { width:100%; flex-basis:100%; }.search-button,.clear-button { flex:1; }.table-footer { align-items:flex-start; flex-direction:column; padding-top:14px; }.pagination { max-width:100%; overflow:auto; }.empty-state { min-height:280px; flex-direction:column; text-align:center; } }
@media (prefers-reduced-motion:reduce) { * { transition:none!important; } }

/* Authenticated navigation and shared controls */
.topbar-inner .brand { color:var(--ink); }
.main-nav { align-self:stretch; display:flex; align-items:center; gap:26px; margin-left:24px; }
.main-nav a { height:100%; display:flex; align-items:center; position:relative; color:#435069; font-size:14px; font-weight:650; text-decoration:none; }
.main-nav a.active { color:var(--blue); }
.main-nav a.active::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--blue); }
.account-nav { margin-left:auto; display:flex; align-items:center; gap:20px; color:#425069; font-size:13px; }
.account-nav form,.row-actions form { margin:0; }
.account-nav button { border:0; background:none; color:var(--ink); cursor:pointer; font:650 13px/1 inherit; padding:8px 0; }
.heading-actions { display:flex; align-items:center; gap:18px; }
.primary-button,.secondary-button { min-height:42px; padding:0 17px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; border:1px solid transparent; font:700 13px/1 inherit; text-decoration:none; cursor:pointer; }
.primary-button { color:#fff; background:var(--blue); }.primary-button:hover { background:var(--blue-dark); }.primary-button.wide { width:100%; min-height:50px; }
.secondary-button { color:var(--ink); background:#fff; border-color:var(--border); }
.notice,.form-alert { margin-top:16px; padding:11px 14px; border-radius:6px; font-size:13px; }.notice.success,.form-alert.success { background:#eaf8ef; color:#13783c; border:1px solid #c9ebd5; }.notice.error { background:#fff0f0; color:#b42318; }
.server-status { margin-left:auto; color:#718099; font-size:13px; display:flex; align-items:center; gap:8px; }.server-status i { width:8px; height:8px; border-radius:50%; background:#27b55f; }

/* Login */
.login-page { background:#fafcff; min-height:100vh; }.login-main { min-height:calc(100vh - 64px); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px 20px 70px; }
.login-panel { width:min(440px,100%); padding:42px 42px 38px; border:1px solid var(--border); border-radius:8px; background:#fff; box-shadow:0 12px 35px rgba(26,43,70,.06); }
.login-heading { text-align:center; margin-bottom:31px; }.login-heading h1 { font-size:31px; }.login-heading p { color:var(--muted); margin:7px 0 0; }
.login-panel .form-field { margin-bottom:20px; }.check-field { display:flex; align-items:center; gap:9px; font-size:13px; margin:4px 0 26px; }.check-field input { width:17px; height:17px; accent-color:var(--blue); }
.login-footer { color:#718099; font-size:13px; margin:46px 0 0; }

/* Forms */
.entity-form { margin-top:27px; border:1px solid var(--border); border-radius:8px; background:#fff; padding:30px; }.entity-form.narrow { max-width:760px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px 26px; }.form-grid.single { grid-template-columns:1fr; }.form-field { display:flex; flex-direction:column; gap:7px; }.form-field.full,.current-image.full { grid-column:1 / -1; }
.form-field > span { color:#28354d; font-size:13px; font-weight:700; }.form-field input,.form-field select,.form-field textarea { width:100%; border:1px solid #cfd7e3; border-radius:6px; background:#fff; color:var(--ink); padding:11px 13px; font:14px/1.45 inherit; outline:none; }.form-field input,.form-field select { min-height:45px; }.form-field textarea { resize:vertical; }
.form-field input:focus,.form-field select:focus,.form-field textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px #e5efff; }.form-field small { color:var(--muted); font-size:12px; }.form-field .field-error { color:#bd2727; }
.form-actions { border-top:1px solid var(--border); margin:30px -30px -30px; padding:20px 30px; display:flex; justify-content:flex-end; gap:10px; }.current-image { display:flex; align-items:center; gap:16px; }.current-image img { width:132px; height:88px; object-fit:cover; border-radius:6px; }.current-image .check-field { margin:0; }

/* CRUD tables */
.filters.compact { max-width:560px; }.row-actions { display:flex; align-items:center; justify-content:flex-end; gap:11px; flex-wrap:wrap; }.text-action,.danger-action { border:0; background:none; padding:5px 0; font:650 12px/1 inherit; cursor:pointer; text-decoration:none; }.text-action { color:var(--blue); }.danger-action { color:#d22929; }
.posts-table th:nth-child(5),.posts-table td:nth-child(5) { width:235px; }.users-table { table-layout:auto; }.users-table th:nth-child(n),.users-table td:nth-child(n) { width:auto; }.users-table th:last-child,.users-table td:last-child { width:150px; }.role-badge { display:inline-flex; border-radius:5px; padding:4px 8px; font-size:12px; font-weight:700; }.role-badge.admin { color:#11753a; background:#e5f6eb; }.role-badge.editor { color:#145bc1; background:#e9f2ff; }
.token-reveal { margin:22px 0 0; padding:16px 18px; border:1px solid #b9d2f7; border-radius:7px; background:#f2f7ff; display:flex; align-items:center; justify-content:space-between; gap:24px; }.token-reveal strong { font-size:14px; }.token-reveal p { margin:3px 0 0; color:var(--muted); font-size:12px; }.token-reveal code { max-width:52%; overflow-wrap:anywhere; padding:10px 12px; border:1px solid #c9d9ef; border-radius:5px; background:#fff; color:#143d79; font-size:12px; user-select:all; }.token-hint { display:block; font:650 12px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace; }.token-hint + small { display:block; margin-top:3px; color:var(--muted); font-size:11px; }

/* Live updates and push messages */
.live-toolbar { min-height:42px; margin:19px 0 -11px; display:flex; align-items:center; justify-content:space-between; gap:18px; }.live-state { display:flex; align-items:center; gap:9px; color:var(--green); font-size:12px; font-weight:700; }.live-state i { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px #e1f5e8; animation:live-pulse 2s ease-in-out infinite; }.live-error .live-state { color:#b42318; }.live-error .live-state i { background:#d34235; box-shadow:0 0 0 4px #fde7e4; animation:none; }.notification-button { border:0; background:none; color:var(--blue); padding:6px 0; font:700 12px/1 inherit; cursor:pointer; }.notification-button:disabled { color:var(--muted); cursor:default; }.push-messages { position:fixed; z-index:30; right:22px; bottom:22px; width:min(430px,calc(100% - 28px)); display:grid; gap:10px; pointer-events:none; }.push-message { pointer-events:auto; padding:16px 17px; border:1px solid #bcd1f1; border-left:4px solid var(--blue); border-radius:8px; background:#fff; box-shadow:0 18px 48px rgba(25,45,76,.18); animation:push-in .24s ease-out; }.push-message-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }.push-message-heading strong { font-size:14px; }.push-message-heading button { border:0; background:none; color:var(--muted); font-size:22px; line-height:16px; cursor:pointer; }.push-message p { max-height:132px; overflow:auto; margin:8px 0; color:#303d54; font-size:13px; white-space:pre-wrap; }.push-message span { display:block; color:var(--muted); font-size:11px; }.push-message a { display:inline-flex; margin-top:9px; color:var(--blue); font-size:12px; font-weight:750; text-decoration:none; }
@keyframes live-pulse { 50% { opacity:.45; transform:scale(.8); } }
@keyframes push-in { from { opacity:0; transform:translateY(12px); } }

@media (max-width:900px) { .account-nav span { display:none; }.main-nav { margin-left:8px; gap:16px; }.posts-table { min-width:1040px; }.users-table { min-width:760px; } }
@media (max-width:600px) { .main-nav { order:3; width:100%; height:42px; margin:0; }.topbar { height:auto; }.topbar-inner { min-height:58px; flex-wrap:wrap; }.account-nav { margin-left:auto; }.main-nav a { height:42px; }.login-main { min-height:calc(100vh - 58px); justify-content:flex-start; padding-top:55px; }.login-panel { padding:31px 24px; }.login-footer { margin-top:28px; }.form-grid { grid-template-columns:1fr; }.entity-form { padding:22px 16px; }.form-actions { margin:25px -16px -22px; padding:16px; }.heading-actions .total-top { display:none; }.page-heading { align-items:flex-start; }.page-heading > .primary-button { white-space:nowrap; }.token-reveal { align-items:stretch; flex-direction:column; gap:12px; }.token-reveal code { max-width:none; }.live-toolbar { align-items:flex-start; flex-direction:column; gap:5px; margin-bottom:2px; }.push-messages { right:14px; bottom:14px; } }