:root{
  --bg:#f3f6fb;--surface:#ffffff;--surface-2:#f8fbff;--text:#172033;--muted:#6b7280;
  --brand:#0f3d91;--brand-2:#1f5fcc;--brand-soft:#eaf2ff;--gold:#c89b3c;--gold-2:#e3b958;--gold-soft:#fff7e8;--border:#dbe4f0;
  --success:#0f8a5f;--warning:#c77700;--danger:#c62828;--shadow:0 12px 32px rgba(16,24,40,.08);--shadow-hover:0 18px 44px rgba(16,24,40,.14);
  --ease:cubic-bezier(.2,.8,.2,1)
}
*{box-sizing:border-box} html,body{margin:0;padding:0;background:radial-gradient(circle at top left,#eaf2ff 0,#f3f6fb 38%,#f7f9fd 100%);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif}
button,input,select,textarea{font:inherit} body{min-height:100vh;overflow-x:clip} body.nav-drawer-open{overflow:hidden} #app{min-height:100vh;width:100%;max-width:100%;overflow-x:clip}
.auth-shell{min-height:100vh;display:grid;grid-template-columns:1.15fr .85fr}
.auth-left{padding:56px;background:linear-gradient(135deg,#0b2e6f,#1f5fcc 65%,#1a4ead);color:#fff;display:flex;flex-direction:column;justify-content:center}
.brand{display:flex;align-items:center;gap:14px}.logo{width:56px;height:56px;border-radius:16px;background:#fff;color:var(--brand);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:18px}
.auth-left h1{font-size:40px;line-height:1.12;margin:26px 0 14px}.auth-left p{font-size:18px;line-height:1.7;max-width:650px;color:#d9e5ff}
.ribbon{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);padding:10px 14px;border-radius:999px;width:max-content;margin-top:20px}
.feature-list{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:30px;max-width:760px}.feature-card{border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:18px;background:rgba(255,255,255,.08)}.feature-card strong{display:block;margin-bottom:6px}
.auth-right{display:flex;align-items:center;justify-content:center;padding:30px}
.card{background:linear-gradient(180deg,#fff,#fbfdff);border:1px solid rgba(219,228,240,.95);border-radius:24px;padding:28px;box-shadow:var(--shadow);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.card:hover{transform:translateY(-2px);border-color:#c6d7f1;box-shadow:var(--shadow-hover)}
.login-card{width:min(470px,100%)} .login-card h2{margin:0 0 8px}.login-card p{margin:0 0 24px;color:var(--muted)}
.form-grid{display:grid;gap:16px;min-width:0;width:100%;max-width:100%}.form-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px;min-width:0}.form-cols-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:16px;min-width:0}@media (min-width:900px){.form-cols{grid-template-columns:1fr 1fr}.form-cols-3{grid-template-columns:repeat(3,1fr)}}
label{display:grid;gap:8px;font-weight:700;min-width:0;max-width:100%}
input,select,textarea{min-width:0;max-width:100%;width:100%;border:1px solid var(--border);background:#fff;color:var(--text);border-radius:12px;padding:12px 14px;outline:none;transition:border-color .18s ease,box-shadow .18s ease}
input:focus,select:focus,textarea:focus{border-color:#8fb3ee;box-shadow:0 0 0 4px rgba(31,95,204,.12)}
textarea{min-height:96px;resize:vertical}
.btn{position:relative;isolation:isolate;border:none;border-radius:14px;padding:12px 16px;cursor:pointer;font-weight:800;box-shadow:0 8px 18px rgba(16,24,40,.07);transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s ease,border-color .2s ease,color .2s ease}.btn::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,0));opacity:.75;z-index:-1}.btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 14px 28px rgba(16,24,40,.13)}.btn:active{transform:translateY(0) scale(.99);box-shadow:0 6px 14px rgba(16,24,40,.1)}.btn:focus-visible{outline:3px solid rgba(31,95,204,.22);outline-offset:3px}.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff}.btn-primary:hover{background:linear-gradient(135deg,#0b347f,#2a6ee8)}.btn-secondary{background:linear-gradient(135deg,#f4f8ff,#e7f0ff);color:var(--brand);border:1px solid #d7e5fb}.btn-secondary:hover{border-color:#a9c7f4;color:#0b347f}.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#1f1706;border:1px solid rgba(138,90,0,.18)}.btn-gold:hover{box-shadow:0 14px 30px rgba(200,155,60,.24)}.btn-ghost{background:rgba(255,255,255,.9);border:1px solid var(--border);color:var(--text)}.btn-ghost:hover{border-color:#b8cae4;background:#fff;color:var(--brand)}.btn-danger{background:#fff2f2;color:var(--danger);border:1px solid #ffd1d1}.btn-danger:hover{background:#ffe8e8;border-color:#ffbcbc}
.small{font-size:13px;color:var(--muted)} .notice{margin-top:18px;padding:12px 14px;border-radius:14px;background:#f7faff;border:1px solid #dbe7ff;color:#315197}.warning-notice{background:#fff7e8;border-color:#f3d7a5;color:#7a4b00}.inline-notice{margin:0 0 18px}button:disabled{opacity:.65;cursor:not-allowed}
.app-shell{display:flex;align-items:stretch;min-height:100vh;width:100%;max-width:100%;position:relative;overflow-x:clip}
.sidebar-scrim{display:none;position:fixed;inset:0;z-index:199;background:rgba(12,20,32,.5);opacity:0;pointer-events:none;transition:opacity .22s var(--ease)}
.app-shell.nav-open .sidebar-scrim{opacity:1;pointer-events:auto}
.sidebar{background:linear-gradient(180deg,#0b2452 0%,#102f67 56%,#0c234b 100%);color:#edf3ff;padding:20px 18px;box-shadow:12px 0 32px rgba(16,24,40,.08);width:290px;flex-shrink:0;position:sticky;top:0;align-self:flex-start;height:100vh;min-height:0;display:flex;flex-direction:column;z-index:200}
.main-area{flex:1;min-width:0;display:flex;flex-direction:column;max-width:100%}
.app-mobile-header{display:none;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,#fff,#f8fbff);box-shadow:0 1px 0 rgba(16,24,40,.04);position:sticky;top:0;z-index:50}
.app-mobile-title{font-weight:800;font-size:15px;color:var(--brand);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-menu-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid var(--border);border-radius:14px;background:#fff;cursor:pointer;box-shadow:0 6px 16px rgba(16,24,40,.08);flex-shrink:0}
.nav-menu-btn:focus-visible{outline:3px solid rgba(31,95,204,.25);outline-offset:2px}
.nav-menu-bars{position:relative;width:20px;height:2px;border-radius:2px;background:var(--brand);box-shadow:0 -6px 0 var(--brand),0 6px 0 var(--brand)}
.user-box{background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:14px;margin:18px 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 22px rgba(0,0,0,.08);flex-shrink:0}.user-box .role{font-size:13px;color:#cfdcff}
.brand{flex-shrink:0}.nav{display:grid;gap:9px}.nav button{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-width:0;text-align:left;padding:14px;background:rgba(255,255,255,0);color:#edf3ff;border:1px solid transparent;border-radius:16px;cursor:pointer;font-weight:700;transition:transform .2s var(--ease),background .2s ease,border-color .2s ease,box-shadow .2s ease,color .2s ease}.nav button::before{content:"";position:absolute;left:8px;top:50%;width:3px;height:0;border-radius:999px;background:linear-gradient(180deg,var(--gold-2),#fff0ba);transform:translateY(-50%);transition:height .2s var(--ease)}.nav button:hover{transform:translateY(-2px) scale(1.01);background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.12);box-shadow:0 12px 24px rgba(0,0,0,.14)}.nav button.active{background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.09));border-color:rgba(255,255,255,.22);box-shadow:0 14px 28px rgba(0,0,0,.16);color:#fff}.nav button.active::before{height:58%}.nav-icon{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 26px;color:#d7e4ff;border-radius:10px;background:rgba(255,255,255,.08);transition:transform .2s var(--ease),background .2s ease,color .2s ease}.nav-icon svg{width:20px;height:20px;display:block;fill:currentColor;filter:drop-shadow(0 2px 5px rgba(0,0,0,.18))}
.nav button:nth-child(1) .nav-icon{color:#63b3ff}.nav button:nth-child(2) .nav-icon{color:#34d399}.nav button:nth-child(3) .nav-icon{color:#e3b958}.nav button:nth-child(4) .nav-icon{color:#fbbf24}.nav button:nth-child(5) .nav-icon{color:#a78bfa}.nav button:nth-child(6) .nav-icon{color:#fb7185}.nav button:nth-child(7) .nav-icon{color:#22d3ee}
.nav button.active .nav-icon,.nav button:hover .nav-icon{color:#fff;background:rgba(255,255,255,.16);transform:scale(1.08)}.nav{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.sidebar-footer{margin-top:auto;padding-top:12px;position:static;left:auto;right:auto;bottom:auto;display:grid;gap:10px}.sidebar-footer .btn{box-shadow:0 10px 22px rgba(0,0,0,.12)}.sidebar-footer #logoutBtn{background:#fff2f2!important;color:#b42318!important;border:1px solid rgba(255,255,255,.28)!important}.sidebar-footer #logoutBtn:hover{background:#ffe1e1!important}
.main{flex:1;min-width:0;width:100%;max-width:100%;padding:16px;overflow-x:clip}@media (min-width:640px){.main{padding:20px 24px}}@media (min-width:1280px){.main{padding:24px 28px}}
.page-content{min-width:0;width:100%;max-width:100%}.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px;flex-wrap:wrap}.topbar-text{flex:1;min-width:0;max-width:100%}.topbar h1{margin:0;font-size:clamp(1.25rem,2.8vw,1.85rem);line-height:1.2;word-wrap:break-word;overflow-wrap:anywhere}.topbar p{margin:7px 0 0;color:var(--muted);word-wrap:break-word;overflow-wrap:anywhere}.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;min-width:0}.toolbar-actions{justify-content:flex-end;flex:1 1 auto;min-width:0}@media (max-width:639px){.toolbar-actions{width:100%;justify-content:flex-start}.toolbar-actions .btn{flex:1 1 auto;min-width:min(100%,160px)}}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px}@media (min-width:1280px){.stats{grid-template-columns:repeat(6,1fr);gap:16px}}.stat{position:relative;overflow:hidden;background:linear-gradient(145deg,#fff,#f8fbff);border:1px solid rgba(219,228,240,.9);border-radius:20px;padding:18px;box-shadow:var(--shadow);transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s ease}.stat::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:linear-gradient(180deg,var(--brand-2),var(--gold))}.stat::after{content:"";position:absolute;top:-45%;right:-35%;width:120px;height:120px;border-radius:50%;background:rgba(31,95,204,.08);transition:transform .22s var(--ease),opacity .22s ease}.stat:hover{transform:translateY(-5px) scale(1.015);border-color:#b9cff6;box-shadow:var(--shadow-hover)}.stat:hover::after{transform:scale(1.25);opacity:.9}.stat .label{position:relative;font-size:13px;color:var(--muted);margin-bottom:10px}.stat .value{position:relative;font-size:30px;font-weight:900;color:var(--brand)}
.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;min-width:0;width:100%;max-width:100%}@media (max-width:1023px){.grid-2{grid-template-columns:1fr}}.panel{background:linear-gradient(180deg,#fff,#fbfdff);border:1px solid rgba(219,228,240,.92);border-radius:20px;box-shadow:var(--shadow);overflow:hidden;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s ease}.panel:hover{transform:translateY(-2px);border-color:#c7d8f2;box-shadow:var(--shadow-hover)}
.panel{min-width:0;max-width:100%}.panel-head{padding:18px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.panel-head h3{margin:0;font-size:18px;min-width:0;word-break:break-word}.panel-body{padding:18px 20px;min-width:0}
.table-wrap{width:100%;max-width:100%;min-width:0;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}table{width:100%;border-collapse:collapse;table-layout:auto}table.data-sheet{min-width:720px}table.data-sheet--wide{min-width:640px}table.data-sheet--xl{min-width:1100px} th,td{padding:12px 10px;border-bottom:1px solid #eef2f7;text-align:left;vertical-align:top;word-wrap:break-word;overflow-wrap:anywhere} th{font-size:13px;color:var(--muted);font-weight:800;background:#fbfcff;white-space:normal} td .row-actions{flex-wrap:wrap;min-width:0}
.badge{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800}.badge-blue{background:#e8f0ff;color:#1747b0}.badge-green{background:#e8fbf3;color:#0f8a5f}.badge-orange{background:#fff3e7;color:#b55b00}.badge-red{background:#ffe8e8;color:#b42318}.badge-gray{background:#eef2f6;color:#4b5563}.badge-gold{background:var(--gold-soft);color:#8a5a00}
.kpi-list{display:grid;gap:12px}.kpi-item{padding:14px;border-radius:16px;background:var(--surface-2);border:1px solid var(--border);transition:transform .2s var(--ease),box-shadow .2s ease,border-color .2s ease}.kpi-item:hover{transform:translateY(-2px);border-color:#c7d8f2;box-shadow:0 12px 26px rgba(16,24,40,.09)}
.search-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:12px;margin-bottom:16px;min-width:0}.search-row input,.search-row select{width:100%;min-width:0;max-width:100%}
.list-clean{display:grid;gap:10px;padding:0;margin:0;list-style:none}.list-clean li{padding:12px 14px;border:1px solid var(--border);border-radius:14px;background:#fbfdff;transition:transform .2s var(--ease),box-shadow .2s ease,border-color .2s ease}.list-clean li:hover{transform:translateY(-2px);border-color:#c7d8f2;box-shadow:0 10px 22px rgba(16,24,40,.08)}
.empty{padding:32px;text-align:center;color:var(--muted);background:#fafcff;border:1px dashed var(--border);border-radius:16px}
.alert-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:18px}@media (min-width:1200px){.alert-grid{grid-template-columns:repeat(5,1fr)}}.alert-card{border:1px solid var(--border);border-radius:18px;padding:14px;background:linear-gradient(180deg,#fff,#fbfdff);text-align:left;cursor:pointer;box-shadow:var(--shadow);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s ease}.alert-card:hover{transform:translateY(-3px) scale(1.015);border-color:#b9cff6;box-shadow:var(--shadow-hover)}.alert-card:active{transform:translateY(0) scale(.995)}.alert-card strong{display:block;font-size:26px}.alert-card span{display:block;color:var(--muted);font-weight:800}.alert-danger{border-color:#f7b4b4;background:linear-gradient(180deg,#fffafa,#fff1f1)}.alert-danger strong{color:var(--danger)}.alert-warning{border-color:#f0c17d;background:linear-gradient(180deg,#fffdf8,#fff7e8)}.alert-warning strong{color:var(--warning)}
.alert-strip{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border-radius:16px;margin-bottom:18px;border:1px solid var(--border);background:#fff}.alert-strip-ok{border-color:#cdebdc;background:#f4fcf8;color:#0f6849}.alert-strip-warning{border-color:#f0c17d;background:#fffaf1;color:#7a4b00}.urgent-text{color:var(--danger);font-weight:800}.row-actions{display:flex;gap:8px;flex-wrap:wrap}
.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:18px}@media (min-width:1024px){.detail-grid{grid-template-columns:repeat(4,1fr)}}.detail-card{padding:14px;border:1px solid var(--border);border-radius:18px;background:var(--surface-2);transition:transform .2s var(--ease),box-shadow .2s ease,border-color .2s ease}.detail-card:hover{transform:translateY(-2px);border-color:#c7d8f2;box-shadow:0 12px 26px rgba(16,24,40,.09)}.detail-card span{display:block;color:var(--muted);font-size:13px;font-weight:800;margin-bottom:6px}.detail-card strong{display:block;margin-bottom:4px}.detail-section{margin-top:18px}.detail-section h4{margin:0 0 10px}.detail-section p{margin:0;color:var(--text);line-height:1.6}.detail-head{padding:0 0 12px;margin-bottom:12px;border-bottom:0}
.modal-backdrop{position:fixed;inset:0;background:rgba(16,24,40,.48);display:flex;align-items:safe center;justify-content:safe center;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));z-index:250;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.modal{width:min(1180px,95vw);max-width:95vw;max-height:min(92dvh,92vh);height:auto;min-height:0;display:flex;flex-direction:column;overflow:hidden;overflow-x:hidden;background:var(--surface);border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow);min-width:0;margin:auto;align-self:center}
.modal--xl{width:min(1200px,96vw);max-width:96vw;max-height:min(92dvh,92vh)}
.role-modal{width:min(980px,95vw);max-width:95vw}.subscription-detail-modal{width:min(1100px,95vw);max-width:95vw}
.modal-head{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;flex-shrink:0;background:var(--surface);z-index:2}.modal-head h3{margin:0;font-size:1.1rem;min-width:0;word-wrap:break-word;overflow-wrap:anywhere;flex:1;line-height:1.35}
.modal-body{padding:16px 18px;min-width:0;min-height:0}.modal-body--stack{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;padding:0;overflow:hidden}
.modal-form-stack{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;min-width:0;width:100%;max-width:100%}
.modal-form-scroll{flex:1 1 auto;min-height:0;min-width:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:16px 18px}
.modal-form-footer{flex-shrink:0;padding:14px 16px;border-top:1px solid var(--border);background:var(--surface);width:100%;min-width:0}
.modal-form-footer .actions-right{margin-top:0}
.actions-right{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:10px;margin-top:20px;width:100%;min-width:0}
@media (max-width:560px){.modal{border-radius:16px}.modal-head{padding:12px 14px}.modal-form-scroll{padding:12px 14px}.modal-form-footer{padding:12px 14px}.actions-right{flex-direction:column-reverse;align-items:stretch}.actions-right .btn{width:100%}.modal-head .btn{width:auto;align-self:flex-end}}
.role-block{padding:14px;border:1px solid var(--border);border-radius:14px;background:#fbfdff}
.nav button:nth-child(8) .nav-icon{color:#facc15}
.roles-hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:22px;margin-bottom:18px;padding:26px;border:1px solid rgba(31,95,204,.14);border-radius:26px;background:linear-gradient(135deg,#ffffff 0%,#f6f9ff 48%,#fff8e8 100%);box-shadow:var(--shadow);flex-wrap:wrap;min-width:0;max-width:100%}
.roles-hero>div{min-width:0}
.roles-hero::before{content:"";position:absolute;inset:-60px -80px auto auto;width:230px;height:230px;border-radius:999px;background:radial-gradient(circle,rgba(31,95,204,.16),rgba(31,95,204,0) 68%)}
.roles-hero::after{content:"";position:absolute;left:-70px;bottom:-90px;width:210px;height:210px;border-radius:999px;background:radial-gradient(circle,rgba(200,155,60,.18),rgba(200,155,60,0) 70%)}
.roles-hero>*{position:relative}.eyebrow{display:inline-flex;align-items:center;width:max-content;margin-bottom:10px;padding:7px 11px;border-radius:999px;background:var(--brand-soft);color:var(--brand);font-size:12px;font-weight:900;letter-spacing:.04em;text-transform:uppercase}.roles-hero h2{margin:0;font-size:28px}.roles-hero p{max-width:760px;margin:8px 0 0;color:var(--muted);line-height:1.65}.roles-hero-metric{min-width:170px;padding:18px;border:1px solid rgba(200,155,60,.28);border-radius:22px;background:rgba(255,255,255,.72);box-shadow:0 18px 38px rgba(16,24,40,.08);text-align:center}.roles-hero-metric strong{display:block;color:var(--brand);font-size:38px;line-height:1}.roles-hero-metric span{display:block;margin-top:6px;color:var(--muted);font-weight:800}
.role-cards-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}.role-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:14px;min-height:100%;padding:20px;border:1px solid rgba(219,228,240,.95);border-radius:24px;background:linear-gradient(180deg,#fff,#fbfdff);box-shadow:var(--shadow);transition:all .2s ease-in-out}.role-card::before{content:"";position:absolute;inset:0 0 auto;height:5px;background:linear-gradient(90deg,var(--brand-2),var(--gold))}.role-card::after{content:"";position:absolute;right:-46px;top:-46px;width:128px;height:128px;border-radius:999px;background:rgba(31,95,204,.07);transition:all .2s ease-in-out}.role-card:hover{transform:translateY(-4px) scale(1.01);border-color:#9fbdf0;box-shadow:0 22px 52px rgba(16,24,40,.16)}.role-card:hover::after{transform:scale(1.18);background:rgba(31,95,204,.11)}.role-card-top{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px}.role-card h3{position:relative;margin:0;font-size:21px}.role-card p{position:relative;margin:0;color:var(--muted);line-height:1.58}.role-card .btn{margin-top:auto;width:100%}.role-card-admin::before{background:linear-gradient(90deg,#0f3d91,#2a6ee8)}.role-card-direction::before{background:linear-gradient(90deg,#b98518,#e3b958)}.role-card-commercial::before{background:linear-gradient(90deg,#0f8a5f,#34d399)}.role-card-secretary::before{background:linear-gradient(90deg,#c77700,#f59e0b)}
.role-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:18px;background:var(--brand-soft);color:var(--brand);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 12px 28px rgba(16,24,40,.08);flex:0 0 52px}.role-icon svg{width:28px;height:28px}.role-icon svg path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.role-icon-admin{background:#e8f0ff;color:#1747b0}.role-icon-direction{background:var(--gold-soft);color:#8a5a00}.role-icon-commercial{background:#e8fbf3;color:#0f8a5f}.role-icon-secretary{background:#fff3e7;color:#b55b00}
.role-level{position:relative;padding:10px 12px;border:1px solid #dfe8f6;border-radius:14px;background:#f8fbff;color:#315197;font-size:13px;font-weight:900}.permission-pills{position:relative;display:flex;flex-wrap:wrap;gap:8px}.permission-pills span{display:inline-flex;align-items:center;padding:8px 10px;border:1px solid #e2eaf5;border-radius:999px;background:#fff;color:#42526b;font-size:12px;font-weight:800;box-shadow:0 6px 14px rgba(16,24,40,.04)}
.permissions-panel{margin-top:18px}.permissions-table-wrap{border:1px solid var(--border);border-radius:18px}.permissions-table th{white-space:nowrap}.permissions-table th:not(:first-child),.permissions-table td:not(:first-child){text-align:center}.permission-check{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:999px;font-weight:900}.permission-check.allowed{background:#e8fbf3;color:#0f8a5f}.permission-check.denied{background:#eef2f6;color:#9aa4b2}
.field-with-info{display:inline-flex;align-items:center;gap:8px}.info-dot{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:999px;background:var(--brand-soft);color:var(--brand);font-size:12px;font-weight:900;cursor:help}.role-help-card{padding:14px;border:1px solid #dfe8f6;border-radius:18px;background:linear-gradient(135deg,#ffffff,#f8fbff);box-shadow:0 10px 26px rgba(16,24,40,.07)}.role-help-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}.role-help-head .role-icon{width:42px;height:42px;border-radius:15px;flex-basis:42px}.role-help-head .role-icon svg{width:23px;height:23px}.role-help-head strong{display:block}.role-help-head span{display:block;margin-top:3px;color:var(--muted);font-size:12px;font-weight:800}.role-help-card p{margin:0;color:var(--muted);line-height:1.55}
.role-modal{min-width:0}.role-detail-hero{display:grid;grid-template-columns:72px 1fr;gap:16px;align-items:center;padding:18px;border:1px solid #dfe8f6;border-radius:22px;background:linear-gradient(135deg,#fff,#f8fbff)}.role-detail-hero .role-icon{width:72px;height:72px;border-radius:24px}.role-detail-hero .role-icon svg{width:36px;height:36px}.role-detail-hero p{margin:12px 0;color:var(--text);line-height:1.65}.role-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}.role-detail-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}.role-detail-list li{position:relative;padding:12px 14px 12px 36px;border:1px solid var(--border);border-radius:14px;background:#fbfdff;color:#42526b;font-weight:700}.role-detail-list li::before{content:"";position:absolute;left:14px;top:17px;width:9px;height:9px;border-radius:999px;background:linear-gradient(135deg,var(--brand-2),var(--gold))}
.subscription-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:22px;margin-bottom:18px;background:linear-gradient(135deg,#fff,#f6f9ff 55%,#fff7e8);flex-wrap:wrap;min-width:0;max-width:100%}.subscription-hero>div{min-width:0;flex:1 1 260px}.subscription-hero h2{margin:0;font-size:clamp(1.05rem,3.5vw,1.5rem);word-wrap:break-word;overflow-wrap:anywhere}.subscription-hero p{margin:8px 0 0;color:var(--muted);line-height:1.6}.subscription-plan-pills{display:grid;gap:10px;min-width:240px}.subscription-plan-pills span{display:flex;justify-content:space-between;gap:12px;padding:11px 13px;border:1px solid rgba(200,155,60,.28);border-radius:999px;background:#fff;font-weight:800}.subscription-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:12px;margin-bottom:16px;min-width:0}.subscription-filters input,.subscription-filters select{width:100%;min-width:0;max-width:100%}.subscription-row-active td:first-child{border-left:4px solid var(--success)}.subscription-row-warning td:first-child{border-left:4px solid var(--warning)}.subscription-row-danger td:first-child{border-left:4px solid var(--danger)}.subscription-row-confirmed td:first-child{border-left:4px solid var(--brand-2)}.form-section{padding:18px;border:1px solid var(--border);border-radius:18px;background:#fbfdff}.form-section h4{margin:0 0 14px;color:var(--brand)}.important-box{padding:16px;border:1px solid #e3b958;border-radius:18px;background:#fff7e8;color:#5f3c00}.important-box h4{margin:0 0 10px}.important-box ul{margin:0;padding-left:20px;line-height:1.65}.declaration-list{display:grid;gap:10px}.checkline{display:flex;grid-template-columns:none;align-items:flex-start;gap:10px;padding:12px;border:1px solid var(--border);border-radius:14px;background:#fff;font-weight:700;line-height:1.45}.checkline input{margin-top:3px}.signature-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.signature-card{padding:16px;border:1px dashed #c7d8f2;border-radius:18px;background:#fff}.signature-card h5{margin:0 0 12px;color:var(--brand)}.progress-card{padding:16px;border:1px solid #dbe7ff;border-radius:20px;background:linear-gradient(135deg,#fff,#f5f9ff);margin-bottom:18px}.progress-bar{height:12px;border-radius:999px;background:#e8eef7;overflow:hidden;margin:8px 0 14px}.progress-bar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--brand-2),var(--gold))}.progress-grid{margin-bottom:0}
@media print{.sidebar,.toolbar,.search-row,.subscription-filters,.btn,.modal-backdrop,.app-mobile-header,.sidebar-scrim{display:none!important}.app-shell{display:block}.main{padding:0}body{background:#fff}}
@media (max-width:1200px){.role-cards-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:767px){.form-cols,.form-cols-3{grid-template-columns:1fr}}
@media (max-width:1023px){
  .sidebar-scrim{display:block}
  .app-mobile-header{display:flex}
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:min(300px,90vw);max-width:100%;height:auto;min-height:100%;min-height:100dvh;max-height:100dvh;transform:translateX(-100%);transition:transform .26s var(--ease);box-shadow:8px 0 32px rgba(0,0,0,.12);align-self:stretch}
  .app-shell.nav-open .sidebar{transform:translateX(0)}
  .main{padding:12px 14px}
}
@media (max-width:860px){
  .auth-shell{grid-template-columns:1fr}
  .feature-list,.role-cards-grid,.role-detail-grid,.signature-grid{grid-template-columns:1fr}
  .topbar{flex-direction:column;align-items:stretch}
  .alert-strip,.roles-hero,.subscription-hero{align-items:flex-start;flex-direction:column}
  .roles-hero-metric{width:100%;text-align:left}
  .subscription-hero h2{font-size:clamp(1.1rem,4vw,1.45rem);word-wrap:break-word}
  .subscription-plan-pills{min-width:0;width:100%;max-width:100%}
  .subscription-plan-pills span{flex-wrap:wrap;white-space:normal}
  .role-card:hover{transform:translateY(-1px) scale(1.005)}.nav button:hover,.btn:hover,.stat:hover,.panel:hover,.alert-card:hover{transform:translateY(-1px)}
}
@media (max-width:560px){.roles-hero{padding:20px}.roles-hero h2{font-size:23px}.role-detail-hero{grid-template-columns:1fr}.role-detail-hero .role-icon{width:60px;height:60px}.permissions-table th,.permissions-table td{padding:10px 8px;font-size:12px}.b2ix-toast{right:10px;left:10px;bottom:max(12px,env(safe-area-inset-bottom))}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}.btn:hover,.nav button:hover,.stat:hover,.panel:hover,.alert-card:hover,.card:hover,.role-card:hover{transform:none!important}}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.signed-physical-form-card .signed-form-card{border:1px solid #dbe4f0;border-radius:20px;padding:20px 20px 18px;background:linear-gradient(180deg,#fff,#fbfdff);box-shadow:0 6px 18px rgba(16,24,40,.06)}.signed-form-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:8px}.signed-form-card h4{margin:0 0 6px}.signed-form-desc{margin:0;color:var(--muted);line-height:1.55;max-width:720px}.signed-form-fileline{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:6px}.signed-form-fileline-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.signed-form-cta{margin-top:4px}.signed-form-h5{margin:0 0 6px;font-size:14px;color:var(--brand)}
.b2ix-toast{position:fixed;right:20px;bottom:22px;max-width:min(92vw,420px);padding:14px 18px;border-radius:16px;box-shadow:0 12px 40px rgba(16,24,40,.2);z-index:200;font-weight:800;font-size:14px;opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .25s var(--ease)}.b2ix-toast-visible{opacity:1;transform:translateY(0)}.b2ix-toast-success{background:#e8fbf3;border:1px solid #9ee0c0;color:#0a5c40}.b2ix-toast-error,.b2ix-toast-info{background:#fff7f0;border:1px solid #f0c17d;color:#6b3d00}