/* Ulo Games: same tokens as cloud.ulo.gg's dashboard */
:root{
  --bg:#0D0B14; --bg-raised:#13101C; --bg-card:#13101C; --violet-dim:#4A3F66; --bg-input:#0F0C17; --bg-hover:#1A1626; --side:#100D18;
  --line:#2A2340; --line-soft:#1C1729;
  --violet:#8B5CF6; --violet-hover:#7C4DEB; --violet-soft:#A78BFA; --violet-pale:#C4B5FD; --active:#221C35;
  --pink:#EC4899; --green:#34D399; --green-text:#6EE7B7; --amber:#FBBF24; --danger:#FB7185; --danger-strong:#E11D48;
  --fg:#F4F2FA; --fg-2:#DDD8EA; --fg-dim:#A49DB8; --fg-faint:#7A7392;
  --mono:'JetBrains Mono', ui-monospace, monospace;
  --display:'Space Grotesk', system-ui, sans-serif;
  --body:'Inter', system-ui, sans-serif;
  --radius:14px;
  color-scheme:dark;
}
*{box-sizing:border-box; margin:0; padding:0;}
[hidden]{display:none !important;}
body{background:var(--bg); color:var(--fg); font-family:var(--body); font-size:14px; line-height:1.55; min-height:100vh; -webkit-font-smoothing:antialiased;}
a{color:inherit; text-decoration:none;}
button,input,select,textarea{font:inherit; color:inherit;}
button{cursor:pointer;}
:focus-visible{outline:2px solid var(--violet-soft); outline-offset:2px; border-radius:6px;}
.mono{font-family:var(--mono);}
.dim{color:var(--fg-dim);} .faint{color:var(--fg-faint);}

/* ---------- shell ---------- */
.shell{display:grid; grid-template-columns:240px minmax(0,1fr); min-height:100vh;}
.sidebar{position:sticky; top:0; height:100vh; overflow-y:auto; display:flex; flex-direction:column; padding:20px 14px; background:var(--side); border-right:1px solid var(--line-soft);}
.brand{display:flex; align-items:center; gap:10px; padding:4px 10px 22px;}
.brand::before{
  content:""; width:52px; height:30px; flex-shrink:0;
  background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%2241 -764 1404 798%22%3E%3Cpath fill=%22%23F4F2FA%22 d=%22M462.0 -535.0Q488.0 -535.0 505.0 -517.5Q522.0 -500.0 522.0 -474.0V-220.0Q522.0 -114.0 463.0 -52.0Q404.0 10.0 293.0 10.0Q182.0 10.0 123.5 -52.0Q65.0 -114.0 65.0 -220.0V-474.0Q65.0 -500.0 82.0 -517.5Q99.0 -535.0 125.0 -535.0Q151.0 -535.0 168.0 -517.5Q185.0 -500.0 185.0 -474.0V-220.0Q185.0 -159.0 212.0 -129.5Q239.0 -100.0 293.0 -100.0Q348.0 -100.0 375.0 -129.5Q402.0 -159.0 402.0 -220.0V-474.0Q402.0 -500.0 419.0 -517.5Q436.0 -535.0 462.0 -535.0ZM772.0 -61.0Q772.0 -35.0 754.5 -17.5Q737.0 0.0 711.0 0.0Q686.0 0.0 669.0 -17.5Q652.0 -35.0 652.0 -61.0V-679.0Q652.0 -705.0 669.5 -722.5Q687.0 -740.0 713.0 -740.0Q739.0 -740.0 755.5 -722.5Q772.0 -705.0 772.0 -679.0Z%22/%3E%3Cpath fill=%22%23EC4899%22 d=%22M1421.0 -267.0Q1421.0 -185.0 1384.5 -122.5Q1348.0 -60.0 1286.5 -25.0Q1225.0 10.0 1149.0 10.0Q1073.0 10.0 1011.5 -25.0Q950.0 -60.0 913.5 -122.5Q877.0 -185.0 877.0 -267.0Q877.0 -349.0 913.5 -411.5Q950.0 -474.0 1011.5 -509.5Q1073.0 -545.0 1149.0 -545.0Q1225.0 -545.0 1286.5 -509.5Q1348.0 -474.0 1384.5 -411.5Q1421.0 -349.0 1421.0 -267.0ZM1301.0 -267.0Q1301.0 -318.0 1280.5 -355.5Q1260.0 -393.0 1225.5 -414.0Q1191.0 -435.0 1149.0 -435.0Q1107.0 -435.0 1072.5 -414.0Q1038.0 -393.0 1017.5 -355.5Q997.0 -318.0 997.0 -267.0Q997.0 -217.0 1017.5 -179.5Q1038.0 -142.0 1072.5 -121.0Q1107.0 -100.0 1149.0 -100.0Q1191.0 -100.0 1225.5 -121.0Q1260.0 -142.0 1280.5 -179.5Q1301.0 -217.0 1301.0 -267.0Z%22/%3E%3C/svg%3E") no-repeat left center / contain;
}
.brand-tag{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--violet-soft); border:1px solid var(--line); border-radius:999px; padding:2px 8px;}
.side-section{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-faint); padding:18px 10px 8px;}
.side-link{display:flex; align-items:center; gap:12px; width:100%; min-height:40px; padding:9px 12px; margin-bottom:2px; border-radius:10px; font-size:14px; font-weight:500; color:var(--fg-dim); text-align:left; border:none; background:none; transition:background .15s, color .15s;}
.side-link svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0;}
.side-link:not(.active):hover{background:var(--bg-hover); color:var(--fg);}
.side-link.active{background:var(--active); color:var(--fg);}
.side-link.active svg{color:var(--violet-soft);}

.main{min-width:0; padding:32px clamp(16px,4vw,48px) 64px;}
.page-head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:24px;}
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--violet-soft);}
h1{font-family:var(--display); font-size:28px; font-weight:600; letter-spacing:-.01em; margin-top:4px;}
h2{font-family:var(--display); font-size:18px; font-weight:600;}
.sub{color:var(--fg-dim); margin-top:4px;}

/* ---------- pieces ---------- */
.card{background:var(--bg-raised); border:1px solid var(--line-soft); border-radius:var(--radius); padding:20px;}
.card + .card{margin-top:16px;}
.card-head{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px;}
.grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));}
.stats{display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); margin-bottom:16px;}
.stat{background:var(--bg-raised); border:1px solid var(--line-soft); border-radius:12px; padding:14px 16px;}
.stat-label{font-size:12px; color:var(--fg-faint); text-transform:uppercase; letter-spacing:.06em; font-family:var(--mono);}
.stat-value{font-family:var(--display); font-size:20px; font-weight:600; margin-top:4px;}
.stat-sub{font-size:12px; color:var(--fg-dim);}
.bar{height:4px; background:var(--line-soft); border-radius:4px; margin-top:10px; overflow:hidden;}
.bar > span{display:block; height:100%; background:var(--violet); border-radius:4px; transition:width .4s;}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:38px; padding:8px 16px; border-radius:10px; border:1px solid var(--line); background:var(--bg-hover); font-weight:600; font-size:14px; transition:background .15s, border-color .15s; white-space:nowrap;}
.btn:hover{border-color:var(--violet-dim, #4A3F66); background:#211B31;}
.btn:disabled{opacity:.45; cursor:not-allowed;}
.btn-primary{background:var(--violet-hover); border-color:var(--violet-hover); color:#fff;}
.btn-primary:hover{background:#6D3FD9; border-color:#6D3FD9;}
.btn-green{background:#065F46; border-color:#047857; color:#ECFDF5;}
.btn-green:hover{background:#047857; border-color:#059669;}
.btn-danger{background:transparent; border-color:#5B2333; color:var(--danger);}
.btn-danger:hover{background:#2A1219; border-color:var(--danger-strong);}
.btn-sm{min-height:32px; padding:5px 12px; font-size:13px;}
.btn-row{display:flex; flex-wrap:wrap; gap:8px;}

label{display:block; font-size:13px; font-weight:500; color:var(--fg-2); margin-bottom:6px;}
.field{margin-bottom:14px;}
.hint{font-size:12px; color:var(--fg-faint); margin-top:4px;}
input,select,textarea{width:100%; background:var(--bg-input); border:1px solid var(--line); border-radius:10px; padding:9px 12px; font-size:14px;}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--violet);}
textarea{font-family:var(--mono); font-size:13px; resize:vertical;}
.form-grid{display:grid; gap:0 16px; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));}

.status{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; padding:3px 10px; border-radius:999px; background:var(--bg-hover); color:var(--fg-dim); text-transform:capitalize;}
.status::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor;}
.status.running{color:var(--green-text); background:rgba(52,211,153,.1);}
.status.starting,.status.stopping,.status.installing,.status.restoring,.status.importing,.status.creating{color:var(--amber); background:rgba(251,191,36,.1);}
.status.offline{color:var(--danger); background:rgba(251,113,133,.08);}

table{width:100%; border-collapse:collapse;}
th{font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-faint); font-weight:500; text-align:left; padding:8px 12px; border-bottom:1px solid var(--line-soft);}
td{padding:12px; border-bottom:1px solid var(--line-soft); vertical-align:middle;}
tr:last-child td{border-bottom:0;}
.table-wrap{overflow-x:auto;}
.empty{color:var(--fg-dim); text-align:center; padding:32px 12px;}

.server-card{display:block; background:var(--bg-raised); border:1px solid var(--line-soft); border-radius:var(--radius); padding:18px 20px; transition:border-color .15s, transform .15s;}
.server-card:hover{border-color:var(--violet-dim, #4A3F66); transform:translateY(-1px);}
.server-card h2{margin-bottom:2px;}
.server-meta{display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:14px; font-size:13px; color:var(--fg-dim);}

.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line-soft); margin-bottom:20px; overflow-x:auto;}
.tab{background:none; border:none; padding:10px 14px; font-weight:600; color:var(--fg-dim); border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap;}
.tab:hover{color:var(--fg);}
.tab[aria-selected="true"]{color:var(--fg); border-bottom-color:var(--pink);}

/* console */
.console{background:#09070F; border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden;}
.console-out{height:min(60vh, 520px); overflow-y:auto; padding:14px 16px; font-family:var(--mono); font-size:12.5px; line-height:1.6; white-space:pre-wrap; word-break:break-word; color:var(--fg-2);}
.console-in{display:flex; align-items:center; gap:10px; border-top:1px solid var(--line-soft); padding:0 16px;}
.console-in span{color:var(--pink); font-family:var(--mono);}
.console-in input{border:0; background:transparent; padding:13px 0; font-family:var(--mono); font-size:13px;}
.console-in input:focus{border:0;}

.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:4px; font-family:var(--mono); font-size:13px;}
.crumbs button{background:none; border:none; color:var(--violet-soft); padding:2px 4px;}
.file-row{cursor:pointer;}
.file-row:hover td{background:var(--bg-hover);}
.file-name{display:flex; align-items:center; gap:10px;}
.file-name svg{width:16px; height:16px; stroke:var(--fg-faint); fill:none; stroke-width:1.8;}
.file-row.dir .file-name svg{stroke:var(--violet-soft);}

.addon-grid{display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));}
.addon{display:flex; gap:14px; align-items:flex-start; background:var(--bg-input); border:1px solid var(--line-soft); border-radius:12px; padding:14px;}
.addon img,.addon .addon-ph{width:48px; height:48px; border-radius:10px; flex-shrink:0; object-fit:cover; background:var(--bg-hover);}
.addon-body{min-width:0; flex:1;}
.addon-body strong{display:block; font-family:var(--display); font-weight:600;}
.addon-body p{font-size:13px; color:var(--fg-dim); margin:2px 0 10px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.addon-foot{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; color:var(--fg-faint);}
.installed-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line-soft);}
.installed-row:last-child{border-bottom:0;}

.toast{position:fixed; right:20px; bottom:20px; max-width:360px; background:var(--bg-raised); border:1px solid var(--line); border-left:3px solid var(--violet); border-radius:12px; padding:12px 16px; box-shadow:0 12px 32px rgba(0,0,0,.4); z-index:50;}
.toast.error{border-left-color:var(--danger);}

dialog{margin:auto; background:var(--bg-raised); color:var(--fg); border:1px solid var(--line); border-radius:16px; padding:24px; width:min(560px, calc(100vw - 32px));}
dialog::backdrop{background:rgba(5,3,10,.7);}
dialog h2{margin-bottom:16px;}
.secret{font-family:var(--mono); font-size:12px; background:var(--bg-input); border:1px solid var(--line); border-radius:10px; padding:12px; white-space:pre-wrap; word-break:break-all;}

/* login */
.auth{min-height:100vh; display:grid; place-items:center; padding:24px 16px; background:radial-gradient(800px 400px at 50% -10%, rgba(139,92,246,.18), transparent 70%), var(--bg);}
.auth-card{width:min(400px,100%);}
.auth .brand{justify-content:center; padding-bottom:28px;}

.menu-btn{display:none;}
@media (max-width: 860px){
  .shell{grid-template-columns:1fr;}
  .sidebar{position:fixed; inset:0 auto 0 0; width:260px; transform:translateX(-100%); transition:transform .2s; z-index:40;}
  .sidebar.open{transform:none; box-shadow:0 0 0 100vmax rgba(5,3,10,.6);}
  .menu-btn{display:inline-flex; margin-bottom:16px;}
  .main{padding-top:20px;}
}

.task-row{display:grid; grid-template-columns:120px 1fr 90px auto; gap:8px; align-items:center; margin-bottom:8px;}
.sched{border:1px solid var(--line-soft); border-radius:12px; padding:14px 16px; background:var(--bg-input);}
.sched + .sched{margin-top:10px;}
.sched-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px;}
.sched-meta{display:flex; flex-wrap:wrap; gap:4px 16px; font-size:13px; color:var(--fg-dim); margin-top:6px;}
@media (max-width:560px){ .task-row{grid-template-columns:1fr 1fr;} }


/* ---------- Copied from cloud.ulo.gg (server-dashboard.css) so the account menu, Account window and Billing look identical ---------- */
.hidden{display:none !important;}
.panel-card{background:var(--bg-card, var(--bg-raised)); border:1px solid var(--line-soft); border-radius:20px;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
.side-foot{margin-top:auto; position:relative; padding-top:10px; border-top:1px solid var(--line-soft);}
.side-user{
  display:flex; align-items:center; gap:8px; width:100%; min-height:40px; padding:8px 12px;
  border:none; border-radius:10px; background:none; cursor:pointer; text-align:left;
  font-family:var(--mono); font-size:11.5px; color:var(--fg-faint);
  transition:background .15s, color .15s;
}
.side-user span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.side-user svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; transition:transform .15s;}
.side-user:hover, .side-user[aria-expanded="true"]{background:var(--bg-hover); color:var(--fg);}
.side-user[aria-expanded="true"] svg{transform:rotate(180deg);}
.side-menu{
  display:none; position:absolute; left:0; right:0; bottom:100%; margin-bottom:6px; padding:6px;
  background:var(--bg-raised); border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.45);
}
.side-menu.open{display:block;}
.side-menu .side-link:last-child{margin-bottom:0;}

.page-header{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:28px;}
.page-header h1{font-family:var(--display); font-size:34px; font-weight:700; letter-spacing:-.035em; line-height:1.1;}
.page-header p{color:var(--fg-dim); font-size:15px; margin-top:8px;}
.kicker{display:block; margin-bottom:10px; font-family:var(--mono); font-size:12px; color:var(--violet-soft); letter-spacing:.08em; text-transform:uppercase;}
.warn-kicker{display:block; margin-bottom:8px; font-family:var(--mono); font-size:12px; color:var(--pink); letter-spacing:.08em; text-transform:uppercase;}

/* ---------- CARDS ---------- */

.status-pill{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  padding:7px 14px; border-radius:999px;
  font-family:var(--body); font-size:12.5px; font-weight:600;
  background:#0F2A1E; border:1px solid #1F4D3A; color:var(--green-text);
}
.status-pill[data-state="stopped"]{background:#2A1219; border-color:#5B2230; color:#FCA5A5;}
.status-pill[data-state="transition"], .status-pill[data-state="unavailable"], .status-pill[data-state="unknown"]{background:#1A1626; border-color:var(--line); color:var(--fg-dim);}
.status-pill .dot{width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(52,211,153,.18);}
.status-pill[data-state="stopped"] .dot{background:var(--danger); box-shadow:0 0 0 3px rgba(251,113,133,.15);}
.status-pill[data-state="transition"] .dot, .status-pill[data-state="unavailable"] .dot, .status-pill[data-state="unknown"] .dot{background:var(--fg-faint); box-shadow:none;}
.status-pill[data-state="transition"] .dot{animation:pulse 1.4s ease-in-out infinite;}
.status-pill.sm{padding:4px 10px; font-size:11.5px;}

.id-chip-row{display:flex; align-items:center; gap:8px;}
.id-chip{
  flex:1; min-width:0; display:flex; align-items:center; min-height:44px;
  padding:10px 14px; border-radius:12px; overflow-x:auto; white-space:nowrap;
  font-family:var(--mono); font-size:13px; font-weight:500;
  background:#17122A; border:1px solid #33295A; color:var(--violet-pale);
}

.act-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 18px; border-radius:12px;
  font-size:14px; font-weight:600; white-space:nowrap;
  border:1px solid var(--line); background:#1C1729; color:var(--fg-2);
  transition:background .15s, border-color .15s, color .15s;
}
.act-btn svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.act-btn:hover{border-color:var(--violet-dim); color:var(--fg); background:#221C35;}
.act-btn.primary{background:var(--violet); border-color:var(--violet); color:#fff;}
.act-btn.primary:hover{background:var(--violet-hover); border-color:var(--violet-hover);}
.act-btn.danger{color:#FDA4AF; border-color:#5B2230; background:transparent;}
.act-btn.danger:hover{background:#2A1219; border-color:var(--danger); color:#FFE4E6;}
.act-btn.danger-solid{background:var(--danger-strong); border-color:var(--danger-strong); color:#fff;}
.act-btn.danger-solid:hover{background:#BE123C; border-color:#BE123C;}
.act-btn:disabled{opacity:.4; cursor:not-allowed; pointer-events:none;}

.panel-card{padding:28px; margin-bottom:20px;}
.panel-toggle-row{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.panel-head h2{font-family:var(--display); font-size:21px; font-weight:600; letter-spacing:-.02em; margin-bottom:6px;}
.panel-head p{color:var(--fg-dim); font-size:14px; max-width:520px;}
.panel-open-btn{
  display:inline-flex; align-items:center; gap:8px; flex-shrink:0;
  min-height:44px; padding:0 18px; border-radius:12px;
  font-size:14px; font-weight:600;
  color:#F9A8D4; background:#2A1430; border:1px solid #5A2350;
  transition:background .15s, border-color .15s;
}
.panel-open-btn.violet{color:var(--violet-pale); background:#17122A; border-color:#33295A;}
.panel-open-btn svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s ease;}
.panel-open-btn:hover{border-color:var(--pink);}
.panel-open-btn.violet:hover{border-color:var(--violet);}
.panel-card.open .panel-open-btn svg{transform:rotate(45deg);}
.panel-body{display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .35s ease, opacity .3s ease;}
.panel-card.open .panel-body{grid-template-rows:1fr; opacity:1;}
.panel-body-inner{overflow:hidden;}
.panel-body-content{padding-top:24px; margin-top:24px; border-top:1px solid var(--line-soft);}

.form-hint{font-size:14px; color:var(--fg-dim); margin-bottom:22px;}

.row-list{display:flex; flex-direction:column; gap:8px; margin-top:10px;}
.list-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:12px 14px; border-radius:12px;
  background:#181424; border:1px solid var(--line-soft); font-size:14px;
}
.list-row .row-name{font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:0; margin:0; overflow-wrap:anywhere; white-space:normal; display:block;}
.list-row .row-actions{display:flex; align-items:center; gap:8px; flex-shrink:0; flex-wrap:wrap;}

/* ---------- SUBSCRIPTIONS (billing) ---------- */
.subscription-card{margin-bottom:12px;}
.subscription-card:last-child{margin-bottom:0;}
.addon-sublist{margin:10px 0 0 6px; padding-left:16px; border-left:2px solid var(--line); display:flex; flex-direction:column; gap:8px;}
.addon-row{display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px; color:var(--fg-dim);}
.addon-row .addon-name{font-family:var(--mono);}
.addon-row .addon-price{font-family:var(--mono); color:var(--fg-2);}

.error-text, .success-text{font-size:13.5px; margin-top:14px; padding:11px 14px; border-radius:10px;}
.error-text{color:#FCA5A5; background:#2A1219; border:1px solid #5B2230;}
.success-text{color:var(--green-text); background:#0F2A1E; border:1px solid #1F4D3A;}

.modal-overlay, .console-overlay, .confirm-overlay{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(7,5,12,.78); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.modal-overlay{z-index:65;}
.console-overlay{z-index:60;}
.confirm-overlay{z-index:80;}
.modal-box{
  width:100%; max-width:660px; max-height:88vh; display:flex; flex-direction:column; overflow:hidden;
  background:var(--bg-card); border:1px solid var(--line); border-radius:22px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7), 0 30px 80px -40px rgba(139,92,246,.45);
}
.modal-toolbar{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-shrink:0;
  padding:22px 24px 18px; border-bottom:1px solid var(--line-soft);
}
.modal-toolbar h2{font-family:var(--display); font-size:21px; font-weight:600; letter-spacing:-.02em; line-height:1.2;}
.modal-content{padding:24px; overflow-y:auto; overscroll-behavior:contain;}
.modal-content hr{border:0; border-top:1px solid var(--line-soft) !important;}

.confirm-box{
  position:relative; width:100%; max-width:420px; padding:26px;
  background:var(--bg-card); border:1px solid var(--line); border-radius:20px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7);
}
.confirm-box h3{font-family:var(--display); font-size:20px; font-weight:600; letter-spacing:-.02em; margin-bottom:8px; padding-right:28px;}
.confirm-box p{color:var(--fg-dim); font-size:14px;}
.confirm-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:22px; flex-wrap:wrap;}
.confirm-close{
  position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid transparent; background:none; color:var(--fg-faint);
}
.confirm-close svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round;}
.confirm-close:hover{color:var(--fg); background:var(--bg-hover); border-color:var(--line);}

/* Billing step-up code + confirm checkbox (inline-styled in the page) */
#step-up-code{min-height:52px; border-radius:12px !important; border-color:var(--line) !important; outline:none; transition:border-color .15s, box-shadow .15s;}
#step-up-code:focus{border-color:var(--violet) !important; box-shadow:0 0 0 4px rgba(139,92,246,.18);}

.act-btn.btn-sm{min-height:36px; padding:0 14px; font-size:13px; border-radius:10px;}

.perm-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:6px 14px; margin-top:14px;}
.perm-grid label{display:flex; align-items:center; gap:8px; font-weight:400; color:var(--fg-2); margin:0; cursor:pointer;}
.perm-grid input{width:auto;}
.person{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; padding:12px 0; border-top:1px solid var(--line-soft);}
.person small{display:block; color:var(--fg-faint); font-size:12.5px; margin-top:2px;}
.shared-tag{font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--violet-soft); border:1px solid var(--line); border-radius:999px; padding:2px 8px;}