/* Палитра по SHINING 3D DENTAL VI v2.0: стандартный #0073FF и #000000, вспомогательные #333333 #666666 #999999 #CCCCCC #E6E6E6 #FFFFFF,
   синий 10% и 20% для подложек. Шрифт Roboto: Bold заголовки, Regular текст, Light примечания. */
@import url(fonts.css);
:root{--brand:#0073ff;--brand-dark:#005ccc;--brand-10:rgba(0,115,255,.10);--brand-20:rgba(0,115,255,.20);--black:#000;--g1:#333;--g2:#666;--g3:#999;--g4:#ccc;--g5:#e6e6e6;--white:#fff;
--bg:#f5f5f5;--card:#fff;--text:#333;--head:#000;--muted:#666;--line:#e6e6e6;--danger:#d92d20;--ok:#0f9d58;--warn:#e07b00;--radius:8px;--shadow:0 1px 2px rgba(0,0,0,.04);--side:#0073ff;--side-text:#fff}
html[data-theme=dark]{--bg:#000;--card:#1a1a1a;--text:#e6e6e6;--head:#fff;--muted:#999;--line:#333;--brand-10:rgba(0,115,255,.18);--brand-20:rgba(0,115,255,.30);--shadow:0 1px 2px rgba(0,0,0,.5);--side:#111;--side-text:#e6e6e6;color-scheme:dark}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font:14px/1.5 Roboto,-apple-system,"Segoe UI",Arial,sans-serif;font-weight:400;color:var(--text);background:var(--bg)}
a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}
h1{font-size:24px;font-weight:700;color:var(--head);letter-spacing:-.01em;margin:0 0 18px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
h2{font-size:16px;font-weight:700;color:var(--head);margin:28px 0 10px}h3{font-size:14px;font-weight:700;color:var(--head);margin:14px 0 8px}
.shell{display:flex;min-height:100vh}
.sidebar{width:248px;flex:0 0 248px;background:var(--side);color:var(--side-text);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.sidebar .brand{padding:22px 20px 14px;display:flex;align-items:center;justify-content:space-between}
.sidebar .brand img{height:38px;width:auto;display:block}
.brand-actions{display:flex;align-items:center;gap:8px}
.mode-btn-top{display:none}
.sidebar .cab{padding:0 20px 14px;font-size:11px;font-weight:500;color:rgba(255,255,255,.75);text-transform:uppercase;letter-spacing:.08em}
.sidebar nav{padding:0 12px;display:flex;flex-direction:column;gap:2px;overflow:auto}
.sidebar nav a{display:block;padding:9px 12px;border-radius:6px;color:var(--side-text);font-weight:400}
.sidebar nav a:hover{background:rgba(255,255,255,.14);text-decoration:none}.sidebar nav a.active{background:#fff;color:var(--brand);font-weight:500}
.sidebar nav .sep{margin:12px 12px 4px;font-size:11px;color:rgba(255,255,255,.65);text-transform:uppercase;letter-spacing:.08em;font-weight:500}
.sidebar .side-user{margin-top:auto;padding:14px 20px;border-top:1px solid rgba(255,255,255,.25);font-size:13px}
.sidebar .side-user b{display:block;font-weight:700}.sidebar .side-user span{color:rgba(255,255,255,.75)}
.sidebar .side-user .btn.secondary,.sidebar .theme-btn{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.35)}
.sidebar .side-user .btn.secondary:hover,.sidebar .theme-btn:hover{background:rgba(255,255,255,.22);color:#fff}
.menu-btn{display:none;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;border-radius:6px;width:38px;height:38px;font-size:18px;cursor:pointer}
.content{flex:1;min-width:0;padding:28px 32px 72px;position:relative}
.topbar{display:flex;align-items:center;justify-content:space-between;margin:-6px 0 18px;color:var(--muted);font-size:13px;font-weight:300}
.brand-tri{position:fixed;right:0;bottom:0;width:56px;height:56px;background:var(--brand);clip-path:polygon(100% 0,100% 100%,0 100%);pointer-events:none;z-index:5}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin-bottom:16px;box-shadow:var(--shadow)}
.grid{display:grid;gap:14px}.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.g4{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.stat{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow);color:var(--text);position:relative;overflow:hidden}
.stat::after{content:"";position:absolute;right:0;bottom:0;width:14px;height:14px;background:var(--brand);clip-path:polygon(100% 0,100% 100%,0 100%)}
.stat:hover{text-decoration:none;border-color:var(--brand)}.stat b{display:block;font-size:26px;line-height:1.15;font-weight:700;color:var(--head);letter-spacing:-.02em}.stat span{color:var(--muted);font-size:12.5px;font-weight:300}
table{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-size:13.5px;box-shadow:var(--shadow);margin-bottom:4px}
th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{background:var(--brand-10);font-weight:500;color:var(--head);font-size:12px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
tr:last-child td{border-bottom:0}tbody tr:hover td,tr:hover td{background:var(--brand-10)}
label{display:block;font-size:13px;color:var(--text);margin-bottom:5px;font-weight:500}
input,select,textarea{width:100%;padding:9px 12px;border:1px solid var(--g4);border-radius:6px;font:inherit;background:var(--card);color:var(--text);transition:border-color .15s,box-shadow .15s}
input::placeholder,textarea::placeholder{color:var(--g3);font-weight:300}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-20)}textarea{min-height:84px}
input[type=checkbox],input[type=radio]{width:auto;margin-right:6px}input:disabled{background:var(--g5);color:var(--g2)}
.field{margin-bottom:12px}.hint{font-size:12px;color:var(--muted);margin-top:5px;font-weight:300}.req::after{content:" *";color:var(--danger)}
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:6px;border:1px solid var(--brand);background:var(--brand);color:#fff;font:inherit;font-weight:500;cursor:pointer;line-height:1.2;transition:background .15s,border-color .15s;text-decoration:none}
.btn:hover{background:var(--brand-dark);border-color:var(--brand-dark);text-decoration:none;color:#fff}
.btn.secondary{background:var(--card);color:var(--text);border-color:var(--g4)}.btn.secondary:hover{background:var(--brand-10);color:var(--brand);border-color:var(--brand)}
.btn.danger{background:var(--danger);border-color:var(--danger)}.btn.danger:hover{background:#b42318}
.btn.ok{background:var(--ok);border-color:var(--ok)}.btn.ok:hover{background:#0b7d46}
.btn.sm{padding:6px 10px;font-size:12.5px}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 0}
form.inline{display:inline}
summary{cursor:pointer;color:var(--text);font-weight:500}summary.btn{list-style:none}summary::-webkit-details-marker{display:none}
.alert{padding:11px 14px;border-radius:6px;margin-bottom:14px;border:1px solid;border-left-width:4px;background:var(--card)}
.alert.ok{border-color:var(--line);border-left-color:var(--ok);color:var(--text)}
.alert.err{border-color:var(--line);border-left-color:var(--danger);color:var(--text)}
.alert.warn{border-color:var(--line);border-left-color:var(--brand);color:var(--text);background:var(--brand-10)}.alert ul{margin:4px 0 0 18px;padding:0}
.badge{display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:500;white-space:nowrap;background:var(--g5);color:var(--g1)}
.b-active,.b-confirmed,.b-delivered,.b-sent,.b-approved{background:#e3f4ea;color:#0b7d46}
.b-pending_review,.b-needs_clarification,.b-pending_approval,.b-pending{background:#fff1e0;color:#a35a00}
.b-disputed,.b-rejected,.b-cancelled,.b-expired,.b-disabled,.b-failed{background:#fde8e6;color:#b42318}
.b-awaiting_shipment,.b-in_delivery,.b-reserved,.b-closed_shipped,.b-used{background:var(--brand-20);color:var(--brand-dark)}
html[data-theme=dark] .badge{background:#333;color:#e6e6e6}html[data-theme=dark] .b-active,html[data-theme=dark] .b-confirmed,html[data-theme=dark] .b-delivered,html[data-theme=dark] .b-sent,html[data-theme=dark] .b-approved{background:#0f3d2a;color:#7ee2b0}
html[data-theme=dark] .b-pending_review,html[data-theme=dark] .b-needs_clarification,html[data-theme=dark] .b-pending_approval,html[data-theme=dark] .b-pending{background:#3d2e0f;color:#f5c66b}
html[data-theme=dark] .b-disputed,html[data-theme=dark] .b-rejected,html[data-theme=dark] .b-cancelled,html[data-theme=dark] .b-expired,html[data-theme=dark] .b-disabled,html[data-theme=dark] .b-failed{background:#44191a;color:#ff9a95}
html[data-theme=dark] .b-awaiting_shipment,html[data-theme=dark] .b-in_delivery,html[data-theme=dark] .b-reserved,html[data-theme=dark] .b-closed_shipped,html[data-theme=dark] .b-used{background:var(--brand-20);color:#8ec0ff}
html[data-theme=dark] .guest .logo img,html[data-theme=dark] .sidebar .brand img{content:url(../img/logo-white.png)}
html[data-theme=dark] .sidebar nav a.active{background:var(--brand);color:#fff}html[data-theme=dark] .sidebar .cab,html[data-theme=dark] .sidebar nav .sep,html[data-theme=dark] .sidebar .side-user span{color:#999}
html[data-theme=dark] input,html[data-theme=dark] select,html[data-theme=dark] textarea{border-color:#444}html[data-theme=dark] input:disabled{background:#222;color:#999}
html[data-theme=dark] .pagination li a,html[data-theme=dark] .pagination li span{background:#1a1a1a;color:#e6e6e6}
.muted{color:var(--muted)}.small{font-size:12.5px}.nowrap{white-space:nowrap}.right{text-align:right}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:end;margin-bottom:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow)}
.filters .field{margin:0;min-width:150px;flex:1 1 150px}.filters .field.wide{flex:2 1 260px}.filters .btn{white-space:nowrap}
dl.kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:0}dl.kv dt{color:var(--muted);font-size:13px;font-weight:300}dl.kv dd{margin:0}
.pagination{display:flex;gap:6px;list-style:none;padding:0;margin:14px 0}.pagination li a,.pagination li span{display:block;padding:7px 12px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--text)}
.check-ok{color:var(--ok);font-weight:700}.check-bad{color:var(--danger);font-weight:700}
.guest{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--bg);position:relative}
.guest .box{width:100%;max-width:420px}.guest .logo{text-align:center;margin-bottom:18px}.guest .logo img{height:46px}
.guest h1{font-size:18px;justify-content:center;margin-bottom:14px}.guest .sub{text-align:center;color:var(--muted);font-weight:300;margin:-6px 0 16px}
.guest .brand-tri{width:120px;height:120px}
pre.mail{white-space:pre-wrap;font:12.5px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--bg);padding:10px;border-radius:6px;border:1px solid var(--line)}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.events td{max-width:340px;overflow-wrap:anywhere}
.sidebar .version{margin-top:8px;font-size:12px}.sidebar .version a{color:rgba(255,255,255,.75)}html[data-theme=dark] .sidebar .version a{color:#999}
.rights{margin:8px 0 0;padding-left:18px;list-style:none}.rights li{margin:4px 0}.rights li.muted{color:var(--muted)}
.perm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:6px 18px;margin:8px 0 14px}.perm-grid label{font-weight:400;display:flex;gap:8px;align-items:flex-start}.perm-grid input{margin-top:3px}.role-card{margin-bottom:14px}
.perm-table{width:100%;border-collapse:collapse}.perm-table td{padding:5px 8px;border-bottom:1px solid var(--line);vertical-align:middle}.perm-table tr.changed td{background:var(--brand-10)}
.steps ol{padding-left:20px;margin:10px 0}.steps li{margin:8px 0}
.changelog h2{margin-top:18px}.changelog ul{padding-left:20px}.changelog li{margin:4px 0}
.theme-btn{border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:6px;padding:6px 10px;font:inherit;font-size:12.5px;cursor:pointer}
.cardlist{display:none}.cardlist .item{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;margin-bottom:10px;box-shadow:var(--shadow)}
.cardlist .item .t{display:flex;justify-content:space-between;gap:8px;align-items:flex-start;margin-bottom:4px}.cardlist .item .t b{font-size:15px;font-weight:700;color:var(--head)}
.cardlist .item .m{color:var(--muted);font-size:12.5px;font-weight:300}.cardlist .item .a{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap}
.field-error{color:var(--danger);font-size:12.5px;margin-top:4px}input[aria-invalid=true],select[aria-invalid=true]{border-color:var(--danger)}
.simple-home{display:none}
@media (max-width:900px){
 .shell{display:block}.sidebar{position:sticky;top:0;height:auto;width:auto;flex:none;z-index:10}
 .sidebar .brand{padding:12px 16px}.sidebar .brand img{height:30px}.menu-btn{display:inline-flex;align-items:center;justify-content:center}
 .mode-btn-top{display:inline-flex;align-items:center;white-space:nowrap;padding:6px 10px;font:inherit;font-size:11px;border-radius:6px;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;cursor:pointer}
 .sidebar .cab,.sidebar nav,.sidebar .side-user{display:none}.sidebar.open nav{display:flex}.sidebar.open .cab,.sidebar.open .side-user{display:block}
 .sidebar nav{padding:6px 12px 12px}.content{padding:18px 14px 72px}.topbar{display:none}h1{font-size:20px}
 th,td{padding:8px}dl.kv{grid-template-columns:1fr;gap:2px}dl.kv dt{margin-top:6px}
 table{display:block;overflow-x:auto;white-space:nowrap;max-width:100%}table.wrap-cells{white-space:normal}
 .cardlist{display:block}.desktop-only{display:none!important}.filters .field{min-width:0;flex:1 1 45%}.actions .btn{flex:1 1 auto;justify-content:center}
 .grid.g2>*{grid-column:auto}form.card[style*="span 2"]{grid-column:auto!important}.brand-tri{width:40px;height:40px}.guest .brand-tri{width:80px;height:80px}
 html[data-mode=simple] .full-only{display:none}
 html[data-mode=simple] .simple-home{display:flex;flex-direction:column;gap:16px;min-height:60vh}
 html[data-mode=simple] .simple-home .simple-btn{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;font-size:22px;font-weight:700;border-radius:16px;line-height:1.3;padding:16px}
}
/* Пункты меню горят, только пока есть что разобрать: «Согласование» красным, «Споры» жёлтым, «Регистрации» на проверке зелёным, «Пользователи» на активации фиолетовым */
.sidebar nav a.attn{font-weight:500;animation:1.8s ease-in-out infinite}
.sidebar nav a.attn-danger{background:var(--danger);animation-name:attn-danger}.sidebar nav a.attn-warn{background:#f5b800;color:#1f1a00;animation-name:attn-warn}.sidebar nav a.attn-ok{background:var(--ok);animation-name:attn-ok}.sidebar nav a.attn-violet{background:#7c3aed;animation-name:attn-violet}
.sidebar nav a.attn.active{background:#fff;animation:none}.sidebar nav a.attn-danger.active{color:var(--danger)}.sidebar nav a.attn-warn.active{color:#8a6100}.sidebar nav a.attn-ok.active{color:#0b7d46}.sidebar nav a.attn-violet.active{color:#5b21b6}
.nav-count{float:right;min-width:20px;text-align:center;background:#fff;border-radius:999px;padding:0 7px;font-size:12px;font-weight:700;line-height:19px}
.attn-danger .nav-count{color:var(--danger)}.attn-warn .nav-count{color:#8a6100}.attn-ok .nav-count{color:#0b7d46}.attn-violet .nav-count{color:#5b21b6}
.sidebar nav a.attn.active .nav-count{color:#fff}.attn-danger.active .nav-count{background:var(--danger)}.attn-warn.active .nav-count{background:#b58a00}.attn-ok.active .nav-count{background:var(--ok)}.attn-violet.active .nav-count{background:#7c3aed}
@keyframes attn-danger{50%{background:#b42318;box-shadow:0 0 10px rgba(217,45,32,.7)}}@keyframes attn-warn{50%{background:#e0a800;box-shadow:0 0 10px rgba(245,184,0,.7)}}@keyframes attn-ok{50%{background:#0b7d46;box-shadow:0 0 10px rgba(15,157,88,.6)}}@keyframes attn-violet{50%{background:#5b21b6;box-shadow:0 0 10px rgba(124,58,237,.6)}}
/* Спокойный пункт: только обычные задачи — зелёная точка у группы и число, без заливки и мигания */
.sidebar nav a.attn.calm{animation:none;background:none}.sidebar nav a.attn.calm.active{background:#fff;color:#0b7d46}
@media (prefers-reduced-motion:reduce){.sidebar nav a.attn{animation:none}}
.stat.attn{border-color:var(--danger)}.stat.attn b{color:var(--danger)}.stat.attn::after{background:var(--danger)}.attn-text{color:var(--danger);font-weight:500}
.stat.attn-warn{border-color:#f5b800}.stat.attn-warn b{color:#8a6100}.stat.attn-warn::after{background:#f5b800}.stat.attn-ok{border-color:var(--ok)}.stat.attn-ok b{color:#0b7d46}.stat.attn-ok::after{background:var(--ok)}.stat.attn-violet{border-color:#7c3aed}.stat.attn-violet b{color:#5b21b6}.stat.attn-violet::after{background:#7c3aed}
/* «Как работать»: инструкция для дилеров из resources/guide/dealer.md */
.guide img{display:block;max-width:100%;height:auto;margin:12px 0 18px;border:1px solid var(--line);border-radius:6px}.guide img[src$="login.png"]{max-width:360px}.guide h1{margin-top:0}.guide table{margin:8px 0 14px}
/* Сворачиваемые группы меню компании. В свёрнутой группе с подсвеченным пунктом у заголовка точка самого срочного цвета */
.nav-group .nav-items{display:flex;flex-direction:column;gap:2px}
.nav-group>summary{list-style:none;cursor:pointer;user-select:none;display:flex;align-items:center}.nav-group>summary::-webkit-details-marker{display:none}
.nav-group>summary.cab{padding:4px 12px 10px}.sidebar.open .nav-group>summary.cab{display:flex}.nav-group>summary:hover{color:#fff}
.nav-group>summary::after{content:"";order:2;margin-left:auto;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.nav-group:not([open])>summary::after{transform:rotate(-45deg)}
.nav-group.current:not([open])>summary,html[data-theme=dark] .sidebar nav .nav-group.current:not([open])>summary{color:#fff;font-weight:700}
.nav-group:not([open]):has(a.attn)>summary::before{content:"";order:1;margin-left:8px;width:8px;height:8px;border-radius:50%;box-shadow:0 0 6px rgba(255,255,255,.6)}
.nav-group:not([open]):has(a.attn-ok)>summary::before{background:#3ddc84}.nav-group:not([open]):has(a.attn-violet)>summary::before{background:#c4a3ff}
.nav-group:not([open]):has(a.attn-warn)>summary::before{background:#f5b800}.nav-group:not([open]):has(a.attn-danger)>summary::before{background:#ff4d4f}
.tabs{display:flex;gap:4px;margin:-6px 0 16px;border-bottom:1px solid var(--line)}.tabs a{padding:8px 16px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;font-weight:500}
.tabs a:hover{text-decoration:none;color:var(--brand)}.tabs a.on{color:var(--brand);border-bottom-color:var(--brand)}

/* Подменю раздела сверху: кнопки в рамке, активная закрашена; группы вкладок («Зарплата», «ГК», «Служебное») отдельными блоками с подписью */
.section-tabs{display:flex;flex-wrap:wrap;gap:10px 16px;margin:0 0 22px}
.tab-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.tab-label{align-self:stretch;display:flex;align-items:center;padding:0 12px 0 10px;margin-right:2px;border-right:1px solid var(--line);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.section-tabs a{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 16px;border-radius:10px;color:var(--text);font-weight:500;white-space:nowrap;transition:background .12s,color .12s}
.section-tabs a:hover{background:var(--brand-10);color:var(--brand);text-decoration:none}
.section-tabs a.on{background:var(--brand);color:#fff;box-shadow:0 2px 8px var(--brand-20)}
.tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--ok);color:#fff;font-size:11px;font-weight:600}
.tab-count.tone-danger{background:var(--danger)}.tab-count.tone-warn{background:#f5b800;color:#1f1a00}.tab-count.tone-violet{background:#7c3aed}
/* Боковое меню сотрудников: одна ссылка на раздел; точка справа — в разделе есть что разобрать */
.sidebar nav a.nav-top{display:flex;align-items:center;padding:10px 12px;font-weight:500}
.sidebar nav a.nav-top.dot::after{content:"";margin-left:auto;width:9px;height:9px;border-radius:50%;background:#3ddc84;box-shadow:0 0 6px rgba(255,255,255,.6)}
.sidebar nav a.nav-top.dot-warn::after{background:#f5b800}.sidebar nav a.nav-top.dot-danger::after{background:#ff4d4f}.sidebar nav a.nav-top.dot-violet::after{background:#c4a3ff}
.sidebar nav a.nav-top.active.dot::after{box-shadow:none}

/* «Глазами дилера»: панель в боковом меню супер-администратора и полоса-напоминание в режиме просмотра */
.sidebar .viewas{margin:10px 0 0;font-size:12px}.sidebar .viewas summary{display:inline-block;cursor:pointer;padding:6px 12px;border-radius:8px;background:#fff;color:var(--brand);font-weight:600;list-style:none;box-shadow:0 1px 4px rgba(0,0,0,.15)}.sidebar .viewas summary::-webkit-details-marker{display:none}
.sidebar .viewas form{margin-top:6px;display:flex;flex-direction:column;gap:6px}.sidebar .viewas select{width:100%;font-size:12px;padding:6px 8px}
.viewas-btns{display:flex;gap:6px}.viewas-btns button{flex:1;padding:6px 8px;border:0;border-radius:8px;background:#fff;color:var(--brand);font-weight:600;cursor:pointer}.sidebar .viewas small{opacity:.8}
.viewas-banner{position:sticky;top:0;z-index:50;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;margin:0 0 14px;padding:10px 16px;border-radius:12px;background:#7c3aed;color:#fff;box-shadow:0 4px 14px rgba(124,58,237,.35)}
.viewas-banner form{margin:0}.viewas-banner .btn{background:#fff;color:#5b21b6;border-color:#fff}