/* roamlinx.pl account portal — storefront V2 visual layer. */
:root{
  --rlx-red:#ff3b3b;
  --rlx-red-hover:#d60000;
  --rlx-red-light:rgba(255,59,59,.11);
  --rlx-red-focus:rgba(255,59,59,.2);
  --rlx-ink:#eef1f6;
  --rlx-text:#cbd2dc;
  --rlx-muted:#99a3b3;
  --rlx-accent:#99a3b3;
  --rlx-border:rgba(255,255,255,.09);
  --rlx-border-light:rgba(255,255,255,.055);
  --rlx-surface:#14181f;
  --rlx-surface-muted:#1d222c;
  --rlx-bg:#0b0d12;
  --rlx-bg-secondary:#1d222c;
  --rlx-success:#45d483;
  --rlx-success-bg:rgba(69,212,131,.12);
  --rlx-success-border:rgba(69,212,131,.24);
  --rlx-warning:#ffd166;
  --rlx-warning-bg:rgba(255,209,102,.12);
  --rlx-warning-border:rgba(255,209,102,.24);
  --rlx-error:#ff6b6b;
  --rlx-error-bg:rgba(255,107,107,.12);
  --rlx-error-border:rgba(255,107,107,.24);
  --rlx-info:#75a7ff;
  --rlx-info-bg:rgba(117,167,255,.12);
  --rlx-info-border:rgba(117,167,255,.24);
  --shadow-sm:0 2px 8px rgba(0,0,0,.2);
  --shadow-md:0 18px 42px -26px rgba(0,0,0,.85);
  --shadow-lg:0 24px 60px -32px rgba(0,0,0,.85);
  --shadow-xl:0 30px 70px -34px rgba(0,0,0,.9);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --rlx-red:#d60000;
  --rlx-red-hover:#b00000;
  --rlx-red-light:rgba(214,0,0,.07);
  --rlx-red-focus:rgba(214,0,0,.15);
  --rlx-ink:#0e1320;
  --rlx-text:#3f4a5d;
  --rlx-muted:#657084;
  --rlx-accent:#657084;
  --rlx-border:rgba(12,18,32,.1);
  --rlx-border-light:rgba(12,18,32,.065);
  --rlx-surface:#fff;
  --rlx-surface-muted:#eef1f7;
  --rlx-bg:#f6f8fc;
  --rlx-bg-secondary:#eef1f7;
  --rlx-success:#087f4d;
  --rlx-success-bg:#e5f7ee;
  --rlx-success-border:#bde9d2;
  --rlx-warning:#a16207;
  --rlx-warning-bg:#fff5d6;
  --rlx-warning-border:#f7dda0;
  --rlx-error:#c62828;
  --rlx-error-bg:#ffeded;
  --rlx-error-border:#f5c7c7;
  --rlx-info:#1d5fc4;
  --rlx-info-bg:#edf4ff;
  --rlx-info-border:#c9dcfa;
  --shadow-sm:0 2px 8px rgba(20,30,60,.06);
  --shadow-md:0 18px 42px -28px rgba(20,30,60,.3);
  --shadow-lg:0 24px 50px -30px rgba(20,30,60,.32);
  --shadow-xl:0 30px 60px -34px rgba(20,30,60,.35);
  color-scheme:light;
}

html{background:var(--rlx-bg)}
body,body.auth-mode,body.portal-mode{
  color:var(--rlx-text);
  background:
    radial-gradient(760px 380px at 82% -6%,color-mix(in srgb,var(--rlx-red) 10%,transparent),transparent 72%),
    radial-gradient(520px 300px at 5% 8%,color-mix(in srgb,var(--rlx-red) 5%,transparent),transparent 72%),
    var(--rlx-bg);
  letter-spacing:-.006em;
  transition:background .2s ease,color .2s ease;
}
a:hover{text-decoration:none}

.portal-theme-toggle{
  width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;border:1px solid var(--rlx-border);border-radius:10px;
  background:transparent;color:var(--rlx-ink);font:inherit;cursor:pointer;transition:.15s ease;
}
.portal-theme-toggle:hover{border-color:var(--rlx-red);color:var(--rlx-red);transform:translateY(-1px)}
.auth-theme-toggle{position:fixed;top:18px;right:18px;z-index:20;background:var(--rlx-surface)}
body.portal-mode .auth-theme-toggle{display:none}

.navbar{
  min-height:64px;padding:0 20px;background:color-mix(in srgb,var(--rlx-bg) 80%,transparent);
  border-bottom:1px solid var(--rlx-border);box-shadow:0 10px 32px -28px rgba(0,0,0,.9);
}
.navbar-inner{max-width:1180px;min-height:64px;padding:0}
.nav-brand{gap:10px;color:var(--rlx-ink)}
.nav-brand span{color:var(--rlx-text)}
.nav-brand .portal-wordmark{font-size:19px;font-weight:800;letter-spacing:-.03em;color:var(--rlx-ink)}
.nav-brand .portal-wordmark b{color:var(--rlx-red);font-weight:800}
.nav-brand .portal-label{font-size:12px;font-weight:700;color:var(--rlx-muted);padding-left:10px;border-left:1px solid var(--rlx-border)}
.logo-img--nav{height:28px;max-height:28px;padding:0}
.nav-right{gap:8px}
.user-btn,.lang-btn{
  min-height:38px;padding:7px 11px;background:var(--rlx-surface-muted);border-color:var(--rlx-border);
  border-radius:10px;color:var(--rlx-ink);
}
.user-btn:hover,.lang-btn:hover{border-color:var(--rlx-red);background:var(--rlx-surface-muted);box-shadow:none}
.user-btn i,.lang-btn i,.user-btn .chevron,.lang-btn .chevron{color:var(--rlx-muted)}
.dropdown,.lang-dropdown{background:var(--rlx-surface);border-color:var(--rlx-border);border-radius:12px;box-shadow:var(--shadow-lg)}
.dropdown-item{color:var(--rlx-text)}

.auth-wrap{max-width:430px;margin:clamp(54px,10vh,110px) auto;padding:0 18px}
.auth-wrap .card{
  position:relative;padding:36px 38px 34px;border-radius:20px;background:color-mix(in srgb,var(--rlx-surface) 97%,transparent);
  border-color:var(--rlx-border);box-shadow:var(--shadow-xl);
}
.portal-brand--auth{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--rlx-ink)}
.portal-brand--auth img{height:31px;width:auto;margin:0}
.portal-brand--auth .portal-wordmark{font-size:23px;font-weight:800;letter-spacing:-.035em}
.portal-brand--auth b{color:var(--rlx-red)}
.auth-title{font-size:1.45rem;color:var(--rlx-ink);letter-spacing:-.025em}
.auth-legal{color:var(--rlx-muted)}

.container{max-width:1180px;padding:32px 20px 54px}
.card{
  background:var(--rlx-surface);border-color:var(--rlx-border);border-radius:16px;
  box-shadow:var(--shadow-md);
}
.card--flat{box-shadow:var(--shadow-sm);border-radius:14px}
.card--hover:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--rlx-red) 35%,var(--rlx-border));box-shadow:var(--shadow-lg)}
.card--surface-muted{background:var(--rlx-surface-muted)}

.btn{border-radius:10px;font-weight:700}
.btn-primary{background:#d60000;color:#fff;box-shadow:0 10px 24px -16px rgba(214,0,0,.8)}
.btn-primary:hover:not(:disabled){background:#b00000;box-shadow:0 14px 30px -18px rgba(214,0,0,.9)}
.btn-secondary{background:var(--rlx-surface-muted);color:var(--rlx-ink);border-color:var(--rlx-border)}
.btn-ghost{color:var(--rlx-text)}

.form-label{color:var(--rlx-text)}
.form-input{
  min-height:46px;background:var(--rlx-surface-muted);border-color:var(--rlx-border);color:var(--rlx-ink);
  border-radius:10px;
}
.form-input:focus{border-color:var(--rlx-red);box-shadow:0 0 0 3px var(--rlx-red-focus)}
.form-input::placeholder{color:color-mix(in srgb,var(--rlx-muted) 78%,transparent)}

.tab-nav{
  gap:5px;padding:5px;margin-bottom:26px;border:1px solid var(--rlx-border);border-radius:14px;
  background:var(--rlx-surface);box-shadow:var(--shadow-sm);
}
.tab-btn{padding:10px 14px;margin:0;border:0;border-radius:9px;color:var(--rlx-muted)}
.tab-btn:hover{color:var(--rlx-ink);background:var(--rlx-surface-muted)}
.tab-btn.active{color:#fff;background:#d60000;border:0;box-shadow:0 8px 20px -14px rgba(214,0,0,.9)}

.page-title{color:var(--rlx-ink);font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.03em}
.section-title{color:var(--rlx-ink);border-bottom-color:var(--rlx-border)}
.stat-value,.list-item-title,.empty-state-title{color:var(--rlx-ink)}
.list-item{border-bottom-color:var(--rlx-border-light);border-radius:10px;transition:.15s ease}
.list-item:hover{background:var(--rlx-surface-muted)}
.table th{border-bottom-color:var(--rlx-border);color:var(--rlx-muted)}
.table td,.detail-table td{border-bottom-color:var(--rlx-border-light);color:var(--rlx-text)}
.table tr:hover td{background:var(--rlx-surface-muted)}
.modal-backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(4px)}
.modal{background:var(--rlx-surface);border:1px solid var(--rlx-border);box-shadow:var(--shadow-xl)}
.modal-header,.modal-footer{border-color:var(--rlx-border)}
.modal-title{color:var(--rlx-ink)}
.modal-close{color:var(--rlx-muted)}
.skeleton{background:linear-gradient(90deg,var(--rlx-surface-muted) 25%,color-mix(in srgb,var(--rlx-border) 80%,transparent) 50%,var(--rlx-surface-muted) 75%);background-size:300% 100%}
.balance-card{background:linear-gradient(145deg,var(--rlx-surface),var(--rlx-surface-muted));border-color:var(--rlx-border)}
.balance-card__value{color:var(--rlx-ink)}
.icon-chip{border:1px solid var(--rlx-border)}
.ticket-body,.ticket-reply{background:var(--rlx-surface-muted)}

@media(max-width:640px){
  .auth-theme-toggle{top:8px;right:10px}
  .navbar{padding:0 9px}
  .navbar-inner{min-height:58px}
  .nav-brand .portal-label{display:none}
  .logo-img--nav{height:30px;max-height:30px}
  .nav-right{gap:5px}
  .portal-theme-toggle{width:36px;height:36px}
  .auth-wrap{margin:48px auto 28px}
  .auth-wrap .card{padding:30px 24px}
  .container{padding:22px 12px 42px}
  .tab-nav{border-radius:12px}
}