/* ============================================================
   STILURI COMUNE  —  tema dark, mobile-first, brand-driven
   Culoarea --brand vine de la fiecare salon (setata din JS).
   ============================================================ */

:root{
  --brand:#E8A33D;
  --bg:#0e0b08;
  --surface:rgba(22,17,12,0.55);
  --text:#F2EEE7;
  --muted:#b9b2a6;
  --line:rgba(255,255,255,0.12);
  --ok:#34d399;
  --err:#fb7185;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{
  margin:0;padding:0;color:var(--text);min-height:100%;
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,sans-serif;
  background:var(--bg);
}

/* fundal animat, cald, in culoarea brandului (--brand) — ca la declaratii.
   Stratul de baza "deriva" lin, iar "luminile" din ::before plutesc. */
.bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:linear-gradient(125deg,
    color-mix(in srgb, var(--brand) 24%, #0e0b08),
    #0b0806,
    color-mix(in srgb, var(--brand) 32%, #0e0b08),
    #0a0705,
    color-mix(in srgb, var(--brand) 20%, #0e0b08));
  background-size:280% 280%;
  animation:bgDrift 18s ease-in-out infinite, bgHue 26s ease-in-out infinite;
}
.bg::before{
  content:"";position:absolute;inset:-25%;pointer-events:none;
  background:
    radial-gradient(46% 40% at 18% 20%, color-mix(in srgb, var(--brand) 40%, transparent), transparent 62%),
    radial-gradient(50% 46% at 84% 80%, color-mix(in srgb, var(--brand) 32%, transparent), transparent 62%),
    radial-gradient(40% 36% at 72% 14%, color-mix(in srgb, var(--brand) 26%, transparent), transparent 60%);
  animation:bgFloat 24s ease-in-out infinite;
}
@keyframes bgDrift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes bgFloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-4%,3%) scale(1.07)}}
@keyframes bgHue{0%,100%{filter:hue-rotate(-6deg) saturate(1.05)}50%{filter:hue-rotate(8deg) saturate(1.18)}}

.wrap{
  max-width:540px;margin:0 auto;min-height:100vh;
  display:flex;flex-direction:column;position:relative;z-index:1;
}

.glass{
  background:var(--surface);border:1px solid var(--line);
  box-shadow:0 12px 38px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.10);
  backdrop-filter:blur(6px);
}

.card{border-radius:18px;padding:20px;}
.lead{font-size:14px;color:var(--muted);margin:0 0 16px;}

.field{margin-bottom:14px;}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px;letter-spacing:.4px;}
.field input,.field textarea,.field select{
  width:100%;padding:14px 13px;border-radius:12px;border:1px solid var(--line);
  background:rgba(0,0,0,0.30);color:var(--text);font-size:16px;outline:none;transition:.15s;
}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}

.btn{
  width:100%;padding:16px;border-radius:14px;border:0;font-size:16px;font-weight:700;cursor:pointer;
  color:#1a120a;text-align:center;text-decoration:none;display:block;
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--brand) 78%, #fff 22%),
    color-mix(in srgb, var(--brand) 72%, #000 18%));
  box-shadow:0 8px 22px color-mix(in srgb, var(--brand) 35%, transparent);
  transition:transform .08s,opacity .2s;
}
.btn:active{transform:scale(.98);}
.btn:disabled{opacity:.45;box-shadow:none;}

/* antet cu logo */
header{padding:28px 20px 8px;text-align:center;}
.logo{
  width:72px;height:72px;border-radius:50%;object-fit:cover;margin:0 auto 12px;display:block;
  border:2px solid color-mix(in srgb, var(--brand) 55%, transparent);
  box-shadow:0 6px 20px rgba(0,0,0,.45);
}
.logo-fallback{
  width:72px;height:72px;border-radius:50%;margin:0 auto 12px;
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:28px;color:#1a120a;
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--brand) 70%, #fff 30%),
    color-mix(in srgb, var(--brand) 65%, #000 25%));
}
header .brand{
  font-weight:800;letter-spacing:3px;font-size:13px;text-transform:uppercase;
  color:var(--brand);
}
header .sub{font-size:11px;color:var(--muted);letter-spacing:1.5px;margin-top:4px;}
header h1{font-size:20px;margin:14px 0 0;font-weight:700;}

.hidden{display:none!important;}
.muted{color:var(--muted);}
.err{color:var(--err);font-size:13px;text-align:center;padding:8px;}

/* mesaj de stare pe ecran intreg (ex: lipseste studio / Firebase neconectat) */
.notice{
  max-width:520px;margin:14vh auto;padding:0 22px;text-align:center;position:relative;z-index:1;
}
.notice .ico{font-size:46px;margin-bottom:12px;}
.notice h2{font-size:20px;margin:0 0 8px;}