html{background:var(--bg,#0A0D18)}
/* =====================================================================
   OpenAuth — Dashboard design system (shared by all /dashboard pages)
   Palette: "The Keyring" — dark security-tool aesthetic
   ===================================================================== */

:root{
  --bg:#0A0D18; --sidebar:#0C1020; --surface:#131A2E; --surface-2:#19223A; --panel:#10162A;
  --border:#1E2740; --border-2:#2A3550;
  --text:#EAEEF8; --dim:#9AA5C0; --faint:#646C88;
  --primary:#6D5DFB; --primary-2:#8B7CFF; --primary-dim:#5546E0;
  --mint:#45E0B8; --amber:#F5B544; --rose:#FF5C7A; --blue:#56A8FF;
  --mono:'JetBrains Mono',monospace; --disp:'Sora',sans-serif; --body:'Inter',sans-serif;
  /* Element Plus dark mapping */
  --el-color-primary:#6D5DFB; --el-color-primary-light-3:#8B7CFF; --el-color-primary-light-5:#5546E0;
  --el-color-primary-light-7:#3a3270; --el-color-primary-light-8:#2a2552; --el-color-primary-light-9:#1c1b3a;
  --el-color-danger:#FF5C7A; --el-color-success:#45E0B8; --el-color-warning:#F5B544;
  --el-bg-color:#131A2E; --el-bg-color-overlay:#19223A; --el-fill-color-blank:#0E1424;
  --el-text-color-primary:#EAEEF8; --el-text-color-regular:#c3cbe0; --el-text-color-placeholder:#646C88; --el-text-color-secondary:#9AA5C0;
  --el-border-color:#2A3550; --el-border-color-light:#1E2740; --el-border-color-lighter:#1a2238; --el-border-color-hover:#6D5DFB;
  --el-fill-color-light:#19223A; --el-fill-color:#19223A; --el-fill-color-dark:#1c2540;
  --el-border-radius-base:9px; --el-table-border-color:#1E2740; --el-table-header-bg-color:#10162A;
  --el-table-row-hover-bg-color:#19223A; --el-table-bg-color:transparent; --el-table-tr-bg-color:transparent;
  --el-mask-color:rgba(6,8,16,.65);
}
*{margin:0;padding:0;box-sizing:border-box}
[v-cloak]{display:none}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#222C49;border-radius:6px;border:2px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}

/* ===== layout shell ===== */
.app{display:grid;grid-template-columns:300px 1fr;min-height:100vh}
.sidebar{background:var(--sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.sb-brand{display:flex;align-items:center;gap:14px;font-family:var(--disp);font-weight:700;font-size:22px;height:70px;padding:0 24px;border-bottom:1px solid var(--border);flex:none}
.mark{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--primary),var(--primary-2));display:grid;place-items:center;box-shadow:0 4px 14px rgba(109,93,251,.4);flex:none}
.mark svg{width:21px;height:21px}
.sb-nav{flex:1;padding:14px 16px 18px;overflow-y:auto}
.sb-group{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);padding:18px 12px 10px}
.sb-item{display:flex;align-items:center;gap:14px;padding:12.5px 14px;border-radius:11px;color:var(--dim);font-size:15.5px;font-weight:450;cursor:pointer;transition:all .14s;margin-bottom:4px;position:relative}
.sb-item svg{width:21px;height:21px;flex:none}
.sb-item:hover{background:var(--surface);color:var(--text)}
.sb-item.active{background:linear-gradient(90deg,rgba(109,93,251,.16),rgba(109,93,251,.04));color:var(--text)}
.sb-item.active::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--primary)}
.sb-item .badge{margin-left:auto;background:var(--surface-2);color:var(--dim);font-size:11.5px;font-family:var(--mono);padding:2px 8px;border-radius:6px}
.sb-user{border-top:1px solid var(--border);padding:16px 18px;display:flex;align-items:center;gap:13px;cursor:pointer}
/* small count badge shown next to a nav item (e.g. open password requests) */
.sb-item .nav-badge{margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:linear-gradient(135deg,var(--primary),var(--primary-dim));color:#fff;font-family:var(--mono);
  font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;line-height:1}

/* ---- client panel shared bits (timeline, level ladder, downloads) ---- */
.tl{position:relative;padding-left:26px}
.tl::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--border)}
.tl-item{position:relative;padding:0 0 22px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:-23px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 4px rgba(109,93,251,.18)}
.tl-item.first::before{background:var(--mint);box-shadow:0 0 0 4px rgba(69,224,184,.18)}
.tl-item .vh{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tl-item .ver{font-family:var(--disp);font-weight:700;font-size:16px}
.tl-item .when{font-family:var(--mono);font-size:12px;color:var(--faint)}
.tl-item .latest{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--mint);background:rgba(69,224,184,.1);border:1px solid rgba(69,224,184,.3);padding:2px 7px;border-radius:6px}
.tl-item .notes{color:var(--dim);font-size:14px;line-height:1.6;margin-top:6px;white-space:pre-wrap}

.lvl-ladder{display:flex;flex-direction:column;gap:10px}
.lrow{display:flex;gap:14px;align-items:flex-start;padding:14px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.015)}
.lrow.cur{border-color:rgba(109,93,251,.5);box-shadow:0 0 0 1px rgba(109,93,251,.25)}
.lrow .lp{font-family:var(--mono);font-size:12px;font-weight:700;padding:4px 10px;border-radius:8px;color:var(--dim);background:rgba(154,165,192,.1);border:1px solid var(--border);white-space:nowrap}
.lrow .lp.hi{color:var(--primary-2);background:rgba(109,93,251,.12);border-color:rgba(109,93,251,.3)}
.lrow .lp.cur{color:var(--mint);background:rgba(69,224,184,.1);border-color:rgba(69,224,184,.3)}
.lrow .ln{font-weight:600;font-size:15px;margin-bottom:2px}
.lrow .ld{color:var(--dim);font-size:13.5px;line-height:1.5}
.youtag{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--mint);background:rgba(69,224,184,.1);border:1px solid rgba(69,224,184,.3);padding:2px 7px;border-radius:6px;margin-left:6px;vertical-align:middle}

.dl-row{display:flex;gap:14px;align-items:center;padding:13px 14px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.015);margin-bottom:10px}
.dl-row:last-child{margin-bottom:0}
.dl-row .di{width:38px;height:38px;flex:none;border-radius:10px;display:grid;place-items:center;color:var(--primary-2);background:rgba(109,93,251,.12);border:1px solid rgba(109,93,251,.25)}
.dl-row .dn{font-weight:600;font-size:14.5px;word-break:break-word}
.dl-row .ds{color:var(--dim);font-size:12.5px;font-family:var(--mono);margin-top:2px}
.dl-row .dmeta{flex:1;min-width:0}
/* The account block is wrapped in an el-dropdown trigger; force it to span the
   full sidebar width so its top divider lines up with the brand divider. */
.sidebar > .el-dropdown{display:block;width:100%}
.sidebar > .el-dropdown > *{display:block;width:100%}
.avatar{width:42px;height:42px;border-radius:11px;background:linear-gradient(135deg,#2a3357,#1c2440);display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:17px;color:var(--primary-2);border:1px solid var(--border-2);flex:none}
.sb-user .info{flex:1;min-width:0}
.sb-user .name{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-user .plan{font-size:12px;color:var(--mint);font-family:var(--mono);margin-top:1px;text-transform:capitalize}

/* ===== main column ===== */
.main{display:flex;flex-direction:column;min-width:0}
.topbar{height:70px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:16px;padding:0 28px;background:rgba(10,13,24,.6);backdrop-filter:blur(10px);position:sticky;top:0;z-index:20}
.burger{display:none;width:42px;height:42px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--dim);cursor:pointer;place-items:center;flex:none}
.burger svg{width:20px;height:20px}
.top-title{font-family:var(--disp);font-weight:600;font-size:17px;color:var(--dim);white-space:nowrap}
.app-pick{min-width:220px}
.topbar .spacer{flex:1}
.plan-badge{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;color:var(--mint);background:rgba(69,224,184,.1);border:1px solid rgba(69,224,184,.25);padding:9px 14px;border-radius:9px;white-space:nowrap}
.plan-badge svg{width:14px;height:14px;flex:none}
.plan-badge.warn{color:var(--amber);background:rgba(245,181,68,.1);border-color:rgba(245,181,68,.25)}
.icon-btn{width:42px;height:42px;border-radius:10px;border:1px solid var(--border);background:var(--surface);display:grid;place-items:center;color:var(--dim);cursor:pointer;transition:all .14s;position:relative;flex:none}
.icon-btn:hover{color:var(--text);border-color:var(--border-2)}

.content{padding:34px 32px;flex:1;overflow-y:auto;min-width:0}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:30px;flex-wrap:wrap;gap:16px}
.page-head .crumb{font-family:var(--mono);font-size:13px;color:var(--faint);margin-bottom:10px;letter-spacing:.04em}
.page-head h1{font-family:var(--disp);font-weight:700;font-size:38px;letter-spacing:-.025em}
.page-head .sub{color:var(--dim);font-size:15px;margin-top:7px;max-width:640px}
.head-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn-gen{background:linear-gradient(135deg,var(--primary),var(--primary-dim))!important;border:none!important;font-weight:600!important;box-shadow:0 6px 18px rgba(109,93,251,.32);height:40px;padding-left:20px;padding-right:20px}

/* ===== stats ===== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:30px}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:24px;min-width:0}
.stat .top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px}
.stat .lbl{font-size:14px;color:var(--dim);font-weight:500}
.stat .ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;flex:none}
.stat .ic svg{width:21px;height:21px}
.stat .num{font-family:var(--disp);font-weight:700;font-size:40px;letter-spacing:-.02em;line-height:1;word-break:break-word}
.stat .delta{font-size:13px;margin-top:11px;display:flex;align-items:center;gap:6px;font-family:var(--mono);color:var(--faint)}
.delta.up{color:var(--mint)} .delta.flat{color:var(--faint)} .delta.warn{color:var(--amber)}
.ic-1{background:rgba(109,93,251,.14);color:var(--primary-2)}
.ic-2{background:rgba(69,224,184,.14);color:var(--mint)}
.ic-3{background:rgba(86,168,255,.14);color:var(--blue)}
.ic-4{background:rgba(245,181,68,.14);color:var(--amber)}

/* ===== cards / tables ===== */
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;min-width:0}
.card-pad{padding:24px}
.card-title{font-family:var(--disp);font-weight:600;font-size:18px}
.tbl-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.tbl-head{display:flex;align-items:center;gap:14px;padding:18px 22px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.tbl-head .title{font-family:var(--disp);font-weight:600;font-size:18px;margin-right:auto}
.tbl-head .filters{display:flex;gap:10px;flex-wrap:wrap}
.tbl-foot{padding:16px 22px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--border);flex-wrap:wrap;gap:12px}
.tbl-foot .count{font-size:13.5px;color:var(--faint);font-family:var(--mono)}
.tbl-scroll{overflow-x:auto}

.keycell{font-family:var(--mono);font-size:15px;letter-spacing:.05em;color:var(--text);display:flex;align-items:center;gap:10px;white-space:nowrap}
.keycell .copy,.copy-ic{color:var(--faint);cursor:pointer;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:6px;transition:all .14s;flex:none}
.keycell .copy:hover,.copy-ic:hover{color:var(--primary-2);background:var(--surface-2)}
.keycell .copy svg,.copy-ic svg{width:15px;height:15px}
.lvl{font-family:var(--mono);font-size:13px;padding:4px 10px;border-radius:6px;background:var(--surface-2);color:var(--dim);border:1px solid var(--border);white-space:nowrap}
.lvl.prem{color:var(--primary-2);border-color:rgba(109,93,251,.3);background:rgba(109,93,251,.1)}
.hwid{font-family:var(--mono);font-size:13.5px;color:var(--faint);word-break:break-all}
.muted-cell{color:var(--dim);font-size:14px}
.mono{font-family:var(--mono)}
.st{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;padding:5px 11px;border-radius:7px;font-family:var(--body);white-space:nowrap}
.st .d{width:6px;height:6px;border-radius:50%;flex:none}
.st.active,.st.ok{color:var(--mint);background:rgba(69,224,184,.1)} .st.active .d,.st.ok .d{background:var(--mint);box-shadow:0 0 6px var(--mint)}
.st.unused,.st.info{color:var(--blue);background:rgba(86,168,255,.1)} .st.unused .d,.st.info .d{background:var(--blue)}
.st.expired,.st.off{color:var(--faint);background:rgba(100,108,136,.12)} .st.expired .d,.st.off .d{background:var(--faint)}
.st.banned,.st.bad{color:var(--rose);background:rgba(255,92,122,.1)} .st.banned .d,.st.bad .d{background:var(--rose)}
.st.warn{color:var(--amber);background:rgba(245,181,68,.1)} .st.warn .d{background:var(--amber)}
.act-btn{width:30px;height:30px;border-radius:7px;border:1px solid var(--border);background:transparent;color:var(--dim);cursor:pointer;display:inline-grid;place-items:center;transition:all .14s}
.act-btn:hover{color:var(--text);border-color:var(--border-2);background:var(--surface-2)}
.act-btn.danger:hover{color:var(--rose);border-color:rgba(255,92,122,.4)}
.act-btn svg{width:16px;height:16px}
.row-actions{display:flex;gap:7px;justify-content:flex-end}

/* ===== bar chart (hand-rolled) ===== */
.chart{display:flex;align-items:flex-end;gap:7px;height:170px;padding-top:8px}
.chart .b{flex:1;min-width:6px;background:linear-gradient(180deg,var(--primary),rgba(109,93,251,.18));border-radius:6px 6px 2px 2px;position:relative;transition:all .2s;min-height:3px}
.chart .b:hover{background:linear-gradient(180deg,var(--primary-2),rgba(139,124,255,.3))}
.chart .b .tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--surface-2);border:1px solid var(--border-2);color:var(--text);font-family:var(--mono);font-size:12px;padding:5px 9px;border-radius:7px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .14s;z-index:5}
.chart .b:hover .tip{opacity:1}
.chart-x{display:flex;gap:7px;margin-top:10px}
.chart-x span{flex:1;min-width:6px;text-align:center;font-family:var(--mono);font-size:10.5px;color:var(--faint)}

/* ===== empty / no-app ===== */
.noapp{display:grid;place-items:center;min-height:55vh;text-align:center}
.noapp .box{max-width:440px}
.noapp h2{font-family:var(--disp);font-size:26px;margin:18px 0 10px}
.noapp p{color:var(--dim);font-size:15px;line-height:1.6;margin-bottom:22px}
.noapp .glyph{width:74px;height:74px;border-radius:20px;background:rgba(109,93,251,.12);border:1px solid rgba(109,93,251,.3);display:grid;place-items:center;margin:0 auto;color:var(--primary-2)}
.noapp .glyph svg{width:34px;height:34px}

/* ===== app cards (applications page) ===== */
.app-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:18px}
.app-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px;transition:all .15s;display:flex;flex-direction:column;gap:14px}
.app-card:hover{border-color:var(--border-2);transform:translateY(-2px)}
.app-card .ahead{display:flex;align-items:center;gap:13px}
.app-card .aicon{width:46px;height:46px;border-radius:12px;background:rgba(109,93,251,.13);border:1px solid rgba(109,93,251,.28);display:grid;place-items:center;color:var(--primary-2);font-family:var(--disp);font-weight:700;font-size:19px;flex:none}
.app-card .aname{font-family:var(--disp);font-weight:600;font-size:18px;word-break:break-all}
.app-card .aid{font-family:var(--mono);font-size:12.5px;color:var(--faint);margin-top:2px}
.app-card .ameta{display:flex;gap:18px;font-size:13.5px;color:var(--dim);font-family:var(--mono);flex-wrap:wrap}
.app-card .afoot{display:flex;gap:9px;margin-top:auto;flex-wrap:wrap}

/* ===== docs code blocks ===== */
.code-card{background:#0B0F1E;border:1px solid var(--border);border-radius:13px;overflow:hidden;margin-top:14px}
.code-head{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;border-bottom:1px solid var(--border);background:var(--panel)}
.code-head .fn{font-family:var(--mono);font-size:12.5px;color:var(--faint);letter-spacing:.04em}
.code-card pre{padding:18px;overflow-x:auto;font-family:var(--mono);font-size:13.5px;line-height:1.7;color:#C9D4F2;tab-size:4}
.endpoint-row{display:flex;gap:12px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--border);flex-wrap:wrap}
.endpoint-row:last-child{border-bottom:none}
.endpoint-row .act{font-family:var(--mono);font-size:14px;color:var(--primary-2);min-width:130px;font-weight:600}
.endpoint-row .desc{color:var(--dim);font-size:14px;flex:1;min-width:220px}
.endpoint-row .params{font-family:var(--mono);font-size:12.5px;color:var(--faint)}

/* ===== misc ===== */
.form-hint{font-size:13px;color:var(--faint);line-height:1.55;margin-top:6px}
.danger-zone{border:1px solid rgba(255,92,122,.3);background:rgba(255,92,122,.05);border-radius:14px;padding:22px}
.danger-zone h3{font-family:var(--disp);font-size:16px;color:var(--rose);margin-bottom:8px}
.secret-row{display:flex;align-items:center;gap:10px;background:#0E1424;border:1px solid var(--border-2);border-radius:10px;padding:12px 14px;font-family:var(--mono);font-size:14px;overflow:hidden}
.secret-row .val{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.03em}
.ann-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:24px;margin-bottom:16px}
.ann-card .at{display:flex;align-items:center;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.ann-card h3{font-family:var(--disp);font-size:18px;font-weight:600}
.ann-card .when{font-family:var(--mono);font-size:12.5px;color:var(--faint);margin-left:auto}
.ann-card .body{color:var(--dim);font-size:15px;line-height:1.65;white-space:pre-wrap}
.kv{display:flex;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid var(--border);font-size:14.5px}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--dim)} .kv .v{color:var(--text);font-weight:500;text-align:right;word-break:break-all}
.section-gap{margin-top:26px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.quota-bar{height:8px;border-radius:5px;background:var(--surface-2);overflow:hidden;margin-top:12px}
.quota-bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--primary),var(--primary-2))}
.quota-bar i.hot{background:linear-gradient(90deg,var(--amber),var(--rose))}

/* ===== Element Plus overrides ===== */
.el-input__wrapper{box-shadow:0 0 0 1px var(--border-2) inset!important;background:#0E1424!important;border-radius:9px!important}
.el-input__wrapper.is-focus{box-shadow:0 0 0 1px var(--primary) inset!important}
.el-input__inner{color:var(--text)!important}
.el-textarea__inner{background:#0E1424!important;box-shadow:0 0 0 1px var(--border-2) inset!important;color:var(--text)!important;border-radius:9px!important;font-family:var(--body)}
.el-textarea__inner:focus{box-shadow:0 0 0 1px var(--primary) inset!important}
.el-select__wrapper{background:#0E1424!important;box-shadow:0 0 0 1px var(--border-2) inset!important;border-radius:9px!important}
.el-select__wrapper.is-focused{box-shadow:0 0 0 1px var(--primary) inset!important}
.el-select__placeholder.is-transparent{color:var(--faint)}
.el-table{background:transparent!important;--el-table-border-color:#1E2740;font-size:15px!important}
.el-table::before,.el-table__inner-wrapper::before{display:none}
.el-table th.el-table__cell{background:var(--panel)!important;border-bottom:1px solid var(--border)!important;font-family:var(--mono)!important;font-size:12px!important;letter-spacing:.08em!important;text-transform:uppercase!important;color:var(--faint)!important;font-weight:500!important;padding:14px 0!important}
.el-table td.el-table__cell{border-bottom:1px solid var(--border)!important;padding:16px 0!important}
.el-table tr{background:transparent!important}
.el-table__body tr:hover>td.el-table__cell{background:var(--surface-2)!important}
.el-table__empty-text{color:var(--faint)}
.el-pagination{--el-pagination-bg-color:transparent;--el-pagination-button-bg-color:#19223A}
.el-pagination button,.el-pager li{background:#19223A!important;color:var(--dim)!important}
.el-pager li.is-active{background:var(--primary)!important;color:#fff!important}
.el-button{--el-button-bg-color:#19223A;--el-button-border-color:#2A3550;--el-button-text-color:#c3cbe0;--el-button-hover-bg-color:#1f2945;--el-button-hover-border-color:#6D5DFB;--el-button-hover-text-color:#fff}
.el-button--primary{--el-button-bg-color:#6D5DFB;--el-button-border-color:#6D5DFB;--el-button-text-color:#fff;--el-button-hover-bg-color:#8B7CFF;--el-button-hover-border-color:#8B7CFF}
.el-button--danger.is-plain{--el-button-bg-color:rgba(255,92,122,.08);--el-button-border-color:rgba(255,92,122,.4);--el-button-text-color:#FF5C7A}
.el-button.is-text{--el-button-text-color:var(--dim)}
.el-dialog{background:var(--surface)!important;border:1px solid var(--border-2);border-radius:16px!important;max-width:94vw}
.el-dialog__title{color:var(--text)!important;font-family:var(--disp)!important;font-weight:600!important}
.el-dialog__body{color:var(--dim)!important}
.el-message-box{background:var(--surface)!important;border:1px solid var(--border-2)!important;border-radius:14px!important;max-width:92vw}
.el-message-box__title{color:var(--text)!important;font-family:var(--disp)!important}
.el-message-box__content{color:var(--dim)!important}
.el-form-item__label{color:var(--dim)!important;font-weight:500}
.el-drawer{background:var(--sidebar)!important}
.el-drawer__body{padding:0!important;display:flex;flex-direction:column}
.el-switch{--el-switch-on-color:var(--primary);--el-switch-off-color:#2A3550}
.el-tabs__item{color:var(--dim)!important;font-size:15px!important}
.el-tabs__item.is-active{color:var(--primary-2)!important}
.el-tabs__active-bar{background:var(--primary)!important}
.el-tabs__nav-wrap::after{background:var(--border)!important}
.el-tag{border-radius:7px}
.el-empty__description p{color:var(--faint)}
.el-dropdown-menu{background:var(--surface-2)!important}
.el-dropdown-menu__item{color:var(--dim)!important}
.el-dropdown-menu__item:hover{background:var(--surface)!important;color:var(--text)!important}
.el-popper.is-pure{border-color:var(--border-2)!important}
.el-loading-mask{background:rgba(10,13,24,.7)!important}
.el-checkbox__label{color:var(--dim)}
.el-radio__label{color:var(--dim)}
.el-input-number .el-input-number__decrease,.el-input-number .el-input-number__increase{background:var(--surface-2);color:var(--dim);border-color:var(--border-2)}
.el-upload-dragger{background:#0E1424!important;border:1.5px dashed var(--border-2)!important;border-radius:13px!important}
.el-upload-dragger:hover{border-color:var(--primary)!important}
.el-alert{border-radius:11px}

/* ===== responsive ===== */
@media(max-width:1280px){.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1080px){
  .app{grid-template-columns:1fr}
  .sidebar{display:none}
  .burger{display:grid}
  .top-title{display:none}
  .content{padding:24px 18px}
  .page-head h1{font-size:30px}
  .grid-2{grid-template-columns:1fr}
}
@media(max-width:700px){
  .topbar{padding:0 16px;gap:10px}
  .plan-badge{display:none}
  .app-pick{min-width:0;flex:1}
  .stats{grid-template-columns:1fr;gap:14px}
  .stat .num{font-size:34px}
  .page-head{margin-bottom:22px}
  .page-head h1{font-size:27px}
  .head-actions{width:100%}
  .head-actions .el-button{flex:1}
  .content{padding:20px 14px}
  .tbl-head{padding:15px 16px}
  .tbl-head .filters{width:100%}
  .tbl-foot{padding:14px 16px}
  .app-grid{grid-template-columns:1fr}
}

/* ===== language switch (i18n) ===== */
.lang-switch{position:relative;display:inline-flex;align-items:center;background:var(--panel,#10162A);border:1px solid var(--border-2);border-radius:10px;padding:3px;flex:none;user-select:none}
.lang-switch .lang-pill{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:7px;background:linear-gradient(135deg,var(--primary),var(--primary-dim,#5546E0));box-shadow:0 2px 8px rgba(109,93,251,.4);transition:transform .26s cubic-bezier(.4,0,.2,1)}
.lang-switch.is-en .lang-pill{transform:translateX(100%)}
.lang-switch .lang-opt{position:relative;z-index:1;border:none;background:transparent;color:var(--dim);font-family:var(--body);font-size:13px;font-weight:600;padding:6px 0;min-width:46px;text-align:center;border-radius:7px;cursor:pointer;transition:color .2s;line-height:1.1}
.lang-switch .lang-opt:hover{color:var(--text)}
.lang-switch .lang-opt.on{color:#fff}

/* ---- interactive text brand (preset logo removed) ---- */
.brand-link{text-decoration:none;color:var(--text);transition:color .15s,opacity .15s}
.brand-link:hover{color:var(--primary-2)}
a.sb-brand:hover{color:var(--primary-2)}

/* ---- tunable video / image background behind the panels ---- */
.oa-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:var(--bg)}
.oa-bg video,.oa-bg img{width:100%;height:100%;object-fit:cover;display:block}
.app{position:relative;z-index:0}

/* ---- page transitions (smooth crossfade between panel pages) ----
   Fade the whole panel in/out as one unit (no vertical slide, so text never
   appears to "jump"). This also hides the brief background re-seek on load,
   while the saved playback position keeps the video feeling continuous. */
@keyframes oa-fade-in{from{opacity:0}to{opacity:1}}
.app{animation:oa-fade-in .2s ease}
.app{transition:opacity .14s ease}
body.oa-leaving .app{opacity:0}
@media (prefers-reduced-motion: reduce){
  .app{animation:none;transition:none}
  body.oa-leaving .app{opacity:1}
}

/* ---- consistent control sizing (fix mismatched button heights) ----
   Where a primary + secondary action (and inputs/selects) sit together —
   page headers, table-head filter rows, dialog footers and drawers — pin the
   default Element Plus control size to the 40px "large" baseline so nothing
   looks bigger-on-one-side. Explicit size="small" (table-row actions) and
   size="large" keep their own size variables and are unaffected. */
.head-actions,
.tbl-head,
.tbl-head .filters,
.filters,
.filter-row,
.el-dialog__footer,
.el-drawer{ --el-component-size: 40px; }

/* Explicit fallback: force regular buttons in those containers to the 40px
   baseline even if the component-size variable isn't honoured. Text/icon and
   small buttons are excluded so close (✕) and table-row actions stay as-is. */
.head-actions .el-button:not(.el-button--small):not(.is-text):not(.is-circle):not(.is-link),
.tbl-head .el-button:not(.el-button--small):not(.is-text):not(.is-circle):not(.is-link),
.filters .el-button:not(.el-button--small):not(.is-text):not(.is-circle):not(.is-link),
.filter-row .el-button:not(.el-button--small):not(.is-text):not(.is-circle):not(.is-link),
.el-dialog__footer .el-button:not(.el-button--small):not(.is-text):not(.is-circle):not(.is-link){ height:40px; }