/* ============================================================
   pages.css — consolidated per-page styles, loaded once at login
   and cached across all SPA navigations. Partials no longer ship
   inline <style> blocks; their classes live here.
   ============================================================ */

/* ---------- Shared "Coming soon" stub (cimp, clan, bonus, mall,
   mina, misiuni, atelier, evropa, afaceri, banca, auto, casino) ---------- */
.coming{
  margin:80px 14px 0; padding:28px 22px; border-radius:18px;
  background:linear-gradient(180deg, #1a1e24, #13161a);
  border:1px solid var(--line); text-align:center;
}
.coming .ic{
  width:54px; height:54px; margin:0 auto 14px;
  background:#1f2530; border:1px solid var(--line-2); border-radius:14px;
  display:grid; place-items:center; color:#9ed7ef;
}
.coming h1{
  margin:0 0 8px; font-family:'Cinzel',serif; font-size:18px;
  letter-spacing:.18em; text-transform:uppercase;
  background:linear-gradient(180deg,#fff,#9ed7ef);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.coming p{ margin:0; color:var(--text-dim); font-size:13px; line-height:1.5 }
.coming small{ display:block; margin-top:12px; color:var(--text-mute); font-size:11px; letter-spacing:.06em }
.back-link{
  display:inline-flex;align-items:center;gap:6px;padding:14px;
  color:var(--text-dim);font-size:13px;text-decoration:none;
}
.back-link:hover{color:var(--text)}

/* ---------- /profil/ ---------- */
.profile-hero{
  display:flex;gap:14px;align-items:flex-start;
  margin:6px 14px 0;border:1px solid var(--line);
  background:linear-gradient(180deg,#1a1e24,#13161a);
  border-radius:18px;padding:16px;position:relative;overflow:hidden;
}
.profile-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(300px 200px at 70% -20%, rgba(227,179,65,.08), transparent 60%);
}
.av-frame{
  width:96px;height:120px;border-radius:14px;flex:0 0 96px;
  background:linear-gradient(180deg,#23282f,#15181c);
  border:1px solid var(--line-2);position:relative;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 6px 14px rgba(0,0,0,.4);
  cursor:pointer;
}
.av-frame img{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:108%;height:auto;
}
.av-frame .lvl-badge{
  position:absolute;left:6px;top:6px;
  background:linear-gradient(180deg,#e3b341,#a98028);
  color:#1c1303;font-weight:800;font-size:10px;padding:2px 7px;border-radius:6px;
  font-family:'JetBrains Mono',monospace;
  box-shadow:0 2px 6px rgba(0,0,0,.4);
}
.av-frame .premium{
  position:absolute;right:6px;top:6px;
  background:rgba(0,0,0,.55);color:#ffd76b;
  font-size:10px;padding:2px 6px;border-radius:6px;
  font-family:'JetBrains Mono',monospace;
}
.av-frame .edit-hint{
  position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.55);
  color:#fff;font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;
  padding:4px 0;text-align:center;font-weight:600;
}
.hero-info{flex:1;min-width:0;position:relative;z-index:1}
.pname{
  font-family:'Cinzel',serif;font-size:18px;font-weight:700;
  color:#fff;letter-spacing:.04em;margin:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.psub{
  font-size:11px;color:var(--text-dim);margin-top:4px;letter-spacing:.04em;
  font-family:'JetBrains Mono',monospace;
}
.pwl{display:flex;gap:14px;margin-top:6px;font-size:11px;color:var(--text-mute)}
.pwl span{color:var(--text);font-weight:600}

.motto-row{
  margin:10px 14px 0;padding:12px 14px;border-radius:12px;
  background:rgba(255,255,255,.02);border:1px dashed var(--line-2);
  font-size:13px;color:var(--text-dim);
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  cursor:pointer;
}
.motto-row .ic{flex:0 0 auto;color:var(--text-mute)}
.motto-row .txt{flex:1;font-style:italic}
.motto-row.empty .txt{color:var(--text-mute);font-style:normal}

.section{margin:18px 14px 0}
.section-head{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:10px;padding:0 2px;
}
.section-head h2{
  margin:0;font-family:'Cinzel',serif;font-size:13px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--silver-1);
}
.section-head .meta{font-size:11px;color:var(--text-mute);font-family:'JetBrains Mono',monospace}

.abilities{display:grid;gap:10px}
.ab-row{display:grid;grid-template-columns:74px 1fr 46px;align-items:center;gap:10px}
.ab-label{font-size:11.5px;color:var(--text);font-weight:500}
.ab-val{text-align:right;font-family:'JetBrains Mono',monospace;font-size:13px;color:#fff;font-weight:700}
.ab-row .bar.viata > i{background:linear-gradient(180deg,#3aa55c,#1f6b3a)}
.ab-row .bar.putere > i{background:linear-gradient(180deg,#d23a3a,#7e1c1c)}
.ab-row .bar.rapid > i{background:linear-gradient(180deg,#4aa8d8,#2f7da5)}
.ab-row .bar.intelect > i{background:linear-gradient(180deg,#a974d8,#6a3fa3)}
.ab-row .bar.carisma > i{background:linear-gradient(180deg,#e3b341,#a98028)}

.logout-row{margin:24px 14px 0}
.logout-btn{
  width:100%;background:linear-gradient(180deg,#3a414a,#23272d);
  border:1px solid #4a525d;color:#e9ecf1;
  border-radius:10px;padding:12px;font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
}

/* Profile edit modal (motto + avatar picker) — kept page-local but
   shares the styled tokens. */
.modal-back{
  position:fixed;left:0;right:0;top:0;bottom:0;z-index:50;
  background:rgba(0,0,0,.62);display:none;align-items:center;justify-content:center;
  padding:18px;backdrop-filter:blur(4px);
}
.modal-back.open{display:flex}
.modal{
  width:100%;max-width:400px;max-height:90vh;overflow:auto;
  background:linear-gradient(180deg,#1a1e24,#13161a);
  border:1px solid var(--line);border-radius:18px;
  padding:18px;box-shadow:0 20px 50px rgba(0,0,0,.65);
}
.modal h3{
  margin:0 0 12px;font-family:'Cinzel',serif;font-size:14px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--silver-1);text-align:center;
}
.modal .row{margin-bottom:12px}
.modal label{
  display:block;font-size:11px;color:var(--text-mute);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px;font-weight:600;
}
.modal input, .modal textarea{
  width:100%;background:#0e1115;border:1px solid var(--line-2);
  border-radius:10px;padding:11px 12px;color:var(--text);font-size:14px;
  font-family:inherit;resize:vertical;min-height:44px;
}
.modal input:focus, .modal textarea:focus{
  outline:none;border-color:#4aa8d8;box-shadow:0 0 0 3px rgba(74,168,216,.18);
}
.av-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.av-pick{
  position:relative;border:2px solid var(--line-2);border-radius:10px;
  background:linear-gradient(180deg,#23282f,#15181c);
  aspect-ratio:138/201;overflow:hidden;cursor:pointer;
  transition:transform .15s, border-color .15s, box-shadow .15s;
}
.av-pick img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.av-pick.selected{
  border-color:#4aa8d8;
  box-shadow:0 0 0 3px rgba(74,168,216,.25);
  background:linear-gradient(180deg,#102230,#0c1518);
}
.av-pick:active{transform:scale(.93)}
.modal-actions{display:flex;gap:8px;margin-top:14px}
.modal-btn{
  flex:1;padding:12px;border-radius:10px;border:none;
  font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;cursor:pointer;
}
.modal-btn.cancel{background:#23272d;color:var(--text-dim);border:1px solid var(--line-2)}
.modal-btn.save{
  background:linear-gradient(180deg,#3da3d4,#22709a);color:#fff;
  border:1px solid #1a587a;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 4px 10px rgba(74,168,216,.25);
}
.profil-placeholder{
  margin: 24px 14px; padding: 22px; border-radius: 18px;
  background: linear-gradient(180deg, #1a1e24, #14171b);
  border: 1px solid var(--line); text-align: center;
}
.profil-placeholder h1{
  font-family:'Cinzel',serif; font-size:22px;
  letter-spacing:.14em; text-transform:uppercase; margin:0 0 6px;
  background: linear-gradient(180deg, #fff, #e3b341);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.profil-placeholder p{ color:var(--text-dim); font-size:13px; line-height:1.5; margin:0 0 16px }
.profil-meta{ margin:18px 0; font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text-mute) }
.profil-meta span{ display:block; margin:4px 0 }
.profil-meta b{ color:var(--text) }
.profil-avatar{
  width:96px; height:140px; margin:0 auto 10px;
  background:linear-gradient(180deg,#23282f,#15181c);
  border:1px solid #353b44; border-radius:14px;
  display:grid; place-items:center; overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 4px 10px rgba(0,0,0,.3);
}
.profil-avatar img{ width:90%; height:auto; display:block; filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)) }

/* ---------- /centru/ ---------- */
.centru-head{margin:6px 14px 12px;text-align:center}
.centru-head h1{
  margin:0;font-family:'Cinzel',serif;font-size:18px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--silver-1);
}
.centru-head p{
  margin:6px 0 0;color:var(--text-mute);font-size:11px;
  letter-spacing:.04em;font-family:'JetBrains Mono',monospace;
}
.dest-grid{
  margin:0 14px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px;
}
.dest{
  position:relative;border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(180deg,#1a1e24,#13161a);
  padding:14px 12px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;
  text-decoration:none;color:inherit;cursor:pointer;overflow:hidden;
  transition:transform .15s ease-out, border-color .15s ease-out, box-shadow .15s ease-out;
}
.dest::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120px 80px at 50% 10%, rgba(255,255,255,.03), transparent 70%);
}
.dest:active{transform:scale(.96)}
.dest .ic{
  width:64px;height:64px;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 35%, rgba(74,168,216,.15), transparent 70%);
  border-radius:14px;
}
.dest .ic img{
  max-width:60px;max-height:60px;object-fit:contain;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.45));
}
.dest .nm{
  font-family:'Cinzel',serif;font-size:12.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:#fff;text-align:center;
}
.dest .meta{
  font-size:10px;color:var(--text-mute);font-family:'JetBrains Mono',monospace;
  letter-spacing:.04em;text-align:center;
}
.dest .live-badge{
  position:absolute;top:8px;left:8px;
  background:rgba(74,168,216,.18);border:1px solid rgba(74,168,216,.45);
  color:#9ed7ef;font-family:'JetBrains Mono',monospace;font-size:10.5px;
  padding:3px 7px;border-radius:99px;font-weight:700;letter-spacing:.04em;
  display:none;z-index:1;
}
.dest .live-badge.ready{background:rgba(58,165,92,.2);border-color:rgba(58,165,92,.5);color:#7bd49a}
.dest .meta.busy{color:#9ed7ef}
.dest.locked{cursor:not-allowed;border-color:rgba(255,255,255,.04)}
.dest.locked .ic img{filter:grayscale(1) brightness(.5)}
.dest.locked .nm{color:var(--text-mute)}
.dest.locked::after{
  content:"";position:absolute;inset:0;background:rgba(8,10,13,.55);
  border-radius:14px;pointer-events:none;
}
.dest .lock-badge{
  position:absolute;top:8px;right:8px;
  background:linear-gradient(180deg,#3a414a,#23272d);
  border:1px solid #4a525d;color:#fff;
  padding:3px 8px;border-radius:99px;font-size:10px;font-weight:700;
  font-family:'JetBrains Mono',monospace;
  z-index:1;letter-spacing:.04em;
  display:none;align-items:center;gap:4px;
}
.dest.locked .lock-badge{display:flex}
.dest .lock-badge svg{width:10px;height:10px}

/* ---------- /lucru/ ---------- */
.lucru-wrap{margin:0 14px}
.lucru-back{
  display:inline-flex;align-items:center;gap:6px;padding:6px 0 10px;
  color:var(--text-dim);font-size:13px;text-decoration:none;
}
.lucru-back:hover{color:var(--text)}

/* Career-ladder swiper (Swiper.js). Wrapper extends to screen edges via
   negative margins; nav arrows float over the side cards. The 18 px
   padding-top gives the floating "Profesia ta" ribbon room to sit above
   each card without being clipped by Swiper's overflow:hidden. */
.career-swiper-wrap{
  position:relative;margin:0 -14px;padding:18px 0 12px;
}
.lucru-swiper{overflow:visible}                  /* let the ribbon escape above */
.lucru-swiper .swiper-wrapper{align-items:stretch}
.lucru-swiper .swiper-slide{width:200px;height:auto;overflow:visible}
.career-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:32px;height:32px;border-radius:50%;
  border:1px solid var(--line-2);
  background:rgba(15,18,24,.85);backdrop-filter:blur(4px);
  color:var(--text);cursor:pointer;
  display:grid;place-items:center;
  box-shadow:0 4px 10px rgba(0,0,0,.4);
  transition:opacity .15s ease, transform .12s ease;
}
.career-nav:hover{color:#fff;background:rgba(20,26,34,.95)}
.career-nav:active{transform:translateY(-50%) scale(.93)}
.career-nav.prev{left:6px}
.career-nav.next{right:6px}
/* Swiper sets aria-disabled when there's no further slide; dim & block clicks. */
.career-nav[aria-disabled="true"]{opacity:.35;pointer-events:none}
/* Hide arrows on coarse pointers (phones) — touch users swipe instead. */
@media (pointer:coarse){.career-nav{display:none}}
.job-card{
  position:relative;
  border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(180deg,#1a1e24,#13161a);
  padding:14px 12px 12px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.job-card .job-ic{
  width:74px;height:74px;background:#0f1218;border:1px solid var(--line-2);
  border-radius:50%;display:grid;place-items:center;
}
.job-card .job-ic img{max-width:64px;max-height:64px;object-fit:contain}
.job-card .job-nm{
  margin-top:2px;font-family:'Cinzel',serif;font-size:14px;
  letter-spacing:.12em;text-transform:uppercase;color:#fff;
}
.job-card .job-rate{
  font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--green);font-weight:600;
}
.job-card .job-rate img{width:12px;height:12px;vertical-align:-2px;margin:0 1px}
.job-card .job-iq{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;
  color:var(--text-mute);letter-spacing:.04em;
}
/* Active profession — green border + glow + ribbon tag. */
.job-card.current{
  border-color:#3aa55c;
  box-shadow:0 0 0 1px rgba(58,165,92,.35), 0 8px 20px rgba(58,165,92,.18);
  background:linear-gradient(180deg,#1c2620,#10161a);
}
.job-card.current::after{
  content:"";position:absolute;inset:0;border-radius:16px;pointer-events:none;
  background:radial-gradient(180px 90px at 50% 12%, rgba(58,165,92,.16), transparent 70%);
}
.job-card .now-tag{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  white-space:nowrap;                              /* keep "Profesia ta" on one line */
  font-family:'Cinzel',serif;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  background:linear-gradient(180deg,#3aa55c,#1f6b3a);color:#fff;
  padding:4px 14px;border-radius:99px;border:1px solid #16542b;
  box-shadow:0 3px 8px rgba(0,0,0,.5);
  z-index:2;
}
/* Locked profession — dim + lock badge top-left. */
.job-card.locked{opacity:.55;filter:grayscale(.4)}
.job-card.locked .job-rate{color:var(--text-mute)}
.job-card .lock{
  position:absolute;top:8px;left:8px;
  width:22px;height:22px;border-radius:50%;
  background:rgba(0,0,0,.55);border:1px solid var(--line-2);
  display:grid;place-items:center;color:#e3b341;
}
.job-card .lock svg{width:11px;height:11px}
.lucru-panel{
  margin-top:14px;border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(180deg,#171a1f,#12141a);padding:16px;
}
.lucru-panel h2{
  margin:0 0 12px;font-family:'Cinzel',serif;font-size:13px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--silver-1);text-align:center;
}
.slider-row{display:flex;flex-direction:column;gap:14px;margin:6px 0 4px}
.slider-readout{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--text-mute);
  letter-spacing:.04em;
}
.slider-readout .v{
  font-family:'Cinzel',serif;font-size:22px;font-weight:700;color:#fff;letter-spacing:.06em;
}
.slider-readout .v small{font-family:'Inter',sans-serif;font-size:11px;color:var(--text-mute);font-weight:500;margin-left:2px}
.slider-readout .p{
  font-family:'JetBrains Mono',monospace;font-size:13px;color:#7bd49a;font-weight:700;
}
.slider-readout .p img{width:13px;height:13px;vertical-align:-3px;margin-left:3px}
.slider-readout .xp{font-size:11px;color:#b88a4a;margin-left:8px;font-weight:600}
.slider-readout .xp img{width:11px;height:11px;vertical-align:-2px;margin-left:1px}
.hour-slider{
  -webkit-appearance:none;appearance:none;
  width:100%;height:8px;border-radius:99px;outline:none;background:transparent;
  margin:6px 0 0;
}
.hour-slider::-webkit-slider-runnable-track{
  height:8px;border-radius:99px;background:var(--track,
    linear-gradient(90deg,#3aa55c 0%,#3aa55c var(--fill,12.5%),#1f242b var(--fill,12.5%),#1f242b 100%));
  border:1px solid #1f242b;
}
.hour-slider::-moz-range-track{
  height:8px;border-radius:99px;background:#1f242b;border:1px solid #1f242b;
}
.hour-slider::-moz-range-progress{
  height:8px;border-radius:99px;
  background:linear-gradient(90deg,#3aa55c,#1f6b3a);
}
.hour-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:26px;height:26px;border-radius:99px;cursor:pointer;
  background:radial-gradient(circle at 35% 30%,#fff,#7bd49a 60%,#1f6b3a);
  border:2px solid #0e1115;
  box-shadow:0 4px 12px rgba(0,0,0,.5), 0 0 0 4px rgba(58,165,92,.12);
  margin-top:-10px;
  transition:transform .1s ease-out;
}
.hour-slider::-moz-range-thumb{
  width:26px;height:26px;border-radius:99px;cursor:pointer;
  background:radial-gradient(circle at 35% 30%,#fff,#7bd49a 60%,#1f6b3a);
  border:2px solid #0e1115;
  box-shadow:0 4px 12px rgba(0,0,0,.5), 0 0 0 4px rgba(58,165,92,.12);
}
.hour-slider:active::-webkit-slider-thumb{transform:scale(1.1)}
.hour-slider:active::-moz-range-thumb{transform:scale(1.1)}
.slider-ticks{
  display:flex;justify-content:space-between;
  margin:6px 4px 0;font-family:'JetBrains Mono',monospace;
  font-size:10px;color:var(--text-mute);letter-spacing:.04em;
}
.start-btn{
  margin-top:14px;width:100%;
  background:linear-gradient(180deg,#3aa55c,#1f6b3a);border:1px solid #16542b;
  color:#fff;font-weight:800;border-radius:12px;padding:14px;font-size:14px;
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 6px 14px rgba(58,165,92,.25);
}
.countdown-card{text-align:center}
.countdown-card .label{
  font-size:11px;color:var(--text-mute);text-transform:uppercase;
  letter-spacing:.12em;font-weight:600;
}
.countdown-card .timer{
  margin:8px 0 6px;font-family:'JetBrains Mono',monospace;
  font-size:32px;font-weight:700;color:#fff;letter-spacing:.04em;
}
.countdown-card .timer.ready{color:#7bd49a}
.countdown-card .progress{
  height:6px;background:#0e1115;border-radius:99px;overflow:hidden;
  border:1px solid #1f242b;position:relative;margin:10px 0 12px;
}
.countdown-card .progress > i{
  position:absolute;left:0;top:0;bottom:0;border-radius:99px;
  background:linear-gradient(180deg,#4aa8d8,#2f7da5);transition:width 1s linear;
}
.countdown-card .progress.ready > i{background:linear-gradient(180deg,#3aa55c,#1f6b3a)}
.countdown-card .pay{
  font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--gold);
}
.countdown-card .pay b{color:#fff;font-size:16px;font-weight:800;margin-right:2px}
.countdown-card .pay img{width:14px;height:14px;vertical-align:-3px}
.collect-btn{
  margin-top:14px;width:100%;
  background:linear-gradient(180deg,#e3b341,#a98028);border:1px solid #6e511a;
  color:#1c1303;font-weight:800;border-radius:12px;padding:14px;font-size:14px;
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 6px 14px rgba(227,179,65,.25);
}
.collect-btn[disabled]{opacity:.55;cursor:not-allowed;filter:grayscale(.4)}
.cancel-btn{
  margin-top:10px;width:100%;
  background:linear-gradient(180deg,#8d2424,#5f1414);border:1px solid #4a0e0e;
  color:#fff;font-weight:700;border-radius:12px;padding:11px;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 4px 10px rgba(210,58,58,.18);
}
.cancel-btn:active{transform:scale(.97)}
.cancel-btn[disabled]{opacity:.55;cursor:not-allowed}
.xp-line{
  margin-top:6px;font-family:'JetBrains Mono',monospace;font-size:11px;
  color:#b88a4a;
}
.xp-line img{width:11px;height:11px;vertical-align:-2px;margin-left:1px}