/* EmberFaLL UCP – Modern UI (beautified) */
*{box-sizing:border-box}
:root{
  --bg:#080c12;
  --panel:rgba(16,22,31,.72);
  --panel-strong:rgba(16,22,31,.9);
  --stroke:rgba(255,255,255,.08);
  --text:#e7edf6;
  --muted:#9fb0c6;
  --brand:#6ee7ff;
  --brand-2:#a78bfa;
  --ok:#22c55e;
  --danger:#ef4444;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --radius:16px;
}
html,body{height:100%}
body.app{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";color:var(--text);background:var(--bg);overflow-x:hidden}
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden}
.bg-image{position:absolute;inset:0;background-image:url('assets/images/bg.jpg');background-size:cover;background-position:center;filter:saturate(1.1) contrast(1.05) brightness(.7);opacity:.45}
.bg-overlay{position:absolute;inset:0;background:
  radial-gradient(1200px 800px at 80% -10%, rgba(110,231,255,.25), transparent 60%),
  radial-gradient(1200px 800px at -10% 110%, rgba(167,139,250,.25), transparent 60%),
  linear-gradient(0deg, rgba(8,12,18,.85), rgba(8,12,18,.85))}
.shell{display:grid;grid-template-columns:280px 1fr;min-height:100vh}
@media (max-width:980px){.shell{grid-template-columns:1fr}.sidebar{position:fixed;left:-320px;top:0;bottom:0;z-index:40;transition:left .3s ease}.sidebar.open{left:0}.topbar .hamburger{display:inline-flex}}
.sidebar{background:var(--panel-strong);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-right:1px solid var(--stroke);padding:24px 18px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-weight:700;letter-spacing:.2px;margin-bottom:18px}
.brand-logo{font-size:22px}.brand-text{font-size:18px}
.nav{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.nav-link{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;color:var(--text);text-decoration:none;opacity:.9;border:1px solid transparent}
.nav-link:hover{background:rgba(255,255,255,.04);border-color:var(--stroke)}
.nav-link .icon{width:22px;text-align:center;opacity:.9}
.nav-link.logout{color:#ffd4d4}.nav-link.login{color:#d4ffea}
.lang-switch{display:flex;gap:8px;margin:18px 4px}
.lang-switch a{padding:6px 10px;border-radius:10px;border:1px solid var(--stroke);text-decoration:none;color:var(--text);font-size:12px;opacity:.8}
.lang-switch a:hover{opacity:1;background:rgba(255,255,255,.04)}
.sidebar-foot{margin-top:auto;padding:12px 6px;color:var(--muted)}
.content{position:relative}
.topbar{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding:16px 24px;background:linear-gradient(180deg, rgba(12,18,27,.9), rgba(12,18,27,.6));border-bottom:1px solid var(--stroke);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:20}
.topbar .hamburger{display:none;width:36px;height:36px;border-radius:10px;border:1px solid var(--stroke);background:rgba(255,255,255,.04)}
.topbar .crumbs{display:flex;align-items:center;gap:10px;color:var(--muted)}.sep{opacity:.4}
.badge{padding:6px 10px;border-radius:999px;font-size:12px;border:1px solid var(--stroke);background:rgba(255,255,255,.04)}
.badge.on{box-shadow:inset 0 0 0 2px rgba(34,197,94,.3);color:#b6f3c9}.badge.off{opacity:.85}
.page{padding:24px;max-width:1400px;margin:0 auto}
.cards{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.card{grid-column:span 12;background:var(--panel);border:1px solid var(--stroke);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
@media (min-width:920px){.card.span-4{grid-column:span 4}.card.span-6{grid-column:span 6}.card.span-8{grid-column:span 8}}
.card-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--stroke)}
.card-title{font-weight:600;letter-spacing:.2px}
.card-body{padding:16px}
.card-kpi{display:flex;gap:14px;align-items:center}
.kpi{padding:12px 14px;border-radius:14px;border:1px solid var(--stroke);background:linear-gradient(180deg, rgba(110,231,255,.12), rgba(167,139,250,.08))}
.kpi .label{font-size:12px;color:var(--muted)}.kpi .value{font-size:22px;font-weight:700}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px 8px;border-bottom:1px solid var(--stroke);text-align:left;font-size:14px}
.table th{color:var(--muted);font-weight:500}
.chars{display:flex;gap:8px}.char-ava{width:48px;height:48px;border-radius:12px;border:1px solid var(--stroke);background:rgba(255,255,255,.06);overflow:hidden}
.char-ava img{width:100%;height:100%;object-fit:cover;display:block}
.muted{color:var(--muted)}
/* Generic upgrades for legacy tables/divs */
table, .datatable { width:100%; border-collapse:collapse; background:transparent; color:var(--text) }
table td, table th { border-bottom:1px solid var(--stroke); padding:10px 8px }
.box, .panel, .module, .widget { background:var(--panel); border:1px solid var(--stroke); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; margin-bottom:18px }
h1,h2,h3{margin:.2em 0 .4em 0}
a{color:#bde9ff}

/* v4 tweaks: improved spacing for legacy lists */
.page .cards ul{margin:0 0 10px 18px}
.page .cards li{margin:2px 0}

/* v5: Modernized legacy blocks (mult / lines) */
.box h1{margin:12px 14px 8px 14px; font-size:22px}
.box .lines{display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; margin: 8px 14px 16px;}
.box .lines > div{background:rgba(255,255,255,.04); border:1px solid var(--stroke); border-radius:12px; padding:8px 10px; display:flex; justify-content:space-between; align-items:center}
.box .lines > div > span{opacity:.9}
.box .lines.logs > div{background:transparent; border:1px dashed var(--stroke)}
.box .lines.logs > div:first-child{background:rgba(255,255,255,.06)}

.mult{display:block; width:100%}
.mult .selec{display:flex; flex-wrap:wrap; gap:10px; margin:6px 14px 10px}
.mult .selec > div, .mult .selec > span{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:1px solid var(--stroke); background:rgba(255,255,255,.06);
  border-radius:14px; padding:8px 8px 10px; min-width:86px
}
.mult .selec > div:hover{background:rgba(255,255,255,.10)}
.mult .selec > div.actived{background:linear-gradient(180deg, rgba(110,231,255,.14), rgba(167,139,250,.10))}
.mult .selec img{width:70px; height:70px; border-radius:12px; border:1px solid var(--stroke); object-fit:cover}
.mult .selec > div > div{margin-top:6px; font-size:12px; max-width:90px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mult .infos{display:none; margin: 6px 8px 10px}
.mult .infos.actived{display:block}
.mult .infos .lines{grid-template-columns:1fr 1fr}
@media (max-width: 920px){ .box .lines{ grid-template-columns:1fr } .mult .infos .lines{ grid-template-columns:1fr } }

/* v6: Characters layout as 2-column grid with sticky selection */
.box{ background: var(--panel); border:1px solid var(--stroke); border-radius: var(--radius); box-shadow: var(--shadow); padding-bottom: 10px; }
.mult{ display:grid; grid-template-columns: 220px 1fr; align-items:start; gap: 8px; }
.mult .selec{ grid-column:1; display:flex; flex-direction:column; gap:10px; margin: 8px 12px; position: sticky; top: 88px; }
.mult .selec > div, .mult .selec > span{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:1px solid var(--stroke); background:rgba(255,255,255,.06);
  border-radius:14px; padding:8px 8px 10px; min-width:86px
}
.mult .selec > div:hover{background:rgba(255,255,255,.10)}
.mult .selec > div.actived{background:linear-gradient(180deg, rgba(110,231,255,.14), rgba(167,139,250,.10))}
.mult .selec img{width:66px; height:66px; border-radius:12px; border:1px solid var(--stroke); object-fit:cover}
.mult .selec > div > div{margin-top:6px; font-size:12px; max-width:110px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center}

.mult .infos{ grid-column:2; display:none; margin: 8px 12px; }
.mult .infos.actived{ display:block; }
.mult .infos .lines{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin: 0; }
.mult .infos .lines > div{
  background:rgba(255,255,255,.04); border:1px solid var(--stroke); border-radius:12px;
  padding:8px 10px; display:flex; justify-content:space-between; align-items:center
}
.mult .infos .lines > div > span{ opacity:.9 }
@media (max-width: 980px){
  .mult{ grid-template-columns: 1fr; }
  .mult .selec{ position:relative; top:auto; flex-direction:row; flex-wrap:wrap; }
  .mult .infos{ grid-column:auto; }
  .mult .infos .lines{ grid-template-columns:1fr; }
}
/* Better "Last access" lines */
.box .lines.logs{ display:grid; grid-template-columns:1fr; gap:8px; margin: 8px 14px 16px; }
.box .lines.logs > div{ background:transparent; border:1px dashed var(--stroke); border-radius:12px; padding:8px 10px; display:flex; justify-content:space-between; }
.box .lines.logs > div > span{ white-space:nowrap; margin-left:auto; opacity:.85 }

/* v7: Global polish */
/* Breadcrumbs */
ul.breadcrumb{list-style:none; display:flex; gap:10px; padding:0; margin: 6px 6px 10px}
ul.breadcrumb li{color:var(--muted); font-size:13px; display:flex; align-items:center; gap:10px}
ul.breadcrumb li+li:before{content:'›'; opacity:.5}

/* Headings inside page */
.page h1{font-size:24px; margin: 8px 8px 12px; font-weight:800}
.page h2{font-size:20px; margin: 6px 8px 10px; font-weight:700}

/* Inner padding wrapper */
.pddInner{padding: 12px 12px 16px; background: var(--panel); border:1px solid var(--stroke); border-radius: var(--radius); box-shadow: var(--shadow);}

/* Forms */
.formpadrao{display:grid; gap:14px; margin: 10px 4px}
.formpadrao .camp{display:grid; grid-template-columns: 220px 1fr; gap:10px; align-items:center}
.formpadrao .camp label{opacity:.9; font-weight:600}
.formpadrao input[type="text"], .formpadrao input[type="password"], .formpadrao input[type="email"], .formpadrao select, .formpadrao textarea{
  width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--stroke);
  background: rgba(255,255,255,.06); color:var(--text)
}
.formpadrao textarea{min-height:110px; resize:vertical}

/* Buttons */
a.default, span.default, input.default, button.default{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:12px; border:1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(110,231,255,.14), rgba(167,139,250,.10)); color:var(--text) !important;
  font-weight:700; cursor:pointer; text-decoration:none
}
a.default:hover, span.default:hover, input.default:hover, button.default:hover{ filter:brightness(1.1) }
a.default.big, input.default.big, button.default.big{ padding:12px 18px; font-size:15px }

/* Notices */
.rmsg{padding:10px 12px; border-radius:12px; border:1px solid var(--stroke); background:rgba(255,255,255,.06); margin:8px 2px; color:var(--text)}
.warn{background: rgba(255,196,0,.08); border-color: rgba(255,196,0,.25)}
.sucesso{background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.25)}
.erro{background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.25)}

/* Tables */
.page table{ width:100%; border-collapse: collapse; margin: 8px 0; }
.page table th, .page table td{ padding:10px 10px; border-bottom: 1px solid var(--stroke); text-align:left; font-size:14px }
.page table thead th{ color: var(--muted); font-weight:600; }
.page table tr:hover td{ background: rgba(255,255,255,.03) }

/* Pills */
.pill, .subpill{display:inline-block; padding:6px 10px; border:1px solid var(--stroke); border-radius:999px; background:rgba(255,255,255,.06); font-size:12px}

/* Small helpers */
.center{ text-align:center } .right{ text-align:right } .left{ text-align:left }
.small{ font-size:12px; opacity:.85 } .muted{ color:var(--muted) }

/* v8: cleanup filler spans + breadcrumb force */
.mult .selec > span{ display:none !important; } /* hide empty fillers */
.page ul.breadcrumb, .cards ul.breadcrumb{ list-style: none !important; padding:0 !important; margin: 6px 6px 10px !important; }
.page ul.breadcrumb li, .cards ul.breadcrumb li{ display:inline-flex; align-items:center; gap:10px; color:var(--muted) }
.page ul.breadcrumb li+li:before{ content:'›'; opacity:.5 }

/* v9: index layout columns + logs header refinement */
.page .cards > .box{ grid-column: span 12; }
@media (min-width: 1100px){
  .page .cards{ grid-template-columns: repeat(12, 1fr); }
  .page .cards > .box:nth-of-type(1),
  .page .cards > .box:nth-of-type(2){ grid-column: span 6; }
  .page .cards > .box:nth-of-type(3){ grid-column: span 6; justify-self: end; }
}

.box .head-pills{display:flex; gap:10px; padding: 0 14px 8px;}
.box .head-pills .pill{ background: rgba(255,255,255,.08); border-color: var(--stroke); font-weight:700; }

/* "Last access to panel" first row (IP | Date) */
.box .lines.logs > div:first-child{
  background: rgba(255,255,255,.06);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 8px 10px;
  display: grid; grid-template-columns: 1fr auto; gap: 8px;
}
.box .lines.logs > div:first-child span{ opacity:.9; }

/* Compact avatars spacing */
.mult .selec > div{ min-width: 92px; }

/* v10: remove top crumbs + logo brand + Characters polished */
.brand-img{ display:block; width:160px; height:auto; image-rendering:auto; }

/* hide any page-level breadcrumb lists */
.page .cards > ul.breadcrumb, .page ul.breadcrumb{ display:none !important; }

/* Characters info pills */
.mult .infos .lines{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px 12px; }
.mult .infos .lines > div{
  background: rgba(255,255,255,.05);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  min-height: 38px;
  padding: 6px 8px;
  display:flex; align-items:center; justify-content:space-between;
}
.mult .infos .lines > div > span{
  padding: 4px 8px;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--stroke);
  border-radius: 10px;
  min-width: 62px;
  text-align: center;
  white-space: nowrap;
}
/* Make small badges tighter */
.mult .infos .lines > div > span:empty:before{ content:'-'; opacity:.6 }

@media (max-width: 1200px){
  .mult .infos .lines{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 860px){
  .mult .infos .lines{ grid-template-columns: 1fr; }
}

/* Adjust topbar height when crumbs removed */
.topbar{ padding-top:14px; padding-bottom:14px }

/* v11: Characters background & fixes */
/* Strengthen crumb hiding */
.page .cards > ul.breadcrumb, .cards ul.breadcrumb, .page ul.breadcrumb{ display:none !important; }

/* Box base: more opaque to avoid seams */
.box{
  position: relative;
  background: linear-gradient(180deg, rgba(15,20,28,.92), rgba(15,20,28,.86));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
  background-clip: padding-box;
}

/* Characters-specific background */
.box:has(.mult)::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.2)),
    url('assets/images/characters-bg.jpg') center/cover no-repeat;
  opacity:.35; pointer-events:none;
}

/* Selected avatar highlight */
.mult .selec > div.actived{
  box-shadow: inset 0 0 0 2px rgba(110,231,255,.35), 0 6px 16px rgba(0,0,0,.35);
}

/* Pills equal height + value badges */
.mult .infos .lines > div{ min-height: 44px; }
.mult .infos .lines > div > span{ min-height: 28px; display:inline-flex; align-items:center; justify-content:center; }

/* Tighten grid gaps */
.mult{ gap: 14px; }
.mult .infos .lines{ gap: 12px; }

/* Improve headers alignment */
.box h1{ margin: 16px 16px 10px; }

/* v12: fix cut-offs + section backgrounds + reliable layout */
/* Boxes more visible + no clipping of inner shadows */
.box{ position:relative; background: rgba(15,20,28,.9); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); overflow: visible; }

/* Section backgrounds (no :has) -> use predictable order on index: 1:account, 2:last access, 3:characters */
.page .cards > .box:nth-of-type(1)::before,
.page .cards > .box:nth-of-type(2)::before,
.page .cards > .box:nth-of-type(3)::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.35;
  background-size: cover; background-position: center;
  border-radius: var(--radius);
}
.page .cards > .box:nth-of-type(1)::before{ background-image: url('assets/images/bg-account.jpg'); }
.page .cards > .box:nth-of-type(2)::before{ background-image: url('assets/images/bg-logs.jpg'); }
.page .cards > .box:nth-of-type(3)::before{ background-image: url('assets/images/bg-characters.jpg'); }

/* Content sits above section bg */
.box > *{ position:relative; z-index:1; }

/* Characters layout robust sizing */
.mult{ display:grid; grid-template-columns: 240px minmax(0,1fr); align-items:start; gap: 14px; max-width: 100%; box-sizing: border-box; }
.mult .selec{ grid-column:1; display:flex; flex-direction:column; gap:12px; margin: 6px 12px; position: sticky; top: 88px; }
.mult .selec > div, .mult .selec > span{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:1px solid var(--stroke); background:rgba(255,255,255,.06);
  border-radius:14px; padding:10px 10px 12px; min-width:110px; box-sizing:border-box;
}
.mult .selec img{ width:72px; height:72px; border-radius:12px; border:1px solid var(--stroke); object-fit:cover }
.mult .selec > div > div{ margin-top:6px; font-size:12px; max-width:120px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center }

.mult .infos{ grid-column:2; margin: 6px 12px; max-width: 100%; box-sizing: border-box; }
.mult .infos .lines{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.mult .infos .lines > div{
  min-width: 0; /* allow shrink */
  background: rgba(255,255,255,.05); border:1px solid var(--stroke); border-radius:12px;
  min-height:46px; padding:8px 10px; display:flex; align-items:center; justify-content:space-between; gap:10px; box-sizing:border-box;
}
.mult .infos .lines > div > span{
  min-width: 56px; padding:4px 8px; background: rgba(255,255,255,.07); border:1px solid var(--stroke); border-radius:10px;
  min-height: 28px; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap;
}

@media (max-width: 1280px){
  .mult{ grid-template-columns: 220px minmax(0,1fr); }
  .mult .infos .lines{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 980px){
  .mult{ grid-template-columns: 1fr; }
  .mult .selec{ position:relative; top:auto; flex-direction:row; flex-wrap:wrap; }
  .mult .infos{ grid-column:auto; }
  .mult .infos .lines{ grid-template-columns: 1fr; }
}

/* Last access first row: nicer chips */
.box .lines.logs > div:first-child{ display:grid; grid-template-columns: 1fr auto; gap: 10px; background: rgba(255,255,255,.06); border:1px solid var(--stroke); border-radius:12px; padding:8px 10px; }
.box .lines.logs > div:first-child span{ opacity:.9 }

/* Remove stray bullets anywhere */
.page .cards ul, .page ul{ list-style: none; padding-left: 0; }

/* v13: Fix overlapping pills & hard resets for legacy inline floats */
.mult .infos .lines > div{
  float: none !important;
  position: static !important;
  width: auto !important;
  margin: 0 !important;
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.mult .infos .lines > div b{ font-weight:600; }
.mult .infos .lines > div span{ flex-shrink: 0; }

/* Ensure the grid itself doesn't inherit floats */
.mult .infos .lines{ display:grid !important; }

/* Prevent text overlap by allowing wrapping only on labels */
.mult .infos .lines > div{ white-space: nowrap; }
.mult .infos .lines > div b{ white-space: normal; }

/* Slightly taller chips for readability */
.mult .infos .lines > div{ min-height: 48px; }
.mult .infos .lines > div > span{ min-height: 30px; min-width: 64px; }

/* Characters card container: padding to avoid inner crop */
.page .cards > .box:nth-of-type(3){ padding-bottom: 14px; }

/* v14: clearer label/value spacing & stronger backgrounds */
/* Characters info grid: bigger gaps */
.mult .infos{ padding-right: 6px; }
.mult .infos .lines{ gap: 16px 16px; }

/* Every cell: label left, values right */
.mult .infos .lines > div{ display:flex !important; align-items:center; justify-content:flex-start; gap:10px; }
.mult .infos .lines > div > span:first-of-type{ margin-left:auto; } /* push first value to the right */
.mult .infos .lines > div > span + span{ margin-left:8px; }

/* Ensure values never wrap onto labels */
.mult .infos .lines > div{ white-space:nowrap; }
.mult .infos .lines > div > span{ white-space:nowrap; flex:0 0 auto; }

/* Backgrounds using :has when available + nth fallback */
.box:has(.mult)::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background: url('assets/images/bg-characters.jpg') center/cover no-repeat, radial-gradient(1200px 600px at 60% -10%, rgba(110,231,255,.06), transparent 60%); opacity:.35; }
.page .cards > .box:nth-of-type(1)::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background: url('assets/images/bg-account.jpg') center/cover no-repeat; opacity:.30; }
.page .cards > .box:nth-of-type(2)::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background: url('assets/images/bg-logs.jpg') center/cover no-repeat; opacity:.30; }
.box > *{ position:relative; z-index:1; }


/* ========================
   v14.1 – Visual polish & bug fixes
   - Prevent value text overlapping in .lines rows (Account/Characters)
   - Better truncation on very long values (dates, e‑mails, etc)
   - Mobile: force single column for .lines
   - Make section background images a tad more visible
   ======================== */

.box .lines{ grid-template-columns: 1fr 1fr; gap: 10px 12px }
.box .lines > div{ display:flex; align-items:center; justify-content:space-between; min-height:36px; padding:10px 12px; border-radius:12px; border:1px solid var(--stroke); background:rgba(255,255,255,.04); min-width:0 }
.box .lines > div > span{ flex:1 1 auto; min-width:0; margin-left:12px; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.95 }
@media (max-width: 760px){
  .box .lines{ grid-template-columns: 1fr !important }
}

/* Section background stronger (still subtle) */
.page .cards > .box:nth-of-type(1)::before,
.page .cards > .box:nth-of-type(2)::before,
.page .cards > .box:nth-of-type(3)::before{ opacity:.40 }

/* Ensure bg image is always shown behind everything */
.bg{ position:fixed; inset:0; z-index:-2 }
.bg-overlay{ z-index:-1 }



/* v14.2 – "Reborn-like" header & accents */
:root{
  --brand:#7c7bff;
  --brand-2:#9a7cff;
}

.topbar{position:sticky; top:0; z-index:40; border-bottom:1px solid var(--stroke);
  background:rgba(11,15,22,.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);}
.topbar .top-inner{max-width:1400px; margin:0 auto; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:16px}
.topbar .left{display:flex; align-items:center; gap:14px}
.topbar .right{display:flex; align-items:center; gap:12px}

.tabs{display:flex; align-items:center; gap:10px}
.tab{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  background:transparent; border:1px solid transparent; color:var(--muted); font-weight:600; text-decoration:none}
.tab:hover{color:var(--text); background:rgba(255,255,255,.04); border-color:var(--stroke)}

.btn-soft{display:inline-flex; align-items:center; padding:8px 12px; border-radius:12px; border:1px solid var(--stroke);
  background:rgba(255,255,255,.06); text-decoration:none; color:var(--text); font-weight:600}
.btn-primary{display:inline-flex; align-items:center; padding:10px 14px; border-radius:12px;
  background:linear-gradient(180deg, rgba(124,123,255,.25), rgba(154,124,255,.18));
  box-shadow: 0 10px 24px rgba(124,123,255,.2), inset 0 0 0 1px rgba(255,255,255,.07);
  border:1px solid rgba(124,123,255,.35); text-decoration:none; color:white; font-weight:700}
.btn-primary:hover{transform: translateY(-1px)}

.brand-btn, .default, button.default, input.default{
  background:linear-gradient(180deg, rgba(124,123,255,.25), rgba(154,124,255,.18)) !important;
  border-color: rgba(124,123,255,.35) !important;
  box-shadow: 0 8px 18px rgba(124,123,255,.18), inset 0 0 0 1px rgba(255,255,255,.06) !important;
}

.card{border-radius:20px}
.card .card-head{backdrop-filter: none}



/* v14.3 – Hero summary bar */
.hero{padding:8px 16px 0}
.hero .hero-wrap{max-width:1400px;margin:0 auto;display:flex;align-items:center;gap:16px}
.hero .secondary{display:none}
.hero-wallet{margin-left:auto;display:flex;align-items:center;gap:16px;background:rgba(17,23,32,.82);
  border:1px solid var(--stroke); border-radius:20px; padding:12px 14px; box-shadow: var(--shadow);
  position:relative; overflow:hidden}
.hero-wallet::before{content:"";position:absolute; inset:0;background: radial-gradient(800px 400px at 90% -20%, rgba(124,123,255,.18), transparent 60%); pointer-events:none}
.wallet-kpis{display:flex; gap:18px}
.wallet-kpis .kpi{display:flex;flex-direction:column; gap:2px; min-width:120px}
.wallet-kpis .label{font-size:12px; color:var(--muted)}
.wallet-kpis .value{font-weight:800; font-size:18px; letter-spacing:.4px}
.wallet-actions{display:flex; gap:10px}

/* Optional server cards grid (for future use) */
.cards.servers{grid-template-columns: repeat(12,1fr)}
.server-card{grid-column: span 12; display:grid; grid-template-columns: 160px 1fr auto; gap:16px; align-items:center;
  background: rgba(17,23,32,.82); border:1px solid var(--stroke); border-radius:18px; padding:12px; box-shadow: var(--shadow)}
.server-card .thumb{width:160px; height:90px; background-size:cover; background-position:center; border-radius:12px; border:1px solid var(--stroke)}
.server-card .meta h4{margin:0 0 4px 0}
.server-card .meta .pill{font-size:12px; padding:2px 8px; border-radius:999px; border:1px solid var(--stroke); margin-left:8px; background:rgba(255,255,255,.06)}
.server-card .meta .sub{color: var(--muted); margin-bottom:4px}
.server-card .meta .stats{opacity:.9}
@media (min-width:920px){ .server-card{grid-column: span 6} }
@media (max-width:760px){ .server-card{grid-template-columns: 1fr; } .server-card .thumb{width:100%; height:140px} }



/* === Auto patch: prevent overlapping/clipping of stat items and labels === */
.ucp-grid, .stats-grid, .info-grid, .character-stats, .character-info, .panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-gap: 12px;
}
.ucp-item, .stat-box, .info-box, .pill, .badge, .value-box, .panel-box {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}
.ucp-item > *, .stat-box > *, .info-box > *, .value-box > * {
  min-width: 0; /* allow text wrapping inside flex children */
}
.ucp-label, .stat-label, .info-label, .box-title {
  flex: 0 0 auto;
  font-weight: 600;
  white-space: normal;
}
.ucp-value, .stat-value, .info-value, .box-value {
  flex: 1 1 auto;
  text-align: right;
  white-space: normal;
  overflow-wrap: anywhere;
}
/* Prevent fixed heights from clipping text */
[class*="box"], [class*="pill"], [class*="item"], [class*="field"] {
  height: auto !important;
}
/* Make pills/inputs wrap gracefully */
input, select, .pill, .badge, .value-box {
  max-width: 100%;
  white-space: normal;
}



/* === Auto patch v2: targeted overrides for .lines layout === */
.box .lines {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  grid-gap: 12px !important;
}
.box .lines > div {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 42px !important;
  height: auto !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  padding: 10px 12px !important;
}
.box .lines > div > span {
  float: none !important;
  margin-left: auto !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
/* Ensure grid items don't overlap even if content is long */
.box .lines > div * {
  min-width: 0;
}



/* === Hotfix v3 === */
/* Restore default .lines so modules that relied on legacy flow don't break */
.lines { display: block !important; margin: 0 15px !important; }
.lines > div { display: block !important; }

/* Keep grid only inside .box (account info etc.) */
.box .lines { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important; gap: 10px 12px !important; }
.mult .infos .lines { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px 12px !important; }

/* Character selector tiles */
.mult .selec > div, .mult .selec > span { min-height: 86px !important; }

/* Fix "Last access to panel" header row being pure white */
.lines.logs > div { background: transparent !important; border: 1px dashed var(--stroke) !important; }
.lines.logs > div:first-child { background: rgba(255,255,255,0.06) !important; color: var(--text) !important; }

/* Make spans wrap properly inside info rows */
.lines > div > span { float: none !important; margin-left: auto; white-space: normal !important; overflow-wrap: anywhere; }



/* === Auto patch v3: fix character selector card layout === */
.mult { display: block; width: 100%; }
.mult .selec { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 14px 10px; }
.mult .selec > div {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 10px;
  width: 100px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.mult .selec > div img {
  display:block;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 10px;
}
.mult .selec > div > div {
  margin-top: 6px;
  font-size: 12px;
  max-width: 92px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Ensure the details pane is visible */
.infos { display: none; margin: 6px 8px 10px; }
.infos.actived { display: block; }


/* === Auto patch v4: Guarantee Characters tab visibility === */
.box > .mult {
  position: relative;
  z-index: 1;
  padding: 8px 10px;
  min-height: 120px;
}
.box > .mult * { visibility: visible !important; }
.mult .selec { display: flex !important; flex-wrap: wrap !important; }
.mult .selec > div { display: flex !important; }
.mult .infos { display: none; }
.mult .infos.actived { display: block !important; }



/* === Auto patch v5: make Characters selector always visible and sized === */
.box .mult { display: block !important; }
.box .mult .selec { display: flex !important; flex-wrap: wrap !important; gap: 10px; margin: 6px 14px 10px; min-height: 120px; }
.box .mult .selec > div { opacity: 1 !important; visibility: visible !important; }
.box .mult .selec > div > div { color: inherit !important; }
.box .mult .selec img { display: block !important; }
.box .mult .infos { display: none; margin: 6px 8px 10px; }
.box .mult .infos.actived { display: block !important; }



/* v6.1: ensure Characters box has content visible even if sticky/positioning conflicts */
.box .mult { min-height: 180px; }
.box .mult .selec { min-height: 100px; }



/* Force uniform background for last access rows */
.box .lines.logs > div { background: rgba(255,255,255,.04) !important; border:1px solid var(--stroke) !important; }
.box .lines.logs > div:first-child { background: rgba(255,255,255,.04) !important; }



/* === Alignment patch for Characters section === */
.box .mult {
  display: grid !important;
  grid-template-columns: 128px 1fr !important; /* left avatars column + details */
  column-gap: 16px !important;
  align-items: start !important;
}
.box .mult .selec {
  margin: 8px 0 !important;
  width: 128px !important;
  position: sticky;
  top: 88px;
}
.box .mult .selec > div,
.box .mult .selec > span {
  width: 128px !important;
}
.box .mult .selec img {
  width: 70px !important;
  height: 70px !important;
}
/* Make the info pills two equal columns with consistent spacing */
.box .mult .infos .lines {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
  gap: 10px 12px !important;
  margin-right: 12px;
}
/* Label on the left, value on the right, clean alignment */
.box .mult .infos .lines > div {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 12px !important;
  height: auto !important;
  white-space: normal !important;
}
.box .mult .infos .lines > div > span {
  margin-left: auto !important;
  text-align: right !important;
  overflow-wrap: anywhere !important;
}



/* === Layout patch v9: widen Characters box on desktop === */
@media (min-width: 1100px){
  .page .cards{ grid-template-columns: repeat(12, 1fr); }
  .page .cards > .box:nth-of-type(1),
  .page .cards > .box:nth-of-type(2){ grid-column: span 4 !important; }
  .page .cards > .box:nth-of-type(3){ grid-column: span 8 !important; justify-self: stretch !important; }
}
/* Inside Characters, give each info column a bit more space */
.box .mult .infos .lines{
  grid-template-columns: repeat(2, minmax(320px, 1fr)) !important;
}



/* === Layout patch v10: Characters full-width on desktop === */
@media (min-width: 1100px){
  .page .cards{ grid-template-columns: repeat(12, 1fr) !important; }
  .page .cards > .box:nth-of-type(1),
  .page .cards > .box:nth-of-type(2){ grid-column: span 4 !important; }
  .page .cards > .box:nth-of-type(3){ grid-column: span 12 !important; justify-self: stretch !important; }
}
/* Give more room to text in the two info columns */
.box .mult .infos .lines{
  grid-template-columns: repeat(2, minmax(360px, 1fr)) !important;
}



/* === Layout patch v10: Characters full-width on desktop === */
@media (min-width: 1100px){
  .page .cards{ grid-template-columns: repeat(12, 1fr); }
  /* keep the first two boxes reasonable */
  .page .cards > .box:nth-of-type(1),
  .page .cards > .box:nth-of-type(2){ grid-column: span 4 !important; }
  /* make the Characters box (3rd) span all columns */
  .page .cards > .box:nth-of-type(3){
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
  }
}
/* give more room for each info pill inside */
.box .mult .infos .lines{
  grid-template-columns: repeat(2, minmax(360px, 1fr)) !important;
}



/* === Layout patch v11: Characters x3 wider === */
@media (min-width: 1100px){
  .page .cards{ grid-template-columns: repeat(12, 1fr); }
  /* Preferentially target the Characters box by its content (.mult) */
  .page .cards > .box:has(.mult){
    grid-column: 1 / -1 !important;  /* full row (≈ 3x compared to a 4/12 box) */
    justify-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
  }
  /* Fallback in case :has isn't supported or the selector order differs */
  .page .cards > .box:nth-of-type(3){
    grid-column: 1 / -1 !important;
  }
}
/* Give the details area more columns to use the extra width */
@media (min-width: 1100px){
  .box .mult{ grid-template-columns: 160px 1fr !important; column-gap: 18px !important; }
  .box .mult .infos .lines{ grid-template-columns: repeat(3, minmax(260px, 1fr)) !important; }
}
@media (min-width: 1500px){
  .box .mult .infos .lines{ grid-template-columns: repeat(3, minmax(300px, 1fr)) !important; }
}



/* === Layout patch v12: Left column (Account + Last access) and Characters to the right === */
@media (min-width: 1100px){
  .page .cards {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-flow: dense;
    grid-row-gap: 20px;
  }
  /* 1) Account information: left column, top */
  .page .cards > .box:nth-of-type(1){
    grid-column: 1 / span 4 !important;
    grid-row: 1 !important;
  }
  /* 2) Last access: left column, below account */
  .page .cards > .box:nth-of-type(2){
    grid-column: 1 / span 4 !important;
    grid-row: 2 !important;
  }
  /* 3) Characters: to the right, occupying both rows */
  .page .cards > .box:nth-of-type(3){
    grid-column: 5 / -1 !important; /* 8 columns (5..12) */
    grid-row: 1 / span 2 !important; /* span 2 rows */
    justify-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
  }
}



/* === Layout patch v12: Left column (2 boxes stacked) + Characters on the right spanning 2 rows === */
@media (min-width: 1100px){
  .page .cards{ 
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    grid-auto-rows: minmax(80px, auto) !important;
    gap: 16px !important;
  }
  /* Left column: Account info (row 1), Last access (row 2) */
  .page .cards > .box:nth-of-type(1){
    grid-column: 1 / span 4 !important;
    grid-row: 1 !important;
  }
  .page .cards > .box:nth-of-type(2){
    grid-column: 1 / span 4 !important;
    grid-row: 2 !important;
  }
  /* Characters on the right, spanning both rows */
  .page .cards > .box:nth-of-type(3){
    grid-column: 5 / -1 !important;
    grid-row: 1 / span 2 !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
  }
  /* If the order ever changes, prefer the box that contains .mult (characters) */
  .page .cards > .box:has(.mult){
    grid-column: 5 / -1 !important;
    grid-row: 1 / span 2 !important;
  }
  /* Make better use of the wider area inside Characters */
  .box .mult{ grid-template-columns: 160px 1fr !important; column-gap: 18px !important; }
  .box .mult .infos .lines{ grid-template-columns: repeat(3, minmax(260px, 1fr)) !important; }
}



/* === Layout patch v13: 2px horizontal gap between left column and Characters === */
@media (min-width: 1100px){
  .page .cards{
    column-gap: 2px !important;   /* horizontal space between columns */
    row-gap: 16px !important;      /* keep vertical spacing comfortable */
  }
  /* Remove any extra margins that could recreate a gap */
  .page .cards > .box:nth-of-type(1),
  .page .cards > .box:nth-of-type(2),
  .page .cards > .box:nth-of-type(3),
  .page .cards > .box:has(.mult){
    margin: 0 !important;
  }
}



/* === Layout patch v14: explicit 2-column grid (left fixed, right flexible) with 2px gap === */
@media (min-width: 1100px){
  .page .cards{
    display: grid !important;
    grid-template-columns: 420px 1fr !important; /* left column fixed, right fills */
    column-gap: 2px !important;
    row-gap: 16px !important;
  }
  /* Left column: top/bottom */
  .page .cards > .box:nth-of-type(1){ grid-column: 1 !important; grid-row: 1 !important; margin: 0 !important; }
  .page .cards > .box:nth-of-type(2){ grid-column: 1 !important; grid-row: 2 !important; margin: 0 !important; }
  /* Characters on the right spanning both rows */
  .page .cards > .box:has(.mult){ grid-column: 2 !important; grid-row: 1 / span 2 !important; margin: 0 !important; justify-self: stretch !important; width: 100% !important; max-width: none !important; }
  /* Fallback if :has is unsupported */
  .page .cards > .box:nth-of-type(3){ grid-column: 2 !important; grid-row: 1 / span 2 !important; }
}



/* === Layout patch v15: Characters info grid -> 2 columns (desktop) === */
@media (min-width: 1100px){
  .box .mult .infos .lines{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(360px, 1fr)) !important;
    gap: 12px !important;
  }
}
@media (min-width: 1500px){
  .box .mult .infos .lines{
    grid-template-columns: repeat(2, minmax(420px, 1fr)) !important;
  }
}



/* === Layout patch v16: Force specific fields to left column === */
/* Default all items to the right column */
.box .mult .infos .lines > div { grid-column: 2 !important; }
/* First block (.lines) order:
   1 Name, 2 Title, 3 Created in, 4 Online, 5 Class, 6 Subclass 1, 7 Subclass 2, 8 Subclass 3, 9 Level
   -> Left column should be: 1,3,5,6,7,8
*/
.box .mult .infos .lines:first-of-type > div:nth-child(1),
.box .mult .infos .lines:first-of-type > div:nth-child(3),
.box .mult .infos .lines:first-of-type > div:nth-child(5),
.box .mult .infos .lines:first-of-type > div:nth-child(6),
.box .mult .infos .lines:first-of-type > div:nth-child(7),
.box .mult .infos .lines:first-of-type > div:nth-child(8){
  grid-column: 1 !important;
}
/* Second block (.lines) order:
   1 Gender, 2 PvP, 3 Pk, 4 Karma, 5 Clan, 6 Alliance, 7 Noble, 8 Hero, 9 Online Time
   -> Left column should be: 5,6,9
*/
.box .mult .infos .lines:last-of-type > div:nth-child(5),
.box .mult .infos .lines:last-of-type > div:nth-child(6),
.box .mult .infos .lines:last-of-type > div:nth-child(9){
  grid-column: 1 !important;
}



/* === Layout patch v17: remove gaps using dense flow & reset default column === */
.box .mult .infos .lines{
  grid-auto-flow: row dense !important;
}
/* Reset default so items auto-place; only forced items stick to left */
.box .mult .infos .lines > div{
  grid-column: auto !important;
}
/* Keep the required left-column items pinned */
.box .mult .infos .lines:first-of-type > div:nth-child(1),
.box .mult .infos .lines:first-of-type > div:nth-child(3),
.box .mult .infos .lines:first-of-type > div:nth-child(5),
.box .mult .infos .lines:first-of-type > div:nth-child(6),
.box .mult .infos .lines:first-of-type > div:nth-child(7),
.box .mult .infos .lines:first-of-type > div:nth-child(8),
.box .mult .infos .lines:last-of-type > div:nth-child(5),
.box .mult .infos .lines:last-of-type > div:nth-child(6),
.box .mult .infos .lines:last-of-type > div:nth-child(9){
  grid-column: 1 !important;
}



/* === Layout patch v18: unify both .lines into one grid (no gaps) === */
@media (min-width: 1100px){
  .box .mult .infos{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(360px, 1fr)) !important;
    gap: 12px !important;
    grid-auto-flow: row dense !important;
  }
  /* Flatten wrappers so children flow in one grid */
  .box .mult .infos .lines{ display: contents !important; }
}



/* === Layout patch v19: fix visibility + unified grid without gaps === */
@media (min-width: 1100px){
  /* Hide all info panels by default */
  .box .mult .infos{ display: none !important; }
  /* Show only the active one as a unified 2-col grid */
  .box .mult .infos.actived{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(360px, 1fr)) !important;
    gap: 12px !important;
    grid-auto-flow: row dense !important;
  }
  /* Flatten inner wrappers for seamless flow */
  .box .mult .infos.actived .lines{ display: contents !important; }
  /* Remove any previous forced column placement */
  .box .mult .infos.actived > *{ grid-column: auto !important; }
  .box .mult .infos.actived .lines > *{ grid-column: auto !important; }
}



/* === Layout patch v22: shrink info pills slightly to avoid right clipping === */
@media (min-width: 1100px){
  .box .mult .infos.actived{
    grid-template-columns: repeat(2, minmax(320px, 1fr)) !important;
    gap: 10px !important;
    padding-right: 8px !important;
  }
  .box .mult .infos.actived .lines > div,
  .box .mult .infos.actived > div{
    box-sizing: border-box !important;
    padding: 8px 10px !important; /* slightly tighter */
  }
}
@media (min-width: 1500px){
  .box .mult .infos.actived{
    grid-template-columns: repeat(2, minmax(340px, 1fr)) !important;
  }
}


/* Hide leftover language switchers or footer branding */
.lang-switcher, .langs, .sidebar-footer { display:none !important; }


/* === Services page theming (align with overall UCP style) === */
#ef-services{ margin: 0 0 22px 0; }
#ef-services .ef-wrap{ max-width: 1120px; margin: 0; }
#ef-services .ef-section{ background: rgba(255,255,255,.04); border: 1px solid var(--stroke); border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
#ef-services .ef-section + .ef-section{ margin-top: 16px; }
#ef-services .ef-section-title{ padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
#ef-services .ef-section-title .t{ font-weight: 800; letter-spacing: .2px; }
#ef-services .ef-row{ display: grid; grid-template-columns: 1fr; gap: 12px; }
#ef-services .ef-card{ background: rgba(255,255,255,.03); border:1px solid var(--stroke); border-radius: 14px; padding: 12px; }
#ef-services .ef-card .ef-line{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border-radius:12px; border:1px solid var(--stroke); background: rgba(255,255,255,.03); }
#ef-services .ef-control{ display:flex; align-items:center; gap:8px; }
#ef-services select, #ef-services input[type="text"], #ef-services input[type="number"]{
  background: rgba(255,255,255,.04); border:1px solid var(--stroke); border-radius: 12px; color: var(--light);
  padding: 8px 10px; min-height: 38px; outline: none;
}
#ef-services .ef-btn, #ef-services button, #ef-services .btn{
  background: linear-gradient(180deg, #5b8cff, #355bff);
  border:1px solid rgba(255,255,255,.2);
  color:#fff; font-weight:700; border-radius:12px; padding:7px 12px; min-height: 36px;
  box-shadow: 0 6px 16px rgba(28,78,216,.25), inset 0 1px 0 rgba(255,255,255,.25);
}
#ef-services .ef-btn:hover, #ef-services button:hover, #ef-services .btn:hover{ filter: brightness(1.05); }
#ef-services .ef-badge{ border-radius:999px; padding:4px 10px; border:1px solid rgba(0,0,0,.25); box-shadow:inset 0 1px 0 rgba(255,255,255,.25); }
#ef-services .ef-note{ color: #b8c4ff; font-size: 12px; opacity: .9; }
@media (min-width: 1200px){
  #ef-services .ef-row{ grid-template-columns: repeat(2, 1fr); }
}



/* === Lift Services page to top and align with site spacing === */
.page.page-services{ padding-top: 12px !important; }
#ef-services{ margin-top: 0 !important; padding-top: 0 !important; }
#ef-services .ef-title{ margin-top: 0 !important; padding-top: 0 !important; }



/* === Services width override (force full content width) === */
.page.page-services { padding-top: 10px !important; }
#ef-services { max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
#ef-services .ef-card { width: 100% !important; }
/* Inner web services block */
#ef-web-services { background: rgba(255,255,255,.04); border:1px solid var(--stroke); border-radius: 16px; padding: 12px; }
#ef-web-services h3 { margin: 6px 10px 12px; font-weight: 800; letter-spacing: .2px; }
/* Layout for rows inside */
#ef-web-services .row { display:flex; align-items:center; gap: 12px; padding: 8px 10px; border:1px solid var(--stroke); border-radius: 12px; background: rgba(255,255,255,.03); }
#ef-web-services .row + .row { margin-top: 10px; }
#ef-web-services select, #ef-web-services input, #ef-web-services .btn { min-height: 36px; }
/* Buttons */
#ef-web-services .btn { background: linear-gradient(180deg, #5b8cff, #355bff); border:1px solid rgba(255,255,255,.25); color:#fff; font-weight:700; border-radius:10px; padding:6px 12px; }
#ef-web-services .btn:hover { filter: brightness(1.06); }