:root{--primary:#0f766e;--primary2:#d6a641;--bg:#f4f7fb;--surface:#ffffff;--surface2:#eef2f7;--text:#15202b;--muted:#6b7280;--border:#dbe3ee;--danger:#dc2626;--success:#16a34a;--warning:#f59e0b;--shadow:0 12px 35px rgba(15,23,42,.08);--radius:18px;--sidebar:310px;--topbar:76px}
[data-theme="dark"]{--bg:#0b1220;--surface:#111827;--surface2:#172033;--text:#e5e7eb;--muted:#9ca3af;--border:#243149;--shadow:0 15px 40px rgba(0,0,0,.25)}
[data-palette="royal"]{--primary:#3151d3;--primary2:#8b5cf6}
[data-palette="burgundy"]{--primary:#9f1239;--primary2:#d97706}
[data-palette="steel"]{--primary:#334155;--primary2:#06b6d4}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:'Cairo','Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden}body{font-size:14px}button,input,select,textarea{font-family:inherit}button{cursor:pointer}.app{min-height:100vh;display:flex}.sidebar{width:var(--sidebar);position:fixed;inset-inline-start:0;top:0;bottom:0;background:linear-gradient(180deg,var(--surface),var(--surface2));border-inline-end:1px solid var(--border);z-index:40;display:flex;flex-direction:column;transition:.25s ease;box-shadow:var(--shadow)}.brand{height:var(--topbar);display:flex;align-items:center;gap:12px;padding:0 20px;border-bottom:1px solid var(--border)}.logo{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;display:grid;place-items:center;font-weight:900}.brand h1{font-size:17px;margin:0;line-height:1.2}.brand small{display:block;color:var(--muted);font-size:11px}.nav{padding:14px;overflow:auto}.nav-section{margin:10px 0}.nav-title{color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase;padding:10px}.nav-item{width:100%;border:0;background:transparent;color:var(--text);display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:14px;text-align:inherit;margin:3px 0;font-weight:700}.nav-item:hover,.nav-item.active{background:linear-gradient(90deg,color-mix(in srgb,var(--primary) 14%,transparent),transparent);color:var(--primary)}.nav-item i{width:22px;text-align:center;font-size:15px}.badge{margin-inline-start:auto;background:var(--surface2);color:var(--muted);font-size:11px;border:1px solid var(--border);padding:2px 7px;border-radius:99px}.main{margin-inline-start:var(--sidebar);width:calc(100% - var(--sidebar));min-height:100vh}.topbar{height:var(--topbar);position:sticky;top:0;background:rgba(255,255,255,.7);backdrop-filter:blur(12px);z-index:30;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;padding:0 20px}[data-theme="dark"] .topbar{background:rgba(17,24,39,.75)}.hamb{display:none;border:0;background:var(--surface2);width:42px;height:42px;border-radius:14px;color:var(--text)}.search{flex:1;position:relative}.search input{width:100%;border:1px solid var(--border);background:var(--surface);border-radius:16px;padding:12px 42px;color:var(--text)}.search i{position:absolute;inset-inline-start:15px;top:50%;transform:translateY(-50%);color:var(--muted)}.top-actions{display:flex;gap:8px;align-items:center}.btn{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:13px;padding:10px 13px;display:inline-flex;align-items:center;gap:8px;font-weight:800}.btn.primary{background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 68%,#000));border-color:transparent;color:#fff}.btn.gold{background:linear-gradient(135deg,var(--primary2),#b7791f);border-color:transparent;color:#fff}.content{padding:22px;max-width:1900px;margin:auto}.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px}.page-title h2{margin:0;font-size:25px}.page-title p{color:var(--muted);margin:6px 0 0}.grid{display:grid;gap:16px}.kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.card-pad{padding:18px}.kpi{display:flex;align-items:center;gap:14px}.kpi .ico{width:47px;height:47px;border-radius:16px;display:grid;place-items:center;background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary);font-size:18px}.kpi h3{margin:0;font-size:23px}.kpi p{margin:4px 0 0;color:var(--muted);font-size:12px}.stat-row{display:grid;grid-template-columns:2fr 1fr;gap:16px}.chart{height:260px;display:flex;align-items:end;gap:10px;padding:15px;border-radius:16px;background:linear-gradient(180deg,var(--surface2),transparent);border:1px solid var(--border)}.bar{flex:1;min-width:13px;border-radius:10px 10px 0 0;background:linear-gradient(180deg,var(--primary2),var(--primary));position:relative}.bar span{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);font-size:11px;color:var(--muted);margin-bottom:5px}.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.tab{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:999px;padding:9px 13px;font-weight:800}.tab.active{background:var(--primary);color:#fff}.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:16px;background:var(--surface)}table{border-collapse:collapse;width:100%;min-width:920px}th,td{padding:12px 13px;border-bottom:1px solid var(--border);text-align:inherit;white-space:nowrap}th{background:var(--surface2);font-size:12px;color:var(--muted);font-weight:900}tr:hover td{background:color-mix(in srgb,var(--primary) 5%,transparent)}.pill{display:inline-flex;border-radius:99px;padding:5px 9px;font-size:12px;font-weight:800;border:1px solid var(--border)}.ok{color:var(--success);background:color-mix(in srgb,var(--success) 10%,transparent)}.warn{color:var(--warning);background:color-mix(in srgb,var(--warning) 10%,transparent)}.bad{color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,transparent)}.layout-split{display:grid;grid-template-columns:300px 1fr;gap:16px}.side-panel{position:sticky;top:calc(var(--topbar) + 16px);align-self:start;max-height:calc(100vh - 120px);overflow:auto}.list-btn{width:100%;border:1px solid transparent;background:transparent;color:var(--text);border-radius:13px;padding:10px 12px;text-align:inherit;margin:3px 0;display:flex;gap:8px;align-items:center}.list-btn.active,.list-btn:hover{background:var(--surface2);border-color:var(--border);color:var(--primary)}.form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.field label{display:block;font-weight:900;margin-bottom:6px;font-size:12px}.field input,.field select,.field textarea{width:100%;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:13px;padding:11px 12px;outline:none}.field textarea{min-height:96px;resize:vertical}.field small{color:var(--muted)}.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.pager{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-top:1px solid var(--border);gap:10px;flex-wrap:wrap}.modal{position:fixed;inset:0;background:rgba(2,6,23,.55);display:none;align-items:center;justify-content:center;z-index:90;padding:18px}.modal.show{display:flex}.modal-box{background:var(--surface);border-radius:22px;width:min(1100px,100%);max-height:92vh;overflow:auto;border:1px solid var(--border);box-shadow:var(--shadow)}.modal-head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--border)}.modal-body{padding:18px}.close{border:0;background:var(--surface2);width:38px;height:38px;border-radius:12px;color:var(--text)}.permissions-grid{display:grid;grid-template-columns:240px repeat(11, minmax(74px,1fr));gap:1px;overflow:auto;background:var(--border);border:1px solid var(--border);border-radius:16px}.perm-cell{background:var(--surface);padding:10px;min-height:46px;display:flex;align-items:center;justify-content:center;font-weight:800}.perm-cell.entity{justify-content:flex-start;position:sticky;inset-inline-start:0;z-index:2}.report-shell{display:grid;grid-template-columns:330px 1fr;gap:16px}.report-list{height:calc(100vh - 250px);overflow:auto}.report-toolbar{display:flex;gap:10px;flex-wrap:wrap}.report-header{position:sticky;top:var(--topbar);z-index:20;background:var(--bg);padding:10px 0}.mobile-overlay{display:none}.empty{padding:35px;text-align:center;color:var(--muted)}.two{grid-template-columns:repeat(2,minmax(0,1fr))}.three{grid-template-columns:repeat(3,minmax(0,1fr))}.mono{font-family:ui-monospace,Consolas,monospace}.section-title{font-size:16px;margin:0 0 12px}.hide{display:none!important}
@media(max-width:1200px){.kpi-grid{grid-template-columns:repeat(2,1fr)}.form-grid{grid-template-columns:repeat(2,1fr)}.layout-split,.report-shell{grid-template-columns:1fr}.side-panel{position:relative;top:auto;max-height:none}.report-list{height:auto;max-height:330px}.stat-row{grid-template-columns:1fr}}
@media(max-width:800px){:root{--topbar:68px}.hamb{display:inline-grid;place-items:center}.sidebar{transform:translateX(105%)}[dir="ltr"] .sidebar{transform:translateX(-105%)}.sidebar.open{transform:translateX(0)}.mobile-overlay.show{display:block;position:fixed;inset:0;background:rgba(2,6,23,.45);z-index:35}.main{margin-inline-start:0;width:100%}.content{padding:14px}.topbar{padding:0 12px}.search{display:none}.page-head{display:block}.page-head .actions{margin-top:12px}.kpi-grid,.form-grid,.two,.three{grid-template-columns:1fr}.top-actions .btn span{display:none}.permissions-grid{grid-template-columns:170px repeat(11,70px)}.brand{padding-inline-end:60px}}

/* QA polish 2026-06-07: stronger responsive coverage */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{min-width:320px;overflow-x:hidden}
button,select,input,textarea{font:inherit;max-width:100%}
img,svg,canvas{max-width:100%;height:auto}
.topbar{position:sticky;top:0;z-index:20;backdrop-filter:blur(12px)}
.content{max-width:1920px;margin-inline:auto;width:100%}
.table-wrap{max-width:100%;overflow:auto;-webkit-overflow-scrolling:touch}
.table-wrap table{min-width:760px}
.report-shell{align-items:start}
.report-list{max-height:calc(100vh - 330px);overflow:auto;padding-inline-end:4px}
.form-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.modal-box{max-height:92vh;overflow:auto;width:min(1120px,calc(100vw - 24px))}
.chart{min-height:210px}
.list-btn,.nav-item,.btn{touch-action:manipulation}

@media (min-width:1600px){
  :root{--sidebar:340px}.content{padding:28px}.kpi-grid{grid-template-columns:repeat(4,1fr)}.three{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1366px){
  :root{--sidebar:292px}.content{padding:18px}.page-head{gap:14px}.kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:1180px){
  .topbar{gap:10px}.top-actions{gap:8px;flex-wrap:wrap}.search{min-width:220px}.stat-row,.two{grid-template-columns:1fr}.report-shell{grid-template-columns:300px minmax(0,1fr)}
}
@media (max-width:992px){
  .sidebar{position:fixed;inset-block:0;inset-inline-start:calc(-1 * var(--sidebar));height:100vh;z-index:60;transition:.22s ease}.sidebar.open{inset-inline-start:0}.main{margin-inline-start:0;width:100%}.hamb{display:inline-flex}.mobile-overlay.show{display:block}.topbar{padding:12px;align-items:flex-start}.search{order:3;width:100%;flex-basis:100%}.top-actions{margin-inline-start:0}.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.report-shell{grid-template-columns:1fr}.report-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-height:260px}.permissions-grid{overflow:auto;display:grid;min-width:920px}.card{border-radius:16px}
}
@media (max-width:768px){
  .content{padding:12px}.page-head{flex-direction:column;align-items:stretch}.page-head .actions,.actions{justify-content:flex-start;overflow:auto}.top-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}.top-actions .btn,.top-actions select{width:100%;justify-content:center}.kpi-grid,.three{grid-template-columns:1fr}.report-list{grid-template-columns:1fr}.tabs{overflow:auto;flex-wrap:nowrap}.tab{white-space:nowrap}.modal-box{width:calc(100vw - 12px);max-height:96vh}.modal-head{position:sticky;top:0;background:var(--surface);z-index:3}.form-grid{grid-template-columns:1fr}.pager{flex-direction:column;align-items:stretch}.pager .actions{display:grid;grid-template-columns:repeat(3,1fr)}
}
@media (max-width:430px){
  :root{--radius:14px}.brand h1{font-size:15px}.brand small{font-size:11px}.content{padding:10px}.topbar{border-radius:0}.btn{padding:9px 10px}.kpi h3{font-size:22px}.page-title h2{font-size:20px}.table-wrap table{min-width:640px}.report-toolbar{flex-direction:column;align-items:stretch}.report-toolbar>*{width:100%}.chart{min-height:170px}.pager .actions{grid-template-columns:1fr 1fr}
}
@media print{
  .sidebar,.topbar,.mobile-overlay,.actions,.btn{display:none!important}.main{margin:0!important}.content{padding:0}.card{box-shadow:none;border:1px solid #ddd;break-inside:avoid}.table-wrap{overflow:visible}body{background:white;color:#111}
}

/* Seller settlements deep business model screens */
.settlement-hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);gap:16px;align-items:start}
.formula-box{display:grid;gap:10px;border:1px dashed var(--border);background:linear-gradient(180deg,var(--surface2),transparent);border-radius:16px;padding:14px}
.formula-box code{display:block;white-space:normal;line-height:1.7;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px;color:var(--text)}
.formula-total{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--border);padding-top:12px;color:var(--muted)}
.formula-total b{font-size:24px;color:var(--success)}
.statement-list{display:grid;gap:8px}.statement-list>div{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--border);background:var(--surface2);border-radius:12px}.statement-list span{color:var(--muted)}
.chips{display:flex;gap:8px;flex-wrap:wrap}.chips span{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:999px;padding:8px 10px;background:var(--surface2);font-weight:800}.chips i{color:var(--success)}
.business-flow{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:16px}.flow-step{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:16px;min-height:150px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:9px}.flow-step i{width:42px;height:42px;border-radius:14px;background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary);display:grid;place-items:center;font-size:18px}.flow-step b{font-size:15px}.flow-step small{color:var(--muted);line-height:1.7}
@media(max-width:1200px){.settlement-hero{grid-template-columns:1fr}.business-flow{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:768px){.business-flow{grid-template-columns:1fr}.formula-total{align-items:flex-start;flex-direction:column}.formula-total b{font-size:20px}}

/* Final mobile/report/permission polish 2026-06-07 */
*{box-sizing:border-box}
.main,.content,.card,.page-head,.report-shell,.report-list,#reportDetail,.topbar,.tabs{min-width:0}
.page-head{overflow:hidden}
.page-head .actions,.top-actions,.report-toolbar{max-width:100%;min-width:0}
.page-head .actions{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.report-header{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:14px}
.tabs{display:flex;gap:8px;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.tab{flex:0 0 auto}
.list-btn span{white-space:normal;line-height:1.65;word-break:break-word}
.list-btn i{flex:0 0 auto;margin-top:3px}.report-list .list-btn{align-items:flex-start}
#reportDetail .card{overflow:hidden}.report-shell>.card{min-width:0}.report-shell{width:100%}
.permissions-grid{max-width:100%;-webkit-overflow-scrolling:touch}.perm-cell{white-space:normal;text-align:center}.perm-cell.entity{text-align:inherit;line-height:1.5}
@media(max-width:992px){
  .report-shell{grid-template-columns:1fr!important}.report-shell>.card{width:100%}.report-list{display:block!important;max-height:360px;width:100%}
  .report-header{position:relative!important;top:auto!important;background:transparent!important;padding:8px 0}
  .permissions-grid{min-width:860px}.page-head .actions .btn{flex:0 0 auto}
}
@media(max-width:560px){
  body{width:100%;max-width:100vw;overflow-x:hidden}.content{padding:10px!important}.topbar{width:100%;max-width:100vw;overflow:hidden}.top-actions{grid-template-columns:1fr 1fr!important;gap:6px}.top-actions .btn,.top-actions select{font-size:12px;padding:8px 7px}
  .page-head{padding:14px!important;border-radius:16px}.page-title h2{font-size:20px;line-height:1.55}.page-title p{font-size:12px;line-height:1.8}.page-head .actions{display:flex;flex-wrap:nowrap}.page-head .actions .btn{min-width:max-content}
  .report-shell{gap:10px}.report-shell .card-pad{padding:12px!important}.report-list{max-height:300px}.report-list .list-btn{font-size:12.5px;padding:9px 8px;margin:2px 0}.report-list .list-btn i{font-size:12px}.tabs{gap:6px}.tab{font-size:12px;padding:9px 11px}
  .form-grid{gap:10px}.field label{font-size:11.5px}.field input,.field select,.field textarea{padding:10px;border-radius:11px}.kpi{padding:12px;border-radius:14px}.kpi h3{font-size:20px}.chart{min-height:150px}.card{border-radius:15px}.table-wrap table{min-width:620px}
  .permissions-grid{min-width:760px;grid-template-columns:150px repeat(11,55px)!important}.perm-cell{font-size:11px;padding:8px 6px}.perm-cell.entity{font-size:11.5px}.perm-cell input{transform:scale(.95)}
}
@media(max-width:380px){
  .content{padding:8px!important}.top-actions{grid-template-columns:1fr!important}.btn{font-size:12px}.page-head .actions{gap:6px}.page-head .actions .btn{padding:8px 9px}.report-list{max-height:280px}.table-wrap table{min-width:560px}.permissions-grid{min-width:700px;grid-template-columns:135px repeat(11,50px)!important}
}

/* Permissions redesign - department focused matrix */
.permission-layout{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;align-items:stretch}.permission-control h3{margin-top:0}.form-grid.compact{grid-template-columns:repeat(4,minmax(0,1fr))}.perm-template-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.permission-summary{height:100%}.perm-headline{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}.perm-headline h3{margin:0}.perm-headline p{margin:5px 0 0;color:var(--muted)}.perm-headline input{width:min(360px,100%);border:1px solid var(--border);border-radius:14px;padding:11px 12px;background:var(--surface);color:var(--text)}.permission-table-wrap{overflow:auto;border:1px solid var(--border);border-radius:18px;background:var(--surface)}.permission-table{min-width:760px;width:100%;border-collapse:collapse}.permission-table th,.permission-table td{text-align:center;vertical-align:middle}.permission-table th:first-child,.permission-table td:first-child{text-align:inherit;position:sticky;inset-inline-start:0;background:var(--surface);z-index:2;box-shadow:6px 0 18px rgba(15,23,42,.04)}.permission-table th:first-child{background:var(--surface2);z-index:3}.screen-name span{display:block;font-weight:900}.screen-name small{display:block;color:var(--muted);font-size:11px;margin-top:3px;direction:ltr}.perm-toggle{width:34px;height:34px;border-radius:11px;border:1px solid var(--border);display:inline-grid;place-items:center;background:var(--surface2);color:var(--muted);transition:.18s}.perm-toggle.on{background:color-mix(in srgb,var(--success) 15%,var(--surface));color:var(--success);border-color:color-mix(in srgb,var(--success) 35%,var(--border))}.perm-toggle.off{background:color-mix(in srgb,var(--danger) 7%,var(--surface));color:var(--danger);opacity:.78}.permission-note{margin-top:12px;color:var(--muted);display:flex;align-items:center;gap:8px;font-weight:700}.permission-note i{color:var(--primary)}
@media(max-width:1100px){.permission-layout{grid-template-columns:1fr}.form-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr))}.permission-summary{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.form-grid.compact,.permission-summary{grid-template-columns:1fr}.perm-headline{display:block}.perm-headline input{margin-top:12px;width:100%}.permission-table{min-width:620px}.permission-table th,.permission-table td{padding:10px 8px}.permission-table th:first-child,.permission-table td:first-child{min-width:190px}.perm-toggle{width:30px;height:30px}.permission-note{align-items:flex-start;font-size:12px}}

/* Department grouped permissions final UX */
.permission-layout.full{grid-template-columns:1.25fr 1fr}.permission-layout.full .permission-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.muted-text{color:var(--muted);line-height:1.8;margin-top:0}.permission-groups{display:grid;gap:14px}.perm-dept-block{border:1px solid var(--border);border-radius:18px;background:var(--surface);overflow:hidden;box-shadow:0 8px 24px rgba(15,23,42,.035)}.perm-dept-title{width:100%;border:0;background:linear-gradient(90deg,color-mix(in srgb,var(--primary) 9%,var(--surface)),var(--surface));color:var(--text);padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;text-align:inherit}.perm-dept-title>span:first-child{display:flex;align-items:center;gap:12px;min-width:0}.perm-dept-title i.fa-folder-tree{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--primary) 13%,transparent);color:var(--primary)}.perm-dept-title b{display:block;font-size:17px}.perm-dept-title small{display:block;color:var(--muted);font-size:12px;margin-top:4px}.dept-stats{display:flex!important;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.dept-stats em{font-style:normal;border:1px solid var(--border);background:var(--surface2);padding:7px 9px;border-radius:999px;font-size:12px;font-weight:900;color:var(--muted)}.dept-stats em.danger{color:var(--danger)}.dept-stats .fa-chevron-down{color:var(--muted)}.perm-dept-body{display:none;padding:14px}.perm-dept-body.open{display:block}.perm-group-toolbar{display:flex;justify-content:space-between;gap:12px;margin-bottom:12px}.department-matrix th:last-child,.department-matrix td:last-child{min-width:96px}.row-tools{white-space:nowrap}.mini-action{width:32px;height:32px;border-radius:10px;border:1px solid var(--border);background:var(--surface2);color:var(--primary);cursor:pointer;margin-inline:2px}.mini-action.danger{color:var(--danger);background:color-mix(in srgb,var(--danger) 7%,var(--surface))}.danger-soft{color:var(--danger)!important;background:color-mix(in srgb,var(--danger) 8%,var(--surface))!important}.perm-mini-legend{display:flex;gap:8px;flex-wrap:wrap}.perm-mini-legend span{border:1px solid var(--border);background:var(--surface2);border-radius:999px;padding:8px 10px;font-weight:900;color:var(--muted)}.perm-mini-legend .fa-check{color:var(--success)}.perm-mini-legend .fa-xmark{color:var(--danger)}.screen-name [contenteditable="true"]{outline:0;border-radius:8px;padding:3px 5px}.screen-name [contenteditable="true"]:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 25%,transparent);background:var(--surface2)}
@media(max-width:1100px){.permission-layout.full{grid-template-columns:1fr}.permission-layout.full .permission-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.perm-dept-title{align-items:flex-start}.dept-stats{justify-content:flex-start}}
@media(max-width:700px){.permission-layout.full .permission-summary{grid-template-columns:1fr}.perm-dept-title{display:block}.dept-stats{margin-top:10px}.perm-dept-body{padding:10px}.perm-group-toolbar .perm-template-actions{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}.perm-group-toolbar .btn{flex:0 0 auto}.department-matrix{min-width:760px}.perm-mini-legend{margin-top:10px}.perm-dept-title b{font-size:15px}.dept-stats em{font-size:11px;padding:6px 8px}}
/* Final review fixes: clickable department teams + product media/warranty UX */
.team-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.team-stats{display:grid;grid-template-columns:repeat(4,minmax(80px,1fr));gap:10px;margin-top:14px}
.team-stats>div{border:1px solid var(--border);background:var(--soft);border-radius:16px;padding:12px;text-align:center}
.team-stats b{display:block;font-size:20px;color:var(--text)}
.team-stats span{display:block;color:var(--muted);font-size:12px;margin-top:4px}
.special-form-note{display:flex;gap:14px;align-items:flex-start;background:linear-gradient(135deg,var(--soft),transparent);border:1px solid var(--border);border-radius:18px;padding:14px;margin-bottom:16px}
.special-form-note i{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border-radius:14px;background:var(--primary);color:white;font-size:18px;flex:0 0 auto}
.special-form-note b{display:block;margin-bottom:4px;color:var(--text)}
.special-form-note p{margin:0;color:var(--muted);line-height:1.7}
.media-preview-zone{border:1px dashed var(--border);border-radius:18px;padding:14px;margin-top:14px;background:var(--surface)}
.media-preview-zone h4{margin:0 0 12px 0}
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:12px}
.media-tile{position:relative;border:1px solid var(--border);border-radius:16px;overflow:hidden;background:var(--soft);padding:10px;min-height:150px;display:flex;flex-direction:column;gap:6px;align-items:stretch}
.media-tile img,.media-tile video{width:100%;height:100px;object-fit:cover;border-radius:12px;background:#111}
.media-tile b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.media-tile small{color:var(--muted)}
.media-tile.empty{align-items:center;justify-content:center;text-align:center;color:var(--muted)}
.media-tile.empty i{font-size:30px;margin-bottom:8px;color:var(--primary)}
.badge-mini{position:absolute;top:8px;inset-inline-start:8px;background:var(--primary);color:#fff;border-radius:999px;padding:3px 8px;font-size:11px;z-index:2}
@media(max-width:700px){.team-stats{grid-template-columns:repeat(2,1fr)}.team-card-head{align-items:stretch}.team-card-head .btn{width:100%}.media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.special-form-note{flex-direction:column}.table-wrap{overflow-x:auto}}
@media(max-width:420px){.media-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr!important}.actions{flex-wrap:wrap}.actions .btn{flex:1 1 140px}}
/* Binding readiness additions */
.api-ready-card{border:1px dashed color-mix(in srgb,var(--primary),transparent 45%)}
.api-ready-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.api-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:10px 0}
.api-grid>div{background:var(--soft);border:1px solid var(--border);border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:6px;min-width:0}
.api-grid code{direction:ltr;text-align:left;white-space:normal;word-break:break-all;font-size:12px;background:rgba(0,0,0,.04);padding:6px;border-radius:8px}
.pill.warn{background:#fff5d6;color:#8a5b00;border-color:#f2d184}
@media (max-width:760px){.api-grid{grid-template-columns:1fr}.api-ready-head{align-items:flex-start}.permission-table th,.permission-table td{min-width:88px}.permission-table .screen-name{min-width:210px}}
.safe-grid span{color:var(--muted);font-size:13px;line-height:1.7}
.safe-grid b{font-size:13px}

/* Aseel secure login pages */
.login-page{min-height:100vh;background:radial-gradient(circle at top right,rgba(2,132,199,.22),transparent 28%),radial-gradient(circle at bottom left,rgba(212,175,55,.22),transparent 24%),linear-gradient(135deg,#071821,#0f3440 48%,#102d35);display:flex;align-items:center;justify-content:center;padding:24px;font-family:Cairo,Inter,sans-serif;color:#ecfeff;overflow:hidden;position:relative}.login-page:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:42px 42px;mask-image:radial-gradient(circle,#000 0%,transparent 72%)}.login-shell{width:min(1080px,100%);display:grid;grid-template-columns:1.05fr .95fr;gap:22px;position:relative;z-index:1}.login-brand,.login-card{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.10);box-shadow:0 30px 90px rgba(0,0,0,.32);backdrop-filter:blur(18px);border-radius:30px}.login-brand{padding:34px;display:flex;flex-direction:column;justify-content:space-between;min-height:570px}.brand-mark{width:78px;height:78px;border-radius:24px;background:linear-gradient(135deg,#d4af37,#fff2b1);display:grid;place-items:center;color:#102d35;font-size:32px;box-shadow:0 20px 45px rgba(212,175,55,.2)}.login-brand h1{font-size:44px;line-height:1.25;margin:24px 0 10px;font-weight:900}.login-brand p{color:#c8f3f1;font-size:17px;line-height:1.9;max-width:570px}.login-points{display:grid;gap:12px;margin-top:28px}.login-point{display:flex;gap:12px;align-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);padding:13px 14px;border-radius:18px;color:#f8ffff}.login-point i{color:#f4d46b}.login-card{padding:34px;align-self:center}.login-card h2{font-size:30px;margin:0 0 8px;font-weight:900}.login-card .sub{color:#c8f3f1;margin:0 0 22px;line-height:1.8}.login-form{display:grid;gap:16px}.login-field label{display:block;margin-bottom:7px;font-weight:800;color:#fff}.login-input{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.96);border-radius:16px;border:1px solid rgba(255,255,255,.2);padding:0 14px;color:#0b2230}.login-input i{color:#0f766e}.login-input input{width:100%;border:0;outline:0;background:transparent;padding:15px 0;font-family:inherit;font-size:15px;color:#0b2230}.login-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:2px}.login-actions a{color:#ffe082;text-decoration:none;font-weight:800}.login-btn{width:100%;border:0;border-radius:17px;padding:15px 18px;margin-top:4px;background:linear-gradient(135deg,#d4af37,#fff0a8);color:#0e2f38;font-family:inherit;font-weight:900;font-size:16px;cursor:pointer;box-shadow:0 18px 44px rgba(212,175,55,.25)}.login-btn:disabled{opacity:.65;cursor:not-allowed}.login-error{display:none;padding:12px 14px;border-radius:16px;background:rgba(220,38,38,.16);border:1px solid rgba(248,113,113,.35);color:#fecaca;line-height:1.7}.login-note{margin-top:18px;padding:13px 14px;border-radius:18px;background:rgba(14,165,233,.12);border:1px solid rgba(125,211,252,.25);color:#dff9ff;line-height:1.8}.contact-grid{display:grid;gap:12px;margin-top:18px}.contact-card{display:flex;align-items:center;gap:12px;padding:14px;border-radius:18px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.12);color:#fff;text-decoration:none}.contact-card i{color:#f4d46b}.login-footer{margin-top:22px;color:#bde9e6;font-size:13px}.danger{border-color:rgba(239,68,68,.28)!important;color:#ef4444!important}@media(max-width:850px){.login-shell{grid-template-columns:1fr}.login-brand{min-height:auto}.login-brand h1{font-size:32px}.login-card{padding:24px}}

/* local icon fallback */
.fa-solid,.fa-brands{font-style:normal;display:inline-flex;align-items:center;justify-content:center;min-width:1em}
.fa-solid:before,.fa-brands:before{content:'•'}
.fa-gauge-high:before{content:'📊'}.fa-shield-halved:before{content:'🛡️'}.fa-user:before{content:'👤'}.fa-key:before{content:'🔑'}.fa-right-to-bracket:before{content:'➡️'}.fa-spinner:before{content:'⏳'}.fa-headset:before{content:'🎧'}.fa-phone:before{content:'☎️'}.fa-whatsapp:before{content:'💬'}.fa-envelope:before{content:'✉️'}.fa-arrow-right:before{content:'↩️'}.fa-bars:before{content:'☰'}.fa-magnifying-glass:before{content:'🔎'}.fa-moon:before{content:'🌙'}.fa-language:before{content:'🌐'}.fa-right-from-bracket:before{content:'🚪'}.fa-rotate:before{content:'🔄'}.fa-file-export:before{content:'⬇️'}.fa-print:before{content:'🖨️'}.fa-plus:before{content:'+'}.fa-eye:before{content:'👁️'}.fa-pen:before{content:'✏️'}.fa-trash:before{content:'🗑️'}


/* Live binding UX: record navigation + paged lookup selects */
.record-nav{grid-column:1/-1;border:1px dashed color-mix(in srgb,var(--primary) 42%,var(--border));background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 7%,var(--surface)),var(--surface));border-radius:18px;padding:13px 14px;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.record-nav-info b{display:block;color:var(--text);font-size:14px}.record-nav-info span,.record-nav small{display:block;color:var(--muted);font-size:12px;margin-top:4px}.record-nav .actions .btn{padding:8px 10px;border-radius:11px}
.lookup-box{display:grid;grid-template-columns:1fr;gap:8px}.lookup-actions{display:flex;gap:8px;justify-content:flex-end}.lookup-actions .btn{padding:7px 10px;border-radius:10px;font-size:12px}.lookup-select option{white-space:normal}.lookup-wrap small{display:block;margin-top:6px;line-height:1.5}.field input[readonly]{background:var(--surface2);color:var(--muted)}
@media(max-width:700px){.record-nav{align-items:stretch}.record-nav .actions{width:100%}.record-nav .actions .btn{flex:1 1 45%}.lookup-actions .btn{flex:1}}

/* Aseel runtime UX fixes */
.aseel-toast{position:fixed;z-index:99999;left:24px;bottom:24px;max-width:420px;direction:rtl}
.aseel-toast-card{background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;color:var(--text)}
.aseel-toast-card.ok{border-color:rgba(16,185,129,.45)}
.aseel-toast-card.warn{border-color:rgba(245,158,11,.55)}
.aseel-toast-card.danger-soft{border-color:rgba(239,68,68,.55)}
.aseel-toast-card.primary{border-color:rgba(20,184,166,.45)}
.aseel-toast-card span{color:var(--muted);line-height:1.6}

/* 20260609 readiness polish */
.nav-item.soft-disabled{opacity:.72}
.nav-item .badge.ok{background:rgba(20,150,110,.14);color:#0f8c64;border:1px solid rgba(20,150,110,.25)}
.nav-item .badge.warn{background:rgba(193,134,31,.14);color:#a76e0d;border:1px solid rgba(193,134,31,.25)}
.nav-item .badge.info{background:rgba(72,119,205,.14);color:#315ea8;border:1px solid rgba(72,119,205,.25)}
.pill.info{background:rgba(72,119,205,.14);color:#315ea8;border:1px solid rgba(72,119,205,.25)}
.pill.danger-soft{background:rgba(205,72,72,.14);color:#a83131;border:1px solid rgba(205,72,72,.25)}

/* Aseel UX cleanup: operational screens, no technical backend panels */
.operational-note{display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px dashed rgba(15,118,110,.35)}
.action-labeled .btn{position:relative}
.action-labeled .btn:hover::after{content:attr(title);position:absolute;bottom:110%;inset-inline-start:50%;transform:translateX(-50%);background:var(--text);color:var(--surface);white-space:nowrap;border-radius:10px;padding:6px 9px;font-size:12px;z-index:20;box-shadow:var(--shadow)}
.insight-list{display:grid;gap:10px}
.insight-item{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:14px;padding:10px;background:var(--surface2)}
.insight-item span{width:28px;height:28px;border-radius:10px;display:grid;place-items:center;background:rgba(15,118,110,.12);color:var(--primary);font-weight:800}
.empty-state{padding:20px;border:1px dashed var(--border);border-radius:16px;color:var(--muted);background:var(--surface2)}
/* Permissions UX hardening 20260611: hide technical API codes from operators */
.live-permission-table{min-width:860px}
.live-permission-table .perm-id{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:30px;border-radius:999px;background:var(--surface2);border:1px solid var(--border);font-weight:900;color:var(--muted)}
.live-permission-table .perm-friendly{text-align:inherit!important}
.live-permission-table .perm-friendly b{display:block;font-size:14px;color:var(--text)}
.live-permission-table .perm-friendly small{display:block;margin-top:4px;color:var(--muted);font-weight:700}
.perm-action-badge{font-weight:900;min-width:76px;justify-content:center}
/* 20260611 department-team permissions fixes */
.input-with-eye{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:14px;background:var(--card);padding:0 8px}
.input-with-eye input{border:0!important;box-shadow:none!important;background:transparent!important;flex:1;min-width:0}
.eye-btn{width:34px;height:34px;border:0;background:transparent;color:var(--muted);cursor:pointer;border-radius:10px}
.eye-btn:hover{background:var(--soft);color:var(--text)}
.dept-team-card .team-stats b{font-size:20px}
.table-wrap small{display:block;color:var(--muted);margin-top:4px;font-size:11px}

/* 20260611 modal/action cleanup */
.action-labeled .btn:hover::after{display:none!important;content:none!important}
.actions .btn[aria-label]{position:relative}
.modal-head{position:sticky;top:0;background:var(--surface);z-index:6}
.modal-head .close,.brand .close{display:inline-flex!important;align-items:center;justify-content:center;border:1px solid var(--border);background:var(--surface2);color:var(--text);font-size:0;line-height:1;box-shadow:none;flex:0 0 auto}
.modal-head .close::before,.brand .close::before{content:'×';font-size:24px;font-weight:900;line-height:1;color:var(--text)}
.modal-head .close i,.brand .close i{display:none!important}
.modal-head .close:hover,.brand .close:hover{background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.35);color:#ef4444}
.modal-head .close:hover::before,.brand .close:hover::before{color:#ef4444}
.nav-title{letter-spacing:0;text-transform:none;font-size:12px;color:var(--primary);background:color-mix(in srgb,var(--primary) 6%,transparent);border-radius:12px;margin:6px 0}

/* UX cleanup 20260615: professional searchable selects, selected chip, no raw technical ids */
.lookup-box.clean-lookup{border:1px solid var(--border);border-radius:18px;padding:10px;background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface) 88%,var(--soft)));box-shadow:0 8px 22px rgba(15,23,42,.04)}
.lookup-box.clean-lookup .lookup-search{border:1px solid color-mix(in srgb,var(--primary) 20%,var(--border));border-radius:14px;padding:11px 13px;background:var(--surface);color:var(--text);outline:none}
.lookup-box.clean-lookup .lookup-search:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 14%,transparent)}
.lookup-box.clean-lookup .lookup-select{min-height:42px;border:1px solid var(--border);border-radius:14px;padding:8px 10px;background:var(--surface);color:var(--text)}
.lookup-selected-chip{display:flex;align-items:center;gap:7px;min-height:34px;width:max-content;max-width:100%;border:1px dashed var(--border);border-radius:999px;padding:6px 11px;color:var(--muted);background:var(--soft);font-size:12px}
.lookup-selected-chip i{display:none;color:var(--primary)}
.lookup-wrap.has-selection .lookup-selected-chip{border-style:solid;border-color:color-mix(in srgb,var(--primary) 35%,var(--border));background:color-mix(in srgb,var(--primary) 8%,var(--surface));color:var(--text);font-weight:700}
.lookup-wrap.has-selection .lookup-selected-chip i{display:inline-block}
.lookup-page-info{display:inline-flex;align-items:center;color:var(--muted);font-size:12px;padding:0 4px}
.muted-cell{color:var(--muted);font-size:12px}
.action-labeled .btn[aria-label]{position:relative}
.action-labeled .btn[aria-label]:hover::after{content:attr(aria-label);position:absolute;bottom:calc(100% + 6px);inset-inline-end:0;background:var(--text);color:var(--surface);white-space:nowrap;border-radius:10px;padding:5px 8px;font-size:11px;box-shadow:var(--shadow);z-index:5}
.media-preview-zone{border:1px solid color-mix(in srgb,var(--primary) 20%,var(--border));border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 5%,var(--surface)),var(--surface));padding:14px;margin-top:14px}
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.media-tile{min-height:190px}.media-tile img,.media-tile video{height:130px;object-fit:cover}.media-tile .btn{width:100%;justify-content:center}
.special-form-note{border-radius:18px}
@media(max-width:700px){.lookup-actions{justify-content:stretch}.lookup-actions .btn,.lookup-page-info{flex:1;justify-content:center}.media-grid{grid-template-columns:repeat(auto-fill,minmax(135px,1fr))}}

/* Aseel V3 Brand media UX */
.hidden-technical-url{display:none!important}
.media-manager-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}

/* V20 executive dashboard / reports / profile polish */
.pro-chart{position:relative;padding-bottom:36px;align-items:end;gap:8px}
.pro-chart .bar{transition:.2s ease;min-height:8px}
.pro-chart .bar em{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) rotate(-25deg);font-style:normal;font-size:10px;color:var(--muted);white-space:nowrap;max-width:68px;overflow:hidden;text-overflow:ellipsis}
.action-labeled .btn.gold{background:color-mix(in srgb,var(--primary2) 16%,var(--surface));border-color:color-mix(in srgb,var(--primary2) 35%,var(--border));color:#a16207}
@media print{.sidebar,.topbar,.page-head .actions,.report-list,.report-header,.mobile-overlay{display:none!important}.main{margin:0!important;width:100%!important}.content{padding:0!important;max-width:none}.card{box-shadow:none;break-inside:avoid}.table-wrap{overflow:visible}table{min-width:0!important;font-size:11px}.grid.two,.grid.three,.kpi-grid{grid-template-columns:repeat(2,1fr)!important}}

/* V21 Reports/Profile Enhancements */
.image-upload-row{display:flex;gap:16px;align-items:center;margin-bottom:16px;flex-wrap:wrap}.image-preview{width:96px;height:96px;border:1px dashed var(--border);border-radius:18px;display:flex;align-items:center;justify-content:center;background:var(--surface);overflow:hidden;color:var(--muted);font-size:30px}.image-preview img{width:100%;height:100%;object-fit:contain}.template-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:12px 0 22px}.template-slot{border:1px solid var(--border);border-radius:16px;padding:12px;background:var(--surface)}.slot-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.slot-head select{border:1px solid var(--border);border-radius:12px;padding:8px;background:var(--card);color:var(--text)}.template-slot textarea{width:100%;min-height:72px;border:1px solid var(--border);border-radius:12px;padding:10px;background:var(--card);color:var(--text);resize:vertical}.template-slot input[type=file]{width:100%;border:1px solid var(--border);border-radius:12px;padding:10px;background:var(--card);color:var(--text)}.slot-preview{margin-top:10px;border:1px dashed var(--border);border-radius:12px;min-height:46px;padding:8px;display:flex;align-items:center;justify-content:center;color:var(--muted);text-align:center}.slot-preview img{max-width:100%;max-height:76px;object-fit:contain}.span-2{grid-column:1/-1}.report-body table,.card table{font-size:13px}.report-list .list-btn span{line-height:1.5}@media(max-width:900px){.template-grid{grid-template-columns:1fr}.image-upload-row{align-items:flex-start}}

/* V22 report PDF modal and cleaner report template layout */
.report-print-modal-v22{position:fixed;inset:0;background:rgba(15,23,42,.72);z-index:9999;display:none;padding:14px;backdrop-filter:blur(3px)}
.report-print-modal-v22.open{display:flex;align-items:stretch;justify-content:center}
.report-print-modal-v22 .rpm-panel{width:min(1180px,100%);height:calc(100vh - 28px);background:var(--surface);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden}
.report-print-modal-v22 .rpm-head{height:58px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,var(--surface),var(--surface2))}
.report-print-modal-v22 .rpm-head b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:rtl}
.report-print-modal-v22 .rpm-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.report-print-modal-v22 iframe{border:0;flex:1;width:100%;background:#fff}
@media(max-width:700px){.report-print-modal-v22{padding:6px}.report-print-modal-v22 .rpm-panel{height:calc(100vh - 12px);border-radius:14px}.report-print-modal-v22 .rpm-head{height:auto;align-items:flex-start;flex-direction:column}.report-print-modal-v22 .rpm-actions .btn{flex:1;justify-content:center}}

/* V23 Permission Templates */
.template-card{border:1px solid var(--line);transition:.18s ease;min-height:220px}
.template-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.template-head{display:flex;align-items:center;gap:8px;justify-content:space-between;margin-bottom:10px}
.template-card h3{margin:8px 0 4px;font-size:18px}
.template-card p{color:var(--muted);line-height:1.75;min-height:54px}
.template-flags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.template-flags em{font-style:normal;background:rgba(15,118,110,.10);color:var(--primary);border:1px solid rgba(15,118,110,.18);padding:4px 8px;border-radius:999px;font-size:12px}
.pill{display:inline-flex;align-items:center;gap:4px;border-radius:999px;background:rgba(99,102,241,.10);color:var(--text);padding:4px 9px;font-size:12px;border:1px solid var(--line)}
.pill.gold{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.22)}