/* Кабинет ALFCAST. Палитра и типографика — те же, что на сайте site/v1/index.html:
   клиент переходит с сайта в кабинет и не должен чувствовать стык.
   Верстаем сразу на телефон и на компьютер (ответ 7): телефон — база, компьютер — с 900px. */
:root{
  --navy-900:#070f1e; --navy-800:#0b1a33; --navy-700:#10233f; --navy-600:#16304f;
  --line:rgba(201,162,39,.22); --gold:#c9a227; --gold-lt:#e8c874;
  --cyan:#5fd3f3; --text:#c8d3e2; --text-dim:#8b9bb1; --bad:#ff7a70; --ok:#7fd6a0;
  --maxw:1100px; --r:12px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--navy-800); color:var(--text);
  font:400 15px/1.6 "Inter Tight","Helvetica Neue",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
a{color:var(--gold-lt)}
h1,h2,h3{color:#fff;font-weight:600;letter-spacing:.01em;margin:0 0 14px}
h1{font-size:22px} h2{font-size:18px} h3{font-size:15px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 16px}
.muted{color:var(--text-dim)}
.num{font-variant-numeric:tabular-nums}
.bad{color:var(--bad)}

/* шапка */
.top{border-bottom:1px solid var(--line);background:rgba(7,15,30,.75);position:sticky;top:0;z-index:5}
.top__in{max-width:var(--maxw);margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:14px}
.top__brand{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-lt);text-decoration:none}
.top__who{margin-left:auto;font-size:12px;color:var(--text-dim);text-align:right}
.top__who b{display:block;color:#fff;font-weight:500}
.nav{border-bottom:1px solid var(--line);background:rgba(7,15,30,.45)}
.nav__in{max-width:var(--maxw);margin:0 auto;padding:0 16px;display:flex;gap:18px;overflow-x:auto;scrollbar-width:none}
.nav__in::-webkit-scrollbar{display:none}
.nav a{
  padding:12px 0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-dim);text-decoration:none;white-space:nowrap;border-bottom:1px solid transparent;
}
.nav a:hover{color:#fff}
.nav a[aria-current="page"]{color:var(--gold-lt);border-bottom-color:var(--gold-lt)}

main{padding:22px 0 60px}
.card{background:rgba(16,35,63,.55);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-bottom:16px}
.card__head{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.card__head h2{margin:0}

/* строки и таблицы */
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 0;border-bottom:1px dashed rgba(201,162,39,.16);font-size:14px}
.row:last-child{border:0}
.row b{color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.row__sub{display:block;font-size:12px;color:var(--text-dim);margin-top:2px}
.empty{padding:22px;text-align:center;color:var(--text-dim);font-size:13px;
  border:1px dashed rgba(232,200,116,.3);border-radius:var(--r)}

/* карточки остатка */
.bal{display:grid;grid-template-columns:1fr;gap:12px}
.bal__c{padding:16px;border:1px solid rgba(95,211,243,.2);background:rgba(95,211,243,.07);border-radius:10px}
.bal__c i{display:block;font-style:normal;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim)}
.bal__c b{display:block;margin-top:6px;font-size:24px;color:#fff;font-variant-numeric:tabular-nums}
.bal__c--debt{border-color:rgba(255,122,112,.35);background:rgba(255,122,112,.08)}
.bal__c--debt b{color:var(--bad)}

/* метки статусов */
.pill{display:inline-block;padding:4px 10px;border-radius:999px;font-size:11px;white-space:nowrap;
  border:1px solid var(--line);color:var(--gold-lt);background:rgba(201,162,39,.08)}
.pill--work{color:var(--cyan);border-color:rgba(95,211,243,.3);background:rgba(95,211,243,.08)}
.pill--ok{color:var(--ok);border-color:rgba(127,214,160,.3);background:rgba(127,214,160,.08)}
.pill--bad{color:var(--bad);border-color:rgba(255,122,112,.35);background:rgba(255,122,112,.08)}
.pill--dim{color:var(--text-dim);border-color:rgba(139,155,177,.3);background:rgba(139,155,177,.08)}

/* формы */
label{display:block;font-size:12px;letter-spacing:.06em;color:var(--text-dim);margin-bottom:6px}
input,select,textarea{
  width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--line);
  background:rgba(7,15,30,.6);color:#fff;font:inherit;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold-lt)}
.field{margin-bottom:14px}
.field--half{display:grid;grid-template-columns:1fr;gap:14px}
.btn{
  display:inline-block;padding:12px 22px;border:1px solid var(--gold);border-radius:10px;
  background:linear-gradient(180deg,rgba(201,162,39,.25),rgba(201,162,39,.08));
  color:#fff;font:inherit;cursor:pointer;text-decoration:none;text-align:center;
}
.btn:hover{border-color:var(--gold-lt)}
.btn--ghost{background:none;border-color:var(--line);color:var(--text)}
.btn--wide{width:100%}
.btn--small{padding:8px 14px;font-size:13px}
.msg{padding:12px 14px;border-radius:10px;font-size:14px;margin-bottom:14px}
.msg--bad{border:1px solid rgba(255,122,112,.35);background:rgba(255,122,112,.08);color:#ffd7d3}
.msg--ok{border:1px solid rgba(127,214,160,.3);background:rgba(127,214,160,.08);color:#d6f5e4}
.hint{font-size:12px;color:var(--text-dim);margin:8px 0 0}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* вход */
.login{max-width:420px;margin:8vh auto;padding:0 16px}
.login__mark{text-align:center;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-lt);margin-bottom:18px}

@media (min-width:900px){
  body{font-size:16px}
  h1{font-size:28px} h2{font-size:20px}
  .bal{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  .field--half{grid-template-columns:1fr 1fr}
  .card{padding:22px}
  main{padding:30px 0 80px}
}

/* фото изделий в карточке заказа */
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.photos figure{margin:0}
.photos img{width:100%;height:140px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.photos figcaption{font-size:12px;color:var(--text-dim);margin-top:6px}

/* галочки в формах: поле-флажок не должно растягиваться на всю строку */
label.check{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text);margin-bottom:8px}
label.check input{width:auto}