/* VENISIA SIGNATURE — scoped, progressive enhancement, RTL */
:root{--vs-ink:#05060a;--vs-panel:#10131c;--vs-elev:#171b27;--vs-gold:#c9a96a;--vs-light:#e8cf8a;--vs-white:#f4f1ea;--vs-muted:#a9b1c3}
body.vs-active{background:radial-gradient(ellipse at 85% 6%,rgba(201,169,106,.10),transparent 40%),linear-gradient(145deg,#05060a,#0a0c12 55%,#090b12);color:var(--vs-white)}
.vs-active .sidebar,.vs-active .finance-app .side{background:linear-gradient(165deg,#11141d,#07090e)!important;box-shadow:-12px 0 55px rgba(0,0,0,.24)}
.vs-active :is(.sidebar nav,.finance-app .side nav) a{position:relative;transition:background .22s,color .22s,transform .22s;border-radius:12px}
.vs-active :is(.sidebar nav,.finance-app .side nav) a:hover,.vs-active :is(.sidebar nav,.finance-app .side nav) a:focus-visible{background:rgba(201,169,106,.13)!important;color:#f6e7b8!important;transform:translateX(-3px)}
.vs-active :is(.sidebar nav,.finance-app .side nav) a.vs-current{box-shadow:inset -3px 0 0 #e8cf8a;background:rgba(201,169,106,.12)}
.vs-active :is(.panel,.card,.stat,.vbc-panel,.finance-app section,.content section){transition:transform .23s ease,box-shadow .23s ease,border-color .23s ease}
@media(hover:hover) and (pointer:fine){.vs-active :is(.panel,.card,.stat,.vbc-panel,.finance-app section,.content section):hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(0,0,0,.27)}}
.vs-active :is(button,.btn,input,select,textarea){transition:border-color .2s,box-shadow .2s,transform .2s}
.vs-active :is(button,.btn):not(:disabled):active{transform:scale(.985)}
.vs-active :is(input,select,textarea):focus-visible{outline:2px solid rgba(232,207,138,.8);outline-offset:2px}
.vs-active .vs-motion-hero{border-radius:20px;padding:16px 18px;margin-bottom:16px;background:linear-gradient(110deg,rgba(201,169,106,.14),rgba(16,19,28,.84) 58%,rgba(232,207,138,.04));border:1px solid rgba(201,169,106,.18);display:flex;align-items:center;justify-content:space-between;gap:14px}
.vs-active .vs-motion-hero strong{font-size:1.06rem;color:var(--vs-light)}.vs-active .vs-motion-hero span{color:var(--vs-muted);font-size:.83rem}
.vs-hero-emblem{flex:none;width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:rgba(232,207,138,.13);border:1px solid rgba(232,207,138,.2)}
.vs-hero-emblem svg{width:25px;height:25px;stroke:#e8cf8a;stroke-width:1.7;fill:none;transition:transform .35s}
.vs-motion-hero:hover .vs-hero-emblem svg{transform:rotate(-10deg) scale(1.12)}
.vs-collapse-toggle,.vs-mobile-toggle{border:1px solid rgba(201,169,106,.35)!important;color:#e8cf8a!important;background:rgba(201,169,106,.09)!important;border-radius:12px!important;padding:8px 11px!important;cursor:pointer}
.vs-active .vs-nav-group{margin-top:8px}
.vs-active .vs-group-btn{display:flex;width:100%;align-items:center;justify-content:space-between;gap:7px;padding:11px 13px;border:0;background:transparent;color:#e8cf8a;text-align:right;font-weight:700;cursor:pointer}
.vs-active .vs-group-body{display:grid;gap:4px;overflow:hidden}.vs-active .vs-group-body[hidden]{display:none}
.vs-active .vs-group-btn svg{width:15px;height:15px;transition:transform .23s}.vs-active .vs-group-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.vs-active .vs-slide-panel{animation:vs-in .26s ease both}@keyframes vs-in{from{opacity:.2;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.vs-active .vs-page-finance .vs-motion-hero{background:linear-gradient(112deg,#192119,#131722 65%,#11141c)}
.vs-active.vs-route-subscribers .vs-motion-hero{background:linear-gradient(110deg,rgba(70,112,133,.19),#11151e 70%)}
.vs-active.vs-route-routers .vs-motion-hero,.vs-active.vs-route-mikrotik .vs-motion-hero{background:linear-gradient(110deg,rgba(78,122,151,.18),#10131c 70%)}
.vs-active.vs-route-plans .vs-motion-hero{background:linear-gradient(110deg,rgba(160,120,65,.19),#10131c 70%)}
.vs-active.vs-route-audit .vs-motion-hero{background:linear-gradient(110deg,rgba(108,90,141,.19),#10131c 70%)}
.vs-active .vs-newsline{margin:0 0 14px;padding:9px 16px;border:1px solid rgba(201,169,106,.19);border-radius:12px;display:flex;gap:12px;align-items:center;background:rgba(201,169,106,.045);font-size:.84rem;color:var(--vs-muted)}
.vs-newsline b{color:#e8cf8a;flex:none}.vs-newsline span{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vs-active .vs-mobile-toggle{display:none}
@media(max-width:767px){.vs-active .vs-mobile-toggle{display:block;position:fixed;right:15px;bottom:18px;z-index:10020;box-shadow:0 8px 22px rgba(0,0,0,.55)}.vs-active .sidebar,.vs-active .finance-app .side{transform:translateX(110%);transition:transform .24s ease;position:fixed!important;top:0!important;right:0!important;bottom:0!important;z-index:10010!important;width:min(86vw,320px)!important;overflow:auto!important;display:block!important}.vs-active.vs-nav-open .sidebar,.vs-active.vs-nav-open .finance-app .side{transform:translateX(0)}.vs-active .vs-nav-overlay{display:none}.vs-active.vs-nav-open .vs-nav-overlay{display:block;position:fixed;inset:0;background:rgba(0,0,0,.64);z-index:10005}.vs-active :is(.main-area,.finance-app .workspace){margin-right:0!important;width:100%!important;min-width:0!important}.vs-active .vs-motion-hero{padding:12px}.vs-active .vs-motion-hero strong{font-size:.95rem}.vs-active .vs-newsline{padding:8px 10px}}
@media(prefers-reduced-motion:reduce){.vs-active *, .vs-active *::before,.vs-active *::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* SIGNATURE SIDEBAR V1: default 78px desktop; expanded on button press */
@media (min-width: 781px) {
 body.vs-active.vs-sidebar-compact :is(.sidebar,.finance-app .side){width:78px!important;flex:0 0 78px!important;min-width:78px!important;padding-inline:7px!important;overflow-x:hidden!important;transition:width .25s ease,flex-basis .25s ease,padding .25s ease!important}
 body.vs-active.vs-sidebar-compact .main-area{width:calc(100% - 78px)!important;min-width:0!important}
 body.vs-active.vs-sidebar-compact .finance-app .workspace{min-width:0!important;flex:1 1 auto!important}
 body.vs-active :is(.sidebar,.finance-app .side){transition:width .25s ease,flex-basis .25s ease!important}
 body.vs-active :is(.sidebar,.finance-app .side) :is(.brand,.identity){position:relative;min-width:0}
 body.vs-active.vs-sidebar-compact :is(.sidebar .brand,.finance-app .side .identity){justify-content:center!important;gap:0!important}
 body.vs-active.vs-sidebar-compact :is(.sidebar .brand,.finance-app .side .identity) > span{display:none!important}
 body.vs-active.vs-sidebar-compact :is(.sidebar nav,.finance-app .side nav){overflow:visible!important}
 body.vs-active.vs-sidebar-compact :is(.sidebar nav,.finance-app .side nav) a{display:flex!important;align-items:center!important;justify-content:center!important;gap:0!important;font-size:0!important;min-height:46px!important;padding:10px 4px!important;white-space:nowrap!important;overflow:visible!important}
 body.vs-active.vs-sidebar-compact .vs-nav-icon{width:22px!important;height:22px!important;min-width:22px!important;margin:0!important}
 body.vs-active.vs-sidebar-compact .vs-group-btn,body.vs-active.vs-sidebar-compact .finance-app .side-label{display:none!important}
 body.vs-active.vs-sidebar-compact .vs-group-body{display:grid!important;gap:5px!important}
 body.vs-active.vs-sidebar-compact .nav-footer,body.vs-active.vs-sidebar-compact .side-bottom{display:none!important}
 body.vs-active .vs-nav-icon{display:inline-flex;flex:0 0 20px;width:20px;height:20px;align-items:center;justify-content:center;margin-inline-end:9px;color:#e8cf8a}
 body.vs-active .vs-nav-icon svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
 body.vs-active .vs-sidebar-switch{display:flex!important;align-items:center;justify-content:center;min-width:38px;height:38px;width:100%;cursor:pointer;border:1px solid rgba(201,169,106,.35);border-radius:12px;margin:10px auto 14px;background:rgba(201,169,106,.1);color:#e8cf8a}
 body.vs-active .vs-sidebar-switch svg{width:20px;height:20px;transition:transform .25s ease}
 body.vs-active.vs-sidebar-compact .vs-sidebar-switch svg{transform:rotate(180deg)}
 body.vs-active.vs-sidebar-compact :is(.sidebar nav,.finance-app .side nav) a:focus-visible{outline:2px solid #e8cf8a!important;outline-offset:2px}
}
@media (max-width: 780px) {body.vs-active .vs-sidebar-switch{display:none!important}body.vs-active .vs-nav-icon{display:inline-flex;vertical-align:middle;margin-inline-end:7px;color:#e8cf8a}body.vs-active .vs-nav-icon svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7}}
@media(prefers-reduced-motion:reduce){body.vs-active :is(.sidebar,.finance-app .side,.vs-sidebar-switch svg){transition:none!important}}

/* VENISIA SIGNATURE — PAGE PERSONALITIES V2.1: CSS-only, no backend changes */
@media (min-width:781px){
 body.vs-active.vs-sidebar-compact .main-area{max-width:none!important}
}
body.vs-active .content{max-width:1560px;margin-inline:auto;width:100%;min-width:0}
body.vs-active .content>.intro{position:relative;overflow:hidden;padding:30px clamp(18px,3vw,38px);margin-bottom:20px;border-radius:24px;background:radial-gradient(ellipse at 6% 15%,rgba(232,207,138,.20),transparent 40%),linear-gradient(112deg,#191b21,#0a0e17 80%);border:1px solid rgba(201,169,106,.16)}
body.vs-active .content>.intro:after{content:"";position:absolute;inset-inline-end:-38px;top:-75px;width:200px;height:200px;border-radius:50%;border:1px solid rgba(232,207,138,.13);box-shadow:0 0 0 28px rgba(232,207,138,.025),0 0 0 65px rgba(232,207,138,.018);pointer-events:none}
body.vs-active .content>.intro h1{font-size:clamp(1.35rem,2.4vw,2.2rem);letter-spacing:-.02em;margin:8px 0 12px;color:#f5e9d1}
body.vs-active .content>.intro p{max-width:74ch;line-height:1.9;color:#adb5c4}
body.vs-active .metrics{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px!important;margin-bottom:22px}
body.vs-active .metric{position:relative;overflow:hidden;min-width:0!important;min-height:142px;padding:20px!important;border-radius:19px!important;background:linear-gradient(145deg,#191c27,#10131b 75%)!important;border:1px solid rgba(196,174,130,.14)!important;box-shadow:0 9px 25px rgba(0,0,0,.14)!important}
body.vs-active .metric:before{content:"";position:absolute;inset-inline-start:18px;top:0;height:2px;width:44px;background:linear-gradient(90deg,#8a6b2f,#e8cf8a);border-radius:5px}
body.vs-active .metric>span{font-size:.85rem;color:#acb3c4}
body.vs-active .metric>strong{display:block;margin:12px 0 7px;font-size:clamp(1.4rem,2.1vw,2.15rem);color:#f6e7b8;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
body.vs-active .metric>small{color:#9da7b7;font-size:.75rem}
body.vs-active .panel{border:1px solid rgba(201,169,106,.14)!important;border-radius:20px!important;background:linear-gradient(145deg,rgba(23,27,39,.96),rgba(12,14,21,.98))!important;padding:clamp(16px,2vw,26px)!important;min-width:0;margin-block:16px}
body.vs-active .panel>h2{font-size:1.15rem;color:#f4dfac;margin-top:0}
body.vs-active .table-scroll{overflow-x:auto;border:1px solid rgba(201,169,106,.12);border-radius:14px}
body.vs-active .table-scroll table{width:100%;border-collapse:collapse}
body.vs-active .table-scroll th{background:#1c202b!important;color:#edd8a4;font-size:.79rem;white-space:nowrap}
body.vs-active .table-scroll tr:hover td{background:rgba(201,169,106,.04)}
body.vs-active .heading-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-block:12px}
body.vs-active :is(.heading-row,.panel) :is(.btn,button){border-radius:12px}
/* Operational dashboard: executive command center */
body.vs-active.vs-route-dashboard .vs-motion-hero{min-height:98px;border-radius:23px;background:radial-gradient(circle at 8% 30%,rgba(232,207,138,.17),transparent 35%),linear-gradient(115deg,#20202a,#0b0d14)!important}
body.vs-active.vs-route-dashboard .metrics>.metric:first-child{background:linear-gradient(125deg,#332815,#191922 72%)!important;border-color:rgba(232,207,138,.26)!important}
/* Subscribers: cool operator workspace, not financial cards */
body.vs-active.vs-route-subscribers .vs-motion-hero{background:linear-gradient(115deg,#142a32,#121721 70%)!important}
body.vs-active.vs-route-subscribers .panel:first-of-type{border-top:3px solid rgba(123,174,193,.65)!important}
body.vs-active.vs-route-subscribers .search{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
body.vs-active.vs-route-subscribers .search input{min-width:min(100%,260px);flex:1}
/* Servers & live: technical monitoring identity */
body.vs-active:is(.vs-route-routers,.vs-route-mikrotik,.vs-route-networkaccounts,.vs-route-networkprofiles) .vs-motion-hero{background:linear-gradient(110deg,#14232d,#0b111b)!important}
body.vs-active:is(.vs-route-routers,.vs-route-mikrotik) .panel{border-inline-start:3px solid rgba(102,172,189,.42)!important}
/* Financial views: tailored FinTech appearance */
body.vs-active:is(.vs-route-cashboxes,.vs-route-reports,.vs-route-invoices,.vs-route-invoice) .vs-motion-hero{background:linear-gradient(110deg,#262218,#11151f 76%)!important}
body.vs-active:is(.vs-route-cashboxes,.vs-route-reports,.vs-route-invoices,.vs-route-invoice) .metric{background:linear-gradient(145deg,#231f1b,#12161e 78%)!important}
body.vs-active .finance-app .workspace main{max-width:1510px;margin-inline:auto;min-width:0;width:100%}
body.vs-active .finance-app .workspace .top{border-radius:22px;margin-bottom:18px;padding:22px!important;background:linear-gradient(120deg,#211c17,#10151e 72%);border:1px solid rgba(232,207,138,.17)}
body.vs-active .finance-app .workspace .top h1{font-size:clamp(1.4rem,2vw,2.2rem);color:#f0dca9}
body.vs-active .finance-app :is(.card,.stat,section){border-radius:19px}
/* Branch receipt/payment module: its own visual identity (no VS JS on this page) */
body.vbc-page .vbc-main{min-width:0}
body.vbc-page .vbc-top{position:relative;overflow:hidden;border:1px solid rgba(201,169,106,.21);border-radius:24px;padding:24px!important;background:radial-gradient(circle at 4% 20%,rgba(201,169,106,.19),transparent 38%),linear-gradient(115deg,#262018,#10131c 80%)}
body.vbc-page .vbc-top:after{content:"";position:absolute;inset-inline-end:-28px;top:-50px;width:160px;height:160px;border-radius:50%;border:1px solid rgba(232,207,138,.16);pointer-events:none}
body.vbc-page .vbc-top h1{color:#f6e7b8;font-size:clamp(1.4rem,2.6vw,2.2rem)}
body.vbc-page .vbc-content{max-width:1500px;margin-inline:auto}
body.vbc-page .vbc-content :is(.vbc-panel,.vbc-card,section){border-radius:19px}
@media(max-width:1100px){body.vs-active .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){body.vs-active .metrics{grid-template-columns:minmax(0,1fr)!important}body.vs-active .metric{min-height:110px!important}body.vs-active .content>.intro{padding:18px}body.vs-active .finance-app .workspace .top{padding:15px!important}}
@media(hover:hover) and (pointer:fine){body.vs-active .metric:hover{transform:translateY(-4px);border-color:rgba(232,207,138,.3)!important}body.vs-active .panel:hover{border-color:rgba(232,207,138,.24)!important}}
@media(prefers-reduced-motion:reduce){body.vs-active .metric{transition:none!important}}

/* VENISIA OPERATIONS DESIGN V6 — visual-only, scoped to existing main.content */
/* Subscriber workspace identified by its existing search form; no generated data. */
body.vs-active main.content:has(form.search input[name="page"][value="subscribers"]) {--vo-accent:#e8cf8a;}
body.vs-active main.content:has(form.search input[name="page"][value="subscribers"]) > .heading-row {
 display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:clamp(17px,3vw,26px);margin-bottom:17px;
 border-radius:24px;background:radial-gradient(ellipse at 85% -40%,rgba(232,207,138,.18),transparent 65%),linear-gradient(130deg,#151c2a,#090c13);
 border:1px solid rgba(232,207,138,.2);box-shadow:0 18px 45px rgba(0,0,0,.18)
}
body.vs-active main.content:has(form.search input[name="page"][value="subscribers"]) > .heading-row .muted {margin-inline-end:auto;max-width:64ch;line-height:1.9}
body.vs-active main.content:has(form.search input[name="page"][value="subscribers"]) section.panel:first-of-type {
 border-radius:24px;overflow:hidden;border:1px solid rgba(232,207,138,.22);background:linear-gradient(150deg,#171c27,#0d1018);box-shadow:0 22px 50px rgba(0,0,0,.2)
}
body.vs-active main.content:has(form.search input[name="page"][value="subscribers"]) form.search {display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:18px}
body.vs-active main.content:has(form.search input[name="page"][value="subscribers"]) form.search input[name="q"] {flex:1 1 230px;min-width:0;border-radius:13px;min-height:45px;background:#090d16;border:1px solid rgba(201,169,106,.26)}
body.vs-active main.content:has(form.search input[name="page"][value="subscribers"]) .table-scroll {border-radius:16px;border:1px solid rgba(201,169,106,.11);overflow:auto}
body.vs-active main.content:has(form.search input[name="page"][value="subscribers"]) table {border-collapse:separate;border-spacing:0;width:100%}
body.vs-active main.content:has(form.search input[name="page"][value="subscribers"]) table thead th {position:sticky;top:0;background:#202536;color:#eddaa8;font-weight:700;white-space:nowrap}
body.vs-active main.content:has(form.search input[name="page"][value="subscribers"]) table tbody tr {transition:background .18s ease}
body.vs-active main.content:has(form.search input[name="page"][value="subscribers"]) table tbody tr:hover {background:rgba(201,169,106,.075)}
body.vs-active main.content:has(form.search input[name="page"][value="subscribers"]) table td:first-child {font-weight:650}
body.vs-active main.content:has(form.search input[name="page"][value="subscribers"]) table td small {display:block;font-weight:400;opacity:.7;margin-top:4px}
/* Plans: uniquely scope to existing price/speed input fields, keep backend behaviour untouched. */
body.vs-active main.content:has(form input[name="action"][value="plan.add"]) section.panel:first-of-type {background:radial-gradient(ellipse at 92% 2%,rgba(201,169,106,.17),transparent 57%),linear-gradient(135deg,#1a1720,#10131c);border-radius:26px;border:1px solid rgba(201,169,106,.25);padding:clamp(17px,3vw,28px)}
body.vs-active main.content:has(form input[name="action"][value="plan.add"]) section.panel:first-of-type h2 {color:#f2d996;font-size:clamp(20px,2.5vw,27px);letter-spacing:-.01em}
body.vs-active main.content:has(form input[name="action"][value="plan.add"]) .table-scroll {overflow:auto;border-radius:18px;border:1px solid #c9a96a38;background:#0d101a}
body.vs-active main.content:has(form input[name="action"][value="plan.add"]) table tbody td:first-child {font-weight:750;color:#f0dfb5}
body.vs-active main.content:has(form input[name="action"][value="plan.add"]) .form-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:14px}
body.vs-active main.content:has(form input[name="action"][value="plan.add"]) .form-grid label {min-width:0;background:#131824;border:1px solid #c9a96a21;border-radius:15px;padding:11px 12px}
/* Routers and network monitoring: style only existing server panels and status metrics. */
body.vs-active main.content section.panel:has(a[href*="mikrotik"],a[href*="router"],form input[name="action"][value^="router."]) {background:radial-gradient(circle at 100% 0%,rgba(93,147,163,.15),transparent 48%),linear-gradient(130deg,#101b26,#0c1018);border:1px solid rgba(201,169,106,.22);border-radius:24px}
body.vs-active main.content section.panel:has(a[href*="mikrotik"],a[href*="router"]) h2 {color:#f1ddb2}
/* Cross-page form polish, scoped to content; no action buttons or hidden inputs added. */
body.vs-active main.content .panel input:focus-visible,body.vs-active main.content .panel select:focus-visible,body.vs-active main.content .panel button:focus-visible,body.vs-active main.content .panel a:focus-visible {outline:2px solid #e8cf8a;outline-offset:3px}
@media(max-width:700px){
 body.vs-active main.content:has(form.search input[name="page"][value="subscribers"]) > .heading-row {padding:17px;border-radius:19px}
 body.vs-active main.content:has(form.search input[name="page"][value="subscribers"]) > .heading-row a {flex:1 1 auto;text-align:center}
 body.vs-active main.content:has(form input[name="action"][value="plan.add"]) section.panel:first-of-type {padding:17px;border-radius:19px}
}
@media(prefers-reduced-motion:reduce){body.vs-active main.content table tbody tr{transition:none!important}}

/* VENISIA AUDIT & TEAM V7 — progressive visual enhancements only. */
/* Staff page: unique existing staff.add form marker. */
body.vs-active main.content:has(form input[name="action"][value="staff.add"]) {--vs-section-accent:#e8cf8a;}
body.vs-active main.content:has(form input[name="action"][value="staff.add"]) > section.panel:first-of-type {
 background:radial-gradient(ellipse at 90% 0%,rgba(201,169,106,.17),transparent 50%),linear-gradient(135deg,#171c27,#0b0f17);
 border:1px solid rgba(201,169,106,.22);border-radius:24px;box-shadow:0 16px 40px rgba(0,0,0,.18);overflow:hidden
}
body.vs-active main.content:has(form input[name="action"][value="staff.add"]) > section.panel:first-of-type h2 {
 color:#f2dfb0;font-size:clamp(1.22rem,2.5vw,1.75rem);letter-spacing:-.02em
}
body.vs-active main.content:has(form input[name="action"][value="staff.add"]) .table-scroll {overflow:auto;border-radius:16px;border:1px solid rgba(201,169,106,.15)}
body.vs-active main.content:has(form input[name="action"][value="staff.add"]) table {border-collapse:separate;border-spacing:0;min-width:550px;width:100%}
body.vs-active main.content:has(form input[name="action"][value="staff.add"]) thead th {background:#222536;color:#eedaa9;position:sticky;top:0}
body.vs-active main.content:has(form input[name="action"][value="staff.add"]) tbody tr:nth-child(even) {background:rgba(201,169,106,.035)}
body.vs-active main.content:has(form input[name="action"][value="staff.add"]) tbody tr:hover {background:rgba(201,169,106,.1)}
body.vs-active main.content:has(form input[name="action"][value="staff.add"]) tbody td:first-child {font-weight:750;color:#f3eee1}
body.vs-active main.content:has(form input[name="action"][value="staff.add"]) > section.panel:last-of-type {
 background:linear-gradient(155deg,#151925,#0d1019);border:1px solid rgba(232,207,138,.22);border-radius:25px;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.045)
}
body.vs-active main.content:has(form input[name="action"][value="staff.add"]) > section.panel:last-of-type .form-grid {
 display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:14px
}
body.vs-active main.content:has(form input[name="action"][value="staff.add"]) form label {display:grid;gap:7px;min-width:0;color:#d9dce4}
body.vs-active main.content:has(form input[name="action"][value="staff.add"]) form :is(input,select) {
 min-width:0;width:100%;background:#090e18;border:1px solid rgba(201,169,106,.23);border-radius:12px;min-height:44px
}
body.vs-active main.content:has(form input[name="action"][value="staff.add"]) form :is(input,select):focus-visible {outline:2px solid #e8cf8a;outline-offset:2px}
/* Audit page: event column values render dir=ltr in the existing PHP markup. */
body.vs-active main.content:has(> section.panel table tbody td[dir="ltr"]) > section.panel {
 background:linear-gradient(145deg,#161923,#0a0d14);border-radius:25px;border:1px solid rgba(201,169,106,.19);overflow:hidden
}
body.vs-active main.content:has(> section.panel table tbody td[dir="ltr"]) > section.panel h2 {color:#efdbac;letter-spacing:-.02em}
body.vs-active main.content:has(> section.panel table tbody td[dir="ltr"]) .table-scroll {border-radius:16px;overflow:auto;border:1px solid rgba(201,169,106,.14)}
body.vs-active main.content:has(> section.panel table tbody td[dir="ltr"]) table {border-collapse:separate;border-spacing:0;min-width:650px;width:100%}
body.vs-active main.content:has(> section.panel table tbody td[dir="ltr"]) table thead th {background:#222739;color:#efd9a8;position:sticky;top:0}
body.vs-active main.content:has(> section.panel table tbody td[dir="ltr"]) table tbody tr {background:linear-gradient(90deg,rgba(201,169,106,.045),transparent 60%);transition:background-color .18s ease}
body.vs-active main.content:has(> section.panel table tbody td[dir="ltr"]) table tbody tr:hover {background-color:rgba(201,169,106,.08)}
body.vs-active main.content:has(> section.panel table tbody td[dir="ltr"]) table td[dir="ltr"] {font-variant-numeric:tabular-nums;color:#e8cf8a;font-size:.87em;white-space:nowrap}
body.vs-active main.content:has(> section.panel table tbody td[dir="ltr"]) table td:first-child {font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:700px) {
 body.vs-active main.content:has(form input[name="action"][value="staff.add"]) > section.panel,
 body.vs-active main.content:has(> section.panel table tbody td[dir="ltr"]) > section.panel {border-radius:17px;padding:14px}
 body.vs-active main.content:has(form input[name="action"][value="staff.add"]) .table-scroll,
 body.vs-active main.content:has(> section.panel table tbody td[dir="ltr"]) .table-scroll {max-width:100%;-webkit-overflow-scrolling:touch}
}
@media(prefers-reduced-motion:reduce) {body.vs-active main.content:has(> section.panel table tbody td[dir="ltr"]) table tbody tr {transition:none}}

/* VENISIA REPORTS & INVOICES V8 — visual only, existing markup/permissions untouched */
/* Reports identified by the four financial metrics followed by a sole explanatory panel. */
body.vs-active main.content:has(> .metrics + section.panel:last-child) > .metrics {
 display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,205px),1fr));gap:14px;align-items:stretch
}
body.vs-active main.content:has(> .metrics + section.panel:last-child) > .metrics > * {
 min-width:0;border-radius:21px;border:1px solid rgba(232,207,138,.17);
 background:radial-gradient(circle at 100% 0%,rgba(232,207,138,.13),transparent 65%),linear-gradient(155deg,#161c28,#0a0e17);
 box-shadow:0 12px 28px rgba(0,0,0,.14);padding:clamp(16px,2.4vw,23px);font-variant-numeric:tabular-nums
}
body.vs-active main.content:has(> .metrics + section.panel:last-child) > .metrics > *:nth-child(3) {border-color:rgba(63,182,139,.3);background:linear-gradient(145deg,#12251f,#0b1218)}
body.vs-active main.content:has(> .metrics + section.panel:last-child) > .metrics > *:nth-child(4) {border-color:rgba(224,169,59,.28);background:linear-gradient(145deg,#252014,#111219)}
body.vs-active main.content:has(> .metrics + section.panel:last-child) > section.panel:last-child {
 background:linear-gradient(140deg,#171b27,#10131c);border-inline-start:3px solid #c9a96a;
 border-radius:19px;padding:clamp(17px,2.5vw,24px);line-height:1.85;max-width:100%
}
/* Invoice list is identified by the existing invoice-creation action. */
body.vs-active main.content:has(form input[name="action"][value="invoice.add"]) > section.panel:first-of-type {
 background:radial-gradient(ellipse at 100% -30%,rgba(232,207,138,.15),transparent 65%),linear-gradient(160deg,#131925,#0d1017);
 border-radius:25px;border:1px solid rgba(232,207,138,.21);overflow:hidden
}
body.vs-active main.content:has(form input[name="action"][value="invoice.add"]) .table-scroll {
 max-width:100%;overflow:auto;border:1px solid rgba(201,169,106,.15);border-radius:15px
}
body.vs-active main.content:has(form input[name="action"][value="invoice.add"]) table {min-width:650px;border-collapse:separate;border-spacing:0}
body.vs-active main.content:has(form input[name="action"][value="invoice.add"]) thead th {position:sticky;top:0;background:#202638;color:#ead8a8}
body.vs-active main.content:has(form input[name="action"][value="invoice.add"]) tbody tr:hover {background:rgba(201,169,106,.075)}
body.vs-active main.content:has(form input[name="action"][value="invoice.add"]) a[href*="invoice"] {color:#f0da9b;text-underline-offset:4px}
body.vs-active main.content section.panel:has(form input[name="action"][value="invoice.add"]) {
 border-radius:24px;background:linear-gradient(135deg,#1a1b27,#0c111a);border:1px solid rgba(232,207,138,.22)
}
body.vs-active main.content section.panel:has(form input[name="action"][value="invoice.add"]) .form-grid {
 display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:13px
}
body.vs-active main.content section.panel:has(form input[name="action"][value="invoice.add"]) label {display:grid;gap:8px;min-width:0}
body.vs-active main.content section.panel:has(form input[name="action"][value="invoice.add"]) :is(input,select) {
 min-width:0;width:100%;min-height:44px;border-radius:12px;background:#0b1019;border:1px solid rgba(201,169,106,.23)
}
body.vs-active main.content section.panel:has(form input[name="action"][value="invoice.add"]) :is(input,select):focus-visible {
 outline:2px solid #e8cf8a;outline-offset:2px
}
@media(max-width:700px) {
 body.vs-active main.content:has(> .metrics + section.panel:last-child) > .metrics {grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 body.vs-active main.content:has(> .metrics + section.panel:last-child) > .metrics > * {padding:13px;border-radius:15px;overflow-wrap:anywhere}
 body.vs-active main.content:has(form input[name="action"][value="invoice.add"]) > section.panel {border-radius:17px;padding:14px}
}
@media(max-width:390px) {body.vs-active main.content:has(> .metrics + section.panel:last-child) > .metrics {grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce) {body.vs-active main.content:has(form input[name="action"][value="invoice.add"]) tbody tr {transition:none}}

/* VENISIA INVOICE DETAIL V9 — visual only, existing invoice/payment functionality unchanged */
/* Scoped to invoice-detail markup: invoice summary has two paragraphs after its heading. */
body.vs-active main.content:has(> section.panel:first-of-type > h2 + p + p) {
 display:block; max-width:1200px; margin-inline:auto;
}
body.vs-active main.content:has(> section.panel:first-of-type > h2 + p + p) > section.panel:first-of-type {
 position:relative; overflow:hidden; padding:clamp(20px,3.3vw,34px);
 background:radial-gradient(ellipse at 85% -45%,rgba(232,207,138,.22),transparent 68%),linear-gradient(140deg,#1a2030,#0b0f18 75%);
 border:1px solid rgba(232,207,138,.26); border-radius:25px; box-shadow:0 18px 45px rgba(0,0,0,.17);
}
body.vs-active main.content:has(> section.panel:first-of-type > h2 + p + p) > section.panel:first-of-type::before {
 content:""; position:absolute; inset-block:0; inset-inline-start:0; width:4px; background:linear-gradient(#f6e7b8,#8a6b2f);
}
body.vs-active main.content:has(> section.panel:first-of-type > h2 + p + p) > section.panel:first-of-type h2 {
 font-size:clamp(1.25rem,2.3vw,2rem); color:#f6e7b8; letter-spacing:.01em; overflow-wrap:anywhere;
}
body.vs-active main.content:has(> section.panel:first-of-type > h2 + p + p) > section.panel:first-of-type p {
 color:#c0c8d6; line-height:2; margin-block:.5rem; overflow-wrap:anywhere;
}
body.vs-active main.content:has(> section.panel:first-of-type > h2 + p + p) > section.panel:first-of-type strong {
 display:inline-block; padding:.1rem .65rem; border-radius:10px; color:#f4dfaa;
 background:rgba(232,207,138,.1); border:1px solid rgba(232,207,138,.22); font-variant-numeric:tabular-nums;
}
body.vs-active main.content:has(> section.panel:first-of-type > h2 + p + p) > section.panel:nth-of-type(2) {
 border-radius:23px; border:1px solid rgba(201,169,106,.15);
 background:linear-gradient(145deg,#151b29,#0d111a); padding:clamp(14px,2.5vw,24px);
}
body.vs-active main.content:has(> section.panel:first-of-type > h2 + p + p) > section.panel:nth-of-type(2) :is(.table-scroll,.table-wrap) {
 max-width:100%; overflow:auto; border-radius:14px;
}
body.vs-active main.content:has(> section.panel:first-of-type > h2 + p + p) > section.panel:nth-of-type(2) table {
 width:100%; min-width:590px; border-spacing:0; font-variant-numeric:tabular-nums;
}
body.vs-active main.content:has(> section.panel:first-of-type > h2 + p + p) > section.panel:nth-of-type(2) thead th {
 background:#232b3b; color:#ead9b0; position:sticky; top:0;
}
body.vs-active main.content:has(> section.panel:first-of-type > h2 + p + p) > section.panel:nth-of-type(2) tbody tr:hover { background:rgba(201,169,106,.07) }
body.vs-active main.content section.panel:has(form input[name="action"][value="payment.add"]) {
 border:1px solid rgba(63,182,139,.3); border-radius:24px;
 background:radial-gradient(ellipse at 90% 0%,rgba(63,182,139,.1),transparent 65%),#101821;
 padding:clamp(16px,2.5vw,26px);
}
body.vs-active main.content section.panel:has(form input[name="action"][value="payment.add"]) .form-grid {
 display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,245px),1fr)); gap:14px;
}
body.vs-active main.content section.panel:has(form input[name="action"][value="payment.add"]) label {display:grid;gap:7px;min-width:0}
body.vs-active main.content section.panel:has(form input[name="action"][value="payment.add"]) :is(input,select) {
 width:100%;max-width:100%;min-width:0;min-height:44px; border:1px solid rgba(201,169,106,.23);border-radius:12px;
 background:#090e16;color:#f4f1ea;
}
body.vs-active main.content section.panel:has(form input[name="action"][value="payment.add"]) :is(input,select):focus-visible {
 outline:2px solid #e8cf8a;outline-offset:2px;
}
@media (max-width:650px) {
 body.vs-active main.content:has(> section.panel:first-of-type > h2 + p + p) > section.panel {padding:15px;border-radius:17px}
}
@media (prefers-reduced-motion:reduce) {
 body.vs-active main.content:has(> section.panel:first-of-type > h2 + p + p) * {transition:none!important;animation:none!important}
}