:root{
    --bg:#1e1e1e; --bg-2:#191919; --panel:#242424; --panel-2:#2a2a2a; --panel-3:#2f2f2f;
    --line:#343434; --line-2:#3d3d3d;
    --pink:#ff007f; --pink-2:#ff4da6; --pink-soft:rgba(255,0,127,.12); --pink-line:rgba(255,0,127,.42);
    --txt:#c9ccd2; --muted:#8b8f97; --muted-2:#6c7078;
    --good:#2ecc8f; --warn:#f2b45a;
    --r:14px; --r-s:10px; --maxw:1180px;
    --shadow:0 26px 64px -30px rgba(0,0,0,.9);
    --pink-glow:0 8px 26px -8px rgba(255,0,127,.6);
    --fd:'Rajdhani',sans-serif; --fb:'Inter',sans-serif;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0; background:var(--bg); color:var(--txt); font-family:var(--fb); font-size:16px; line-height:1.55;
    -webkit-font-smoothing:antialiased;
    background-image:
      radial-gradient(760px 460px at 84% -6%, rgba(255,0,127,.10), transparent 62%),
      radial-gradient(620px 420px at 2% 8%, rgba(255,0,127,.05), transparent 58%);
    background-attachment:fixed;}
  a{color:inherit; text-decoration:none}
  button{font-family:inherit; cursor:pointer}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
  h1,h2,h3,h4{font-family:var(--fd); font-weight:700; margin:0; line-height:1.02; letter-spacing:.005em}
  :focus-visible{outline:2px solid var(--pink); outline-offset:3px; border-radius:6px}

  .silver{background:linear-gradient(180deg,#fbfbfc 0%,#d3d6dc 19%,#8d9199 50%,#e6e8ec 61%,#b3b7be 83%,#eceef1 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;}
  .pink{color:var(--pink); text-shadow:0 0 20px rgba(255,0,127,.42)}
  .eyebrow{font-family:var(--fd); font-weight:600; font-size:14px; letter-spacing:.22em; text-transform:uppercase; color:var(--pink)}
  .eyebrow::before{content:""; display:inline-block; width:26px; height:1px; background:var(--pink); vertical-align:middle; margin-right:10px; box-shadow:0 0 8px var(--pink)}
  .muted{color:var(--muted)}

  .btn{display:inline-flex; align-items:center; gap:9px; border:1px solid var(--line-2); background:var(--panel-2);
    color:#e6e8ec; padding:12px 18px; border-radius:var(--r-s); font-weight:600; font-size:14.5px; transition:.16s; white-space:nowrap}
  .btn:hover{border-color:var(--pink-line); transform:translateY(-1px)}
  .btn-pink{background:var(--pink); color:#fff; border:none; box-shadow:var(--pink-glow); font-weight:600}
  .btn-pink:hover{filter:brightness(1.08); transform:translateY(-1px)}
  .btn-ghost{background:transparent}
  .btn-sm{padding:9px 14px; font-size:13.5px}
  .btn-xs{padding:6px 11px; font-size:12.5px; border-radius:8px}
  .btn[disabled]{opacity:.45; cursor:not-allowed; transform:none !important}
  .btn-danger{background:transparent; border-color:#5a3038; color:#ff8fa8}
  .btn-danger:hover{border-color:#ff5580}

  header.nav{position:sticky; top:0; z-index:50; backdrop-filter:blur(14px); background:rgba(30,30,30,.78);
    border-bottom:1px solid var(--line)}
  header.nav::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
    background:linear-gradient(90deg,transparent,var(--pink-line),transparent)}
  .nav-in{display:flex; align-items:center; gap:18px; height:66px; max-width:1180px; margin:0 auto; padding:0 22px}
  .brand{display:flex; align-items:center; gap:11px; cursor:pointer}
  .logo-img{display:block; flex:none; height:42px; width:auto; max-width:100%}
  .nav-logo{height:46px; width:auto}
  .footer-logo{height:42px; width:auto}
  .login-logo{width:210px; height:auto; margin:0 auto}
  .brand .wm{font-family:var(--fd); font-weight:700; font-size:22px; letter-spacing:.02em}
  .nav-links{display:flex; gap:4px; margin-left:auto}
  .nav-links a{padding:9px 13px; border-radius:8px; font-size:14.5px; color:var(--muted); font-weight:500}
  .nav-links a:hover{color:#e6e8ec; background:rgba(255,255,255,.04)}
  .nav-cta{display:flex; gap:9px; align-items:center}
  .hamb{display:none; background:none; border:1px solid var(--line-2); color:#e6e8ec; width:42px; height:42px;
    border-radius:10px; align-items:center; justify-content:center; margin-left:auto}

  .hero{padding:66px 0 24px}
  .hero-grid{display:grid; grid-template-columns:1.06fr .94fr; gap:46px; align-items:center}
  .hero h1{font-size:clamp(40px,6vw,72px); line-height:0.98; letter-spacing:.01em}
  .hero p.lede{color:var(--muted); font-size:17.5px; max-width:40ch; margin:20px 0 28px}
  .hero-cta{display:flex; gap:12px; flex-wrap:wrap}
  .trust{display:flex; gap:30px; margin-top:32px; padding-top:24px; border-top:1px solid var(--line)}
  .trust .n{font-family:var(--fd); font-weight:700; font-size:26px}
  .trust .l{font-size:12.5px; color:var(--muted); letter-spacing:.03em; text-transform:uppercase}

  .chrome{position:relative; aspect-ratio:5/4.5; border-radius:20px; overflow:hidden; border:1px solid #3a3a3a;
    box-shadow:var(--shadow);
    background:radial-gradient(130% 100% at 24% 6%, #333 0%, #1c1c1c 46%, #101010 100%)}
  .chrome::after{content:""; position:absolute; inset:0; border-radius:20px; pointer-events:none;
    box-shadow:inset 0 -60px 90px -50px rgba(255,0,127,.5)}
  .chrome .sheen{position:absolute; inset:0; background:radial-gradient(58% 36% at 30% 14%, rgba(255,255,255,.14), transparent 60%)}
  .chrome .streak{position:absolute; top:-30%; left:-40%; width:52%; height:170%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.10) 42%, rgba(255,0,127,.42) 52%, rgba(255,120,190,.14) 60%, transparent);
    transform:rotate(18deg); filter:blur(1.5px); animation:sweep 6.5s ease-in-out infinite}
  @keyframes sweep{0%{left:-45%}55%{left:120%}100%{left:120%}}
  .hairline{position:absolute; background:var(--pink); box-shadow:0 0 10px var(--pink); opacity:.6}
  .floatcard{position:absolute; left:22px; right:22px; bottom:20px; background:rgba(20,20,20,.82); backdrop-filter:blur(8px);
    border:1px solid #3d3d3d; border-radius:13px; padding:14px 16px; display:flex; align-items:center; gap:13px; box-shadow:0 16px 34px -18px #000}
  .floatcard .av{width:46px; height:46px; border-radius:10px; flex:none; display:grid; place-items:center; background:#000; border:1px solid var(--pink-line)}
  .floatcard .av svg{stroke:var(--pink)}
  .floatcard .nm{font-family:var(--fd); font-weight:700; font-size:17px}
  .floatcard .meta{font-size:12px; color:var(--muted)}
  .floatcard .cat{font-size:11px; color:var(--pink); font-weight:600; letter-spacing:.02em}

  section{padding:48px 0}
  .sec-head{display:flex; flex-direction:column; gap:12px; margin-bottom:30px}
  .sec-head h2{font-size:clamp(28px,3.6vw,42px)}
  .sec-head p{color:var(--muted); max-width:62ch; margin:0}

  .cats{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
  .cat-card{position:relative; background:linear-gradient(180deg,var(--panel),var(--bg-2)); border:1px solid var(--line);
    border-radius:var(--r); padding:24px 22px; text-align:left; transition:.18s; overflow:hidden}
  .cat-card::before{content:""; position:absolute; left:0; top:0; width:100%; height:2px;
    background:linear-gradient(90deg,var(--pink),transparent); opacity:0; transition:.2s}
  .cat-card:hover{transform:translateY(-3px); border-color:var(--pink-line)}
  .cat-card:hover::before{opacity:1}
  .cat-ic{width:52px; height:52px; border-radius:12px; border:1px solid var(--pink-line); background:#000;
    display:grid; place-items:center; margin-bottom:16px}
  .cat-ic svg{stroke:var(--pink); width:26px; height:26px; fill:none; stroke-width:1.7}
  .cat-card h3{font-size:20px; margin-bottom:7px}
  .cat-card p{color:var(--muted); font-size:13.5px; margin:0}
  .cat-card .go{margin-top:14px; font-size:12.5px; font-weight:600; color:var(--pink); letter-spacing:.03em; display:flex; align-items:center; gap:6px}

  .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
  .step{padding:22px 24px; border-right:1px solid var(--line)}
  .step:last-child{border-right:none}
  .step .num{font-family:var(--fd); font-weight:700; font-size:15px; color:var(--pink); letter-spacing:.1em}
  .step h3{font-size:18px; margin:10px 0 6px}
  .step p{color:var(--muted); font-size:13.5px; margin:0}

  .toolbar{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:16px}
  .search{flex:1; min-width:240px; display:flex; align-items:center; gap:10px; background:var(--panel-2);
    border:1px solid var(--line-2); border-radius:11px; padding:12px 15px}
  .search input{flex:1; background:none; border:none; color:#e6e8ec; font-size:15px; outline:none}
  .search input::placeholder{color:var(--muted-2)}
  .chips{display:flex; gap:8px; flex-wrap:wrap}
  .chip{padding:8px 14px; border-radius:999px; border:1px solid var(--line-2); background:transparent; color:var(--muted);
    font-size:13.5px; font-weight:500; transition:.15s}
  .chip:hover{color:#e6e8ec}
  .chip.on{background:var(--pink); border-color:var(--pink); color:#fff; box-shadow:0 6px 18px -8px rgba(255,0,127,.7)}
  .subchips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px}
  .subchips .chip.on{background:var(--pink-soft); border-color:var(--pink-line); color:var(--pink-2)}

  .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
  .card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:.18s;
    display:flex; flex-direction:column}
  .card:hover{transform:translateY(-3px); border-color:var(--pink-line); box-shadow:var(--shadow)}
  .cover{aspect-ratio:16/10; position:relative; overflow:hidden;
    background:radial-gradient(120% 100% at 30% 12%, #333, #171717 60%, #0f0f0f)}
  .cover .car{position:absolute; inset:0; display:grid; place-items:center; color:var(--pink); opacity:.5}
  .cover .car svg{width:80%; height:auto; filter:drop-shadow(0 0 7px rgba(255,0,127,.35))}
  .cover .init{position:absolute; left:16px; top:14px; font-family:var(--fd); font-weight:700; font-size:34px}
  .cover .catbadge{position:absolute; left:16px; bottom:14px; font-size:11px; font-weight:600; color:var(--pink);
    letter-spacing:.02em; background:rgba(0,0,0,.55); border:1px solid var(--pink-line); padding:4px 10px; border-radius:999px}
  .cover img{width:100%; height:100%; object-fit:cover; display:block}
  .card-b{padding:15px 17px 17px; display:flex; flex-direction:column; gap:9px; flex:1}
  .card-b .top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px}
  .card-b h3{font-size:19px}
  .city{font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:5px; margin-top:3px}
  .rate{font-size:13px; font-family:var(--fd); font-weight:600; white-space:nowrap}
  .rate .st{color:var(--pink)}
  .price{font-family:var(--fd); font-weight:600; font-size:15px}
  .row{display:flex; justify-content:space-between; align-items:center; gap:10px}
  .card-actions{display:flex; gap:8px; margin-top:auto}
  .card-actions .btn{flex:1; justify-content:center}
  .empty{grid-column:1/-1; text-align:center; color:var(--muted); padding:50px 0}

  .back{display:inline-flex; align-items:center; gap:7px; color:var(--muted); font-size:14px; margin-bottom:18px; font-weight:500}
  .back:hover{color:#e6e8ec}
  .detail-hero{position:relative; height:180px; border-radius:16px; overflow:hidden; margin-bottom:22px; border:1px solid #3a3a3a;
    background:radial-gradient(120% 120% at 28% 10%, #333, #161616 60%, #0e0e0e)}
  .detail-hero .car{position:absolute; inset:0; display:grid; place-items:center; color:var(--pink); opacity:.5}
  .detail-hero .car svg{width:46%; height:auto; filter:drop-shadow(0 0 8px rgba(255,0,127,.35))}
  .detail-head h1{font-size:clamp(30px,4.4vw,46px)}
  .detail-meta{display:flex; gap:16px; align-items:center; color:var(--muted); margin:12px 0 4px; flex-wrap:wrap; font-size:14px}
  .detail-desc{color:#cdd0d6; max-width:66ch; margin:14px 0 20px}
  .detail-cta{display:flex; gap:12px; flex-wrap:wrap; margin:4px 0 10px; align-items:center}
  .detail-price{font-family:var(--fd); font-weight:700; font-size:20px; margin-left:4px}
  .gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:8px}
  .work{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-s); overflow:hidden}
  .work .img{aspect-ratio:4/3; position:relative; overflow:hidden;
    background:radial-gradient(120% 120% at 30% 15%, #313131, #161616 60%, #0f0f0f)}
  .work .img img,.work .img video{width:100%; height:100%; object-fit:cover; display:block}
  .work .img .car{position:absolute; inset:0; display:grid; place-items:center; color:var(--pink); opacity:.42}
  .work .img .car svg{width:74%; height:auto; filter:drop-shadow(0 0 6px rgba(255,0,127,.3))}
  .work .img .vbadge{position:absolute; left:8px; top:8px; background:rgba(0,0,0,.6); border:1px solid var(--pink-line);
    color:var(--pink-2); font-size:10.5px; font-weight:600; padding:3px 8px; border-radius:999px}
  .work .wb{padding:13px 14px}
  .work h4{font-family:var(--fd); font-size:16px; margin:0 0 5px; font-weight:600}
  .work p{font-size:13px; color:var(--muted); margin:0}

  /* slots */
  .slotgrid{display:flex; flex-wrap:wrap; gap:10px}
  .slot{border:1px solid var(--line-2); background:var(--panel-2); border-radius:10px; padding:10px 14px;
    font-size:13.5px; font-weight:600; color:#e6e8ec; display:flex; flex-direction:column; gap:2px; min-width:112px; transition:.15s}
  .slot:hover{border-color:var(--pink); transform:translateY(-1px)}
  .slot .d{font-family:var(--fd); font-size:15px}
  .slot .t{color:var(--pink); font-size:12.5px}

  .formwrap{display:grid; grid-template-columns:1fr 1fr; gap:14px}
  .field{display:flex; flex-direction:column; gap:7px}
  .field.full{grid-column:1/-1}
  label{font-size:13px; color:var(--muted); font-weight:500}
  input,select,textarea{font-family:var(--fb); background:var(--bg-2); border:1px solid var(--line-2); color:#e6e8ec;
    border-radius:10px; padding:12px 13px; font-size:15px; outline:none; transition:.15s}
  input:focus,select:focus,textarea:focus{border-color:var(--pink)}
  textarea{resize:vertical; min-height:88px}
  .panelbox{background:linear-gradient(180deg,var(--panel),var(--bg-2)); border:1px solid var(--line); border-radius:var(--r); padding:26px}
  .for-salons{display:grid; grid-template-columns:.9fr 1.1fr; gap:34px; align-items:start}
  .sel-tags{display:flex; gap:8px; flex-wrap:wrap}
  .sel-tags .chip{cursor:pointer}

  .modal-bg{position:fixed; inset:0; background:rgba(5,5,5,.74); backdrop-filter:blur(4px); display:none; place-items:center; z-index:100; padding:20px}
  .modal-bg.on{display:grid}
  .lightbox{position:fixed; inset:0; background:rgba(3,3,3,.92); backdrop-filter:blur(6px); display:none; place-items:center; z-index:200; padding:24px; cursor:zoom-out}
  .lightbox.on{display:grid}
  .lb-inner{max-width:94vw; max-height:90vh; display:grid; place-items:center}
  .lb-inner img,.lb-inner video{max-width:94vw; max-height:90vh; width:auto; height:auto; border-radius:10px; box-shadow:0 0 40px rgba(255,0,127,.25); display:block}
  .lb-x{position:fixed; top:18px; right:22px; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(0,0,0,.4); color:#fff; font-size:26px; line-height:1; cursor:pointer; z-index:201}
  .lb-x:hover{background:var(--pink); border-color:var(--pink)}
  .reviews{display:flex; flex-direction:column; gap:12px}
  .review{background:var(--card-2,#242424); border:1px solid var(--line-2,#333); border-radius:12px; padding:14px 16px}
  .rev-head{display:flex; justify-content:space-between; align-items:center; gap:10px}
  .rev-ime{font-weight:600}
  .rev-stars{color:var(--pink); letter-spacing:1px; font-size:15px}
  .rev-stars-off{color:#555}
  .rev-tekst{margin:8px 0 6px; font-size:14.5px; line-height:1.5; color:#cfcfd3}
  .rev-datum{font-size:12px}
  .star-pick{display:flex; gap:4px}
  .star-btn{background:none; border:none; font-size:30px; line-height:1; color:#555; cursor:pointer; padding:0 2px; transition:color .12s}
  .star-btn:hover, .star-btn.on{color:var(--pink)}
  .modal{background:var(--panel-2); border:1px solid var(--line-2); border-radius:16px; padding:26px; width:min(560px,100%);
    box-shadow:var(--shadow); max-height:92vh; overflow:auto}
  .modal.wide{width:min(720px,100%)}
  .modal h3{font-size:24px; margin-bottom:4px}
  .modal .sub{color:var(--muted); font-size:14px; margin-bottom:18px}
  .modal .x{float:right; background:none; border:none; color:var(--muted); font-size:24px; line-height:1; margin:-6px -6px 0 0}
  .note{display:flex; gap:11px; background:var(--pink-soft); border:1px solid var(--pink-line); border-radius:11px;
    padding:12px 14px; font-size:13px; color:#f3c4dd; margin-top:8px}
  .note svg{flex:none; margin-top:1px; stroke:var(--pink)}

  #toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:#2a0016;
    border:1px solid var(--pink); color:#ffd7ec; padding:13px 20px; border-radius:12px; font-size:14px; font-weight:500;
    opacity:0; pointer-events:none; transition:.3s; z-index:200; box-shadow:var(--shadow); max-width:88vw}
  #toast.on{opacity:1; transform:translateX(-50%) translateY(0)}

  footer{border-top:1px solid var(--line); margin-top:44px; padding:44px 0 34px; background:var(--bg-2); position:relative}
  footer::before{content:""; position:absolute; top:-1px; left:0; right:0; height:1px;
    background:linear-gradient(90deg,transparent,var(--pink-line),transparent)}
  .foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:30px}
  .foot-grid h4{font-family:var(--fd); font-size:14px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 12px}
  .foot-grid p,.foot-grid a{font-size:14px; color:#cdd0d6; margin:5px 0; display:block}
  .foot-grid a:hover{color:var(--pink)}
  .foot-bottom{border-top:1px solid var(--line); margin-top:30px; padding-top:18px; display:flex; justify-content:space-between;
    gap:14px; flex-wrap:wrap; color:var(--muted-2); font-size:13px}

  /* ---- panel & admin ---- */
  .panel-head{display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:26px; flex-wrap:wrap}
  .panel-head .who{display:flex; align-items:center; gap:12px}
  .panel-head .av{width:48px; height:48px; border-radius:12px; background:#000; border:1px solid var(--pink-line); display:grid; place-items:center; font-family:var(--fd); font-weight:700; color:var(--pink)}
  .pkg-badge{font-size:11.5px; font-weight:700; letter-spacing:.03em; padding:4px 10px; border-radius:999px; border:1px solid var(--pink-line); color:var(--pink-2); background:var(--pink-soft)}
  .tabs{display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:24px; flex-wrap:wrap}
  .tab{padding:11px 16px; font-size:14.5px; font-weight:600; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px}
  .tab.on{color:#fff; border-color:var(--pink)}
  .tab:hover{color:#e6e8ec}

  .usagebar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:20px}
  .usage-pill{background:var(--panel-2); border:1px solid var(--line-2); border-radius:10px; padding:9px 14px; font-size:13px; display:flex; gap:8px; align-items:center}
  .usage-pill b{font-family:var(--fd); color:#fff}
  .bar{width:90px; height:5px; border-radius:4px; background:var(--line-2); overflow:hidden}
  .bar i{display:block; height:100%; background:var(--pink)}

  .mgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
  .mcard{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-s); overflow:hidden; position:relative}
  .mcard .th{aspect-ratio:1; position:relative; background:radial-gradient(120% 120% at 30% 15%,#313131,#161616 60%,#0f0f0f)}
  .mcard .th img,.mcard .th video{width:100%; height:100%; object-fit:cover; display:block}
  .mcard .th .car{position:absolute; inset:0; display:grid; place-items:center; color:var(--pink); opacity:.4}
  .mcard .th .car svg{width:70%}
  .mcard .th .del{position:absolute; top:6px; right:6px; width:26px; height:26px; border-radius:8px; background:rgba(0,0,0,.6);
    border:1px solid var(--line-2); color:#fff; font-size:14px; display:grid; place-items:center; line-height:1}
  .mcard .th .del:hover{border-color:var(--pink); color:var(--pink)}
  .mcard .cap{padding:9px 10px; font-size:12.5px; color:var(--muted)}
  .mcard.locked{opacity:.5; filter:grayscale(.5)}
  .lockslot{aspect-ratio:1; border:1px dashed var(--line-2); border-radius:var(--r-s); display:grid; place-items:center; gap:6px;
    color:var(--muted-2); text-align:center; padding:10px}
  .lockslot svg{stroke:var(--muted-2)}
  .lockslot span{font-size:11.5px}

  .pkg-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:18px 0}
  .pkg-card{border:1px solid var(--line-2); background:var(--panel-2); border-radius:var(--r-s); padding:18px; display:flex; flex-direction:column; gap:8px}
  .pkg-card.cur{border-color:var(--pink); box-shadow:0 0 0 1px var(--pink) inset}
  .pkg-card h4{font-size:18px}
  .pkg-card .p{font-family:var(--fd); font-weight:700; font-size:22px; color:var(--pink)}
  .pkg-card .p small{font-size:12px; color:var(--muted); font-weight:500}
  .pkg-card ul{margin:4px 0 8px; padding-left:18px; font-size:13px; color:var(--muted)}
  .pkg-card ul li{margin:3px 0}

  table.data{width:100%; border-collapse:collapse; font-size:13.5px}
  table.data th{text-align:left; color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.04em;
    padding:10px 12px; border-bottom:1px solid var(--line)}
  table.data td{padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:middle}
  table.data tr:last-child td{border-bottom:none}
  .status-pill{font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:999px; display:inline-block}
  .status-pill.slobodan{background:rgba(46,204,143,.15); color:var(--good); border:1px solid rgba(46,204,143,.4)}
  .status-pill.rezervisan{background:var(--pink-soft); color:var(--pink-2); border:1px solid var(--pink-line)}
  .tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-s)}

  .login-wrap{max-width:440px; margin:40px auto}
  .login-wrap .logo-lg{display:flex; justify-content:center; margin-bottom:22px}
  .demo-list{display:flex; flex-wrap:wrap; gap:7px; margin-top:10px}
  .demo-list button{font-size:12px; padding:6px 10px; border-radius:8px; border:1px solid var(--line-2); background:var(--bg-2); color:var(--muted)}
  .demo-list button:hover{color:#fff; border-color:var(--pink-line)}

  .hide{display:none !important}

  @media (max-width:880px){
    .hero-grid{grid-template-columns:1fr; gap:30px}
    .hero p.lede{max-width:none}
    .cats,.steps{grid-template-columns:1fr}
    .step{border-right:none; border-bottom:1px solid var(--line)}
    .step:last-child{border-bottom:none}
    .grid,.gallery,.mgrid,.pkg-cards{grid-template-columns:1fr 1fr}
    .for-salons,.formwrap{grid-template-columns:1fr}
    .foot-grid{grid-template-columns:1fr 1fr}
    .nav-links{display:none}
    .hamb{display:flex}
    .nav-cta .btn-ghost{display:none}
  }
  @media (max-width:540px){
    .grid,.gallery,.mgrid,.pkg-cards{grid-template-columns:1fr}
    .foot-grid{grid-template-columns:1fr}
    .trust{gap:20px; flex-wrap:wrap}
  }
  @media (prefers-reduced-motion:reduce){ .chrome .streak{animation:none; left:28%} *{scroll-behavior:auto} }
/* ============================================================
   DODATNE KLASE ZA VIŠESTRANIČNU VERZIJU
   ============================================================ */

/* ---------- Flash poruke ---------- */
.flash-wrap{max-width:1180px; margin:16px auto 0; padding:0 22px}
.flash{padding:12px 16px; border-radius:10px; margin-bottom:8px; font-size:14.5px; border:1px solid}
.flash-uspeh{background:rgba(255,0,127,.10); border-color:rgba(255,0,127,.35); color:#ffd9ec}
.flash-greska{background:rgba(255,70,70,.10); border-color:rgba(255,70,70,.4); color:#ffc9c9}

/* ---------- Hero (naslovna) ---------- */
.hero-in{max-width:1180px; margin:0 auto; padding:0 22px}
.hero-in h1{font-size:clamp(38px,5.6vw,68px); line-height:1.02; letter-spacing:.01em; margin:0}
.hero-in > p{color:var(--muted); font-size:17.5px; max-width:58ch; margin:20px 0 28px; line-height:1.6}
.hero .trust{max-width:1180px; margin:34px auto 0; padding:24px 22px 0;
             border-top:1px solid rgba(255,255,255,.08); display:flex; gap:44px; flex-wrap:wrap}
.trust-item{display:flex; flex-direction:column; gap:3px}
.trust-item b{font-family:Rajdhani,sans-serif; font-weight:700; font-size:28px; line-height:1}
.trust-item span{font-size:12.5px; color:#8b8f97; letter-spacing:.03em; text-transform:uppercase}
@media(max-width:600px){
  .hero .trust{gap:26px}
  .trust-item b{font-size:24px}
}

/* ---------- Sekcije ---------- */
.section{max-width:1180px; margin:0 auto; padding:46px 22px}
.section.narrow{max-width:640px}
.sec-title{font-size:28px; margin:0 0 4px}
.sec-sub{margin:0 0 22px}
.pink-text{color:var(--pink)}
.back-link{display:inline-block; margin-bottom:16px; color:#8b8f97; font-size:14px; text-decoration:none}
.back-link:hover{color:var(--pink)}
.razdelnik{border:none; border-top:1px solid rgba(255,255,255,.08); margin:22px 0}

/* ---------- Pretraga ---------- */
.search-form{display:flex; gap:10px; margin-bottom:18px}
.search-form input{flex:1}

/* ---------- Kartica salona ---------- */
.salon-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px}
.card-img{position:relative; display:block; aspect-ratio:16/10; overflow:hidden; background:#1a1a1a}
.card-img img{width:100%; height:100%; object-fit:cover; transition:transform .35s}
.card:hover .card-img img{transform:scale(1.05)}
.card-noimg{width:100%; height:100%; display:grid; place-items:center; color:#3a3a3a;
            font-family:Rajdhani,sans-serif; font-weight:700; letter-spacing:2px; font-size:15px}
.badge-free{position:absolute; left:10px; bottom:10px; background:rgba(255,0,127,.9); color:#fff;
            font-size:11.5px; font-weight:600; padding:4px 9px; border-radius:20px}
.card-body{padding:15px 16px}
.card-body .row{display:flex; justify-content:space-between; align-items:flex-start; gap:10px}
.card-body h3{font-size:17px; margin:0}
.card-body .city{font-size:13px; color:#8b8f97; margin-top:2px}
.cat-tag{font-size:12px; color:var(--pink); margin:8px 0 12px}
.card-body .price{font-size:15px; font-weight:600}

/* ---------- Kategorije (naslovna) ---------- */
.cat-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px}
.cat-card{display:block; padding:22px; border-radius:14px; text-decoration:none;
          background:linear-gradient(160deg,#232323,#1b1b1b); border:1px solid rgba(255,255,255,.07);
          transition:border-color .2s, transform .2s}
.cat-card:hover{border-color:var(--pink); transform:translateY(-3px)}
.cat-card h3{font-size:18px; margin:0 0 8px}
.cat-card p{font-size:13.5px; color:#8b8f97; margin:0 0 14px; line-height:1.5}
.cat-card .go{font-size:13px; color:var(--pink); font-weight:600}

/* ---------- Kako radi (za salone) ---------- */
.kako-radi{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; margin-top:10px}
.korak{padding:24px; border-radius:14px; background:#1f1f1f; border:1px solid rgba(255,255,255,.07)}
.korak .broj{display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
             background:var(--pink); color:#fff; font-weight:700; margin-bottom:14px}
.korak h3{font-size:17px; margin:0 0 6px}
.korak p{font-size:14px; line-height:1.55; margin:0}

/* ---------- Paketi ---------- */
.pkg-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px}
.pkg-card{position:relative; padding:24px 20px; border-radius:14px; background:#1f1f1f;
          border:1px solid rgba(255,255,255,.08)}
.pkg-card.istaknut, .pkg-card.trenutni{border-color:var(--pink); box-shadow:0 0 24px rgba(255,0,127,.12)}
.pkg-tag{position:absolute; top:-10px; left:20px; background:var(--pink); color:#fff;
         font-size:11px; font-weight:600; padding:3px 10px; border-radius:20px}
.pkg-card h3{font-size:19px; margin:0 0 8px}
.pkg-cena{font-size:26px; font-family:Rajdhani,sans-serif; font-weight:700; margin-bottom:16px}
.pkg-cena small{font-size:13px; font-family:Inter,sans-serif; font-weight:400}
.pkg-lista{list-style:none; padding:0; margin:0 0 18px}
.pkg-lista li{font-size:14px; color:#b9bcc2; padding:6px 0 6px 20px; position:relative}
.pkg-lista li:before{content:'✓'; position:absolute; left:0; color:var(--pink); font-weight:700}
.pkg-badge{display:inline-block; background:rgba(255,0,127,.15); color:var(--pink);
           font-size:11.5px; font-weight:600; padding:2px 9px; border-radius:20px}

/* ---------- Statistika (admin) ---------- */
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px}
.stat{padding:20px; border-radius:12px; background:#1f1f1f; border:1px solid rgba(255,255,255,.07); text-align:center}
.stat b{display:block; font-size:30px; font-family:Rajdhani,sans-serif; margin-bottom:4px}
.stat span{font-size:13px; color:#8b8f97}

/* ---------- Limit traka (panel) ---------- */
.limit-traka{display:flex; gap:20px; flex-wrap:wrap; align-items:center; padding:14px 18px;
             background:#1f1f1f; border:1px solid rgba(255,255,255,.07); border-radius:12px;
             margin-bottom:20px; font-size:14px; color:#8b8f97}
.limit-traka a{margin-left:auto; text-decoration:none; font-size:13.5px}

/* ---------- Tabovi ---------- */
.tabs{display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid rgba(255,255,255,.08); margin:24px 0 24px}
.tab{padding:11px 18px; font-size:14.5px; color:#8b8f97; text-decoration:none;
     border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .15s}
.tab:hover{color:#ddd}
.tab.on{color:var(--pink); border-bottom-color:var(--pink); font-weight:600}
.tab-broj{display:inline-block; background:var(--pink); color:#fff; font-size:11px;
          padding:1px 6px; border-radius:20px; margin-left:4px; vertical-align:1px}

/* ---------- Panel ---------- */
.panel-head{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap}
.panel-head .who{display:flex; align-items:center; gap:14px}
.panel-head .av{width:52px; height:52px; border-radius:12px; display:grid; place-items:center;
                background:linear-gradient(135deg,var(--pink),#c4005f); color:#fff;
                font-family:Rajdhani,sans-serif; font-weight:700; font-size:19px}
.panel-head h1{font-size:24px; margin:0}
.panelbox{padding:24px; border-radius:14px; background:#1f1f1f; border:1px solid rgba(255,255,255,.07)}
.panelbox h1{font-size:24px; margin:0 0 4px}
.panelbox h3{font-size:18px; margin:0 0 6px}

/* ---------- Forme ---------- */
.formwrap{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:600px){ .formwrap{grid-template-columns:1fr} }
.chip-check{display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:20px;
            background:#2a2a2a; border:1px solid rgba(255,255,255,.1); cursor:pointer;
            font-size:13.5px; color:#b9bcc2; transition:all .15s}
.chip-check:hover{border-color:rgba(255,0,127,.5)}
.chip-check input{accent-color:var(--pink); cursor:pointer; margin:0}
.chip-check:has(input:checked){background:rgba(255,0,127,.15); border-color:var(--pink); color:#fff}

/* ---------- Brisanje rada (u galeriji panela) ---------- */
.del-form{position:absolute; top:8px; right:8px; margin:0}
.work .img{position:relative}
.del{width:30px; height:30px; border-radius:50%; border:none; background:rgba(0,0,0,.65);
     color:#fff; font-size:19px; line-height:1; cursor:pointer; transition:background .15s}
.del:hover{background:#e02020}

/* ---------- Status ---------- */
.status-pill{display:inline-block; font-size:12px; font-weight:600; padding:3px 10px; border-radius:20px;
             background:rgba(255,255,255,.08); color:#b9bcc2}
.status-pill.slobodan{background:rgba(40,200,110,.15); color:#4ade80}
.status-pill.rezervisan{background:rgba(255,180,0,.15); color:#fbbf24}

/* ---------- Recenzije ---------- */
.reviews{display:flex; flex-direction:column; gap:12px}
.review{background:#232323; border:1px solid rgba(255,255,255,.07); border-radius:12px; padding:15px 17px}
.rev-head{display:flex; justify-content:space-between; align-items:center; gap:10px}
.rev-ime{font-weight:600}
.rev-stars{color:var(--pink); letter-spacing:1px; font-size:15px}
.rev-stars-off{color:#4a4a4a}
.rev-tekst{margin:9px 0 7px; font-size:14.5px; line-height:1.55; color:#c4c7cc}
.rev-datum{font-size:12px}
.star-pick{display:flex; gap:3px}
.star-btn{background:none; border:none; font-size:30px; line-height:1; color:#4a4a4a; cursor:pointer;
          padding:0 2px; transition:color .12s}
.star-btn:hover, .star-btn.on{color:var(--pink)}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed; inset:0; background:rgba(3,3,3,.93); backdrop-filter:blur(6px);
          display:none; place-items:center; z-index:200; padding:24px; cursor:zoom-out}
.lightbox.on{display:grid}
.lb-inner{max-width:94vw; max-height:90vh; display:grid; place-items:center}
.lb-inner img, .lb-inner video{max-width:94vw; max-height:90vh; width:auto; height:auto;
                               border-radius:10px; box-shadow:0 0 40px rgba(255,0,127,.25); display:block}
.lb-x{position:fixed; top:18px; right:22px; width:44px; height:44px; border-radius:50%;
      border:1px solid rgba(255,255,255,.25); background:rgba(0,0,0,.4); color:#fff;
      font-size:26px; line-height:1; cursor:pointer; z-index:201}
.lb-x:hover{background:var(--pink); border-color:var(--pink)}

/* ---------- Poziv na akciju (naslovna) ---------- */
.cta-band{text-align:center; background:linear-gradient(160deg,#232323,#1a1a1a);
          border-radius:16px; border:1px solid rgba(255,255,255,.07); margin:20px auto 60px; max-width:1136px}
.cta-band h2{font-size:26px; margin:0 0 8px}
.cta-band p{margin:0 0 20px}

/* ---------- Footer ---------- */
.footer{margin-top:60px; background:#181818; border-top:1px solid rgba(255,255,255,.07)}
.foot-in{max-width:1180px; margin:0 auto; padding:50px 22px 30px;
         display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:30px}
@media(max-width:820px){ .foot-in{grid-template-columns:1fr 1fr} }
@media(max-width:520px){ .foot-in{grid-template-columns:1fr} }
.foot-brand .logo-img{height:36px; width:auto; margin-bottom:12px}

/* Manji logo na telefonu */
@media(max-width:600px){
  .logo-img{height:34px}
}
.foot-brand p{font-size:14px; line-height:1.6; max-width:280px}
.foot-col h4{font-size:14px; margin:0 0 12px; text-transform:uppercase; letter-spacing:1px}
.foot-col a, .foot-col p{display:block; font-size:13.5px; color:#8b8f97; text-decoration:none;
                         margin-bottom:7px; line-height:1.5}
.foot-col a:hover{color:var(--pink)}
.foot-bottom{max-width:1180px; margin:0 auto; padding:18px 22px;
             border-top:1px solid rgba(255,255,255,.07);
             display:flex; justify-content:space-between; align-items:center; font-size:13px}
.admin-link{text-decoration:none; opacity:.5}
.admin-link:hover{color:var(--pink); opacity:1}

/* ---------- Prazno stanje ---------- */
.empty{grid-column:1/-1; padding:34px; text-align:center; color:#8b8f97; font-size:14.5px;
       background:#1f1f1f; border:1px dashed rgba(255,255,255,.1); border-radius:12px}