/* Client cabinet (/kabinet/) — on top of /assets/site.css, same colours and buttons. */
#kab{max-width:980px;margin:0 auto}
/* compact like the rest of the site (Galina 2026-10-19 «оставить так», 2026-10-23 «less white space») */
section.kab-sec{padding:14px 0 28px}
.page-head.kab-head{padding:10px 0 8px}
.kab-head .crumbs{margin-bottom:4px}
.kab-head h1{font-size:clamp(22px,2.6vw,30px)}
.fab{display:none}   /* the WhatsApp bubble would cover the save bar */
#kab .wide{grid-column:1/-1}
.kmuted{color:var(--muted);font-size:14px}
.kbox{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:16px 18px;margin:0 0 12px}
.kbox h3{font-family:Oswald,sans-serif;font-weight:500;font-size:20px;margin:0 0 8px}
.ksec{font-family:Oswald,sans-serif;font-weight:500;font-size:20px;margin:18px 0 8px}
.btn-sm{padding:7px 12px;font-size:14px;gap:6px}
.btn.busy{opacity:.6;pointer-events:none}
.btn-danger{background:#b3261e;color:#fff}
.btn-danger:hover{background:#8f1e18}
.kbox.kdanger{border-color:#f0c4c0}
.kbox.kdanger h3{color:#9a2a22}
.klink{background:none;border:0;padding:6px 0;color:var(--green);font:inherit;font-size:14px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.kdel{color:#9a2a22}
.req{color:#b3261e;font-style:normal}

/* sign-in */
.kauth-wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:20px;align-items:start}
.kintro h2{font-family:Oswald,sans-serif;font-weight:600;font-size:26px;line-height:1.15;margin:0 0 8px}
.kintro p{margin:0 0 14px;line-height:1.55}
.ksteps{margin:0;padding:0;list-style:none;counter-reset:s;display:grid;gap:6px}
.ksteps li{counter-increment:s;display:flex;align-items:center;gap:12px;font-weight:500}
.ksteps li::before{content:counter(s);flex:none;width:30px;height:30px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;font-family:Oswald,sans-serif}
.ktabs{display:flex;margin:-16px -18px 14px;border-bottom:1px solid var(--line)}
.ktabs button{flex:1;padding:14px;background:var(--grey-2);border:0;font:500 16px Oswald,sans-serif;cursor:pointer;color:var(--muted)}
.ktabs button.on{background:var(--paper);color:var(--ink);box-shadow:inset 0 -3px 0 var(--green)}
.kform{display:grid;gap:8px}
.kform .btn{width:100%}
.kf{display:grid;gap:3px;font-size:13.5px}
.kf .kl{font-weight:500}
.kf input,.kf select,.kf textarea{width:100%;box-sizing:border-box;padding:7px 10px;border:1px solid #cfd3d0;border-radius:var(--r);font:inherit;font-size:15px;line-height:1.35;background:#fff;color:var(--ink)}
.kf textarea{resize:vertical}
.kf input:focus,.kf select:focus,.kf textarea:focus{outline:2px solid var(--green);outline-offset:-1px;border-color:var(--green)}
.kf small{color:var(--muted);font-size:12px;line-height:1.35}
.kf.need input,.kf.need textarea{border-color:#b3261e;background:#fff7f6}
.kcheck{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.4}
.kcheck input{width:20px;height:20px;margin:0;flex:none}
.ts{min-height:0}

/* home */
.kbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin:0 0 8px}
.kbar h2{font-family:Oswald,sans-serif;font-weight:600;font-size:22px;margin:0}
.kbar-btns{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.klist{display:grid;gap:8px}
.klist-item{display:grid;grid-template-columns:150px 1fr;gap:16px;background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:12px}
.kthumb{aspect-ratio:3/2;background:var(--grey);border-radius:4px;overflow:hidden;display:grid;place-items:center}
.kthumb img{width:100%;height:100%;object-fit:cover}
.kthumb-empty{font-size:28px;opacity:.4}
.khead{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.khead b{font-size:17px}
.kprice{font-family:Oswald,sans-serif;font-size:20px;color:var(--green);margin:4px 0}
.knote{margin:2px 0;font-size:14px;color:var(--muted)}
.kinq{margin:2px 0;font-size:14px;font-weight:700;color:var(--green)}
.kbtns{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.kbtns .btn{padding:7px 14px;font-size:14px}
.kst{display:inline-block;padding:2px 9px;border-radius:4px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;background:#e9ecea;color:#36413b}
.kst-pending{background:#fff3c4;color:#6b5600}
.kst-approved{background:#dcefe2;color:#0d6a2c}
.kst-rejected,.kst-removed{background:#fbe3e1;color:#9a2a22}
.kst-sold{background:#36413b;color:#fff}
.kempty{text-align:center}
.kinq-list{margin:8px 0 0;padding-left:18px;display:grid;gap:6px;font-size:14px}
.kinq-list q{display:block;color:var(--muted);margin-top:2px}
.kwarn{background:#fff8dc;border:1px solid #f0d86a;border-radius:6px;padding:12px 16px;margin:0 0 14px;font-size:14px}

/* editor */
.kgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px}
.ksave{position:sticky;bottom:0;display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;align-items:center;padding:12px 0;background:linear-gradient(transparent,var(--grey-2) 30%);z-index:5}
.kslots{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-top:8px}
.kslot{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.kslot.need{border-color:#b3261e;box-shadow:0 0 0 2px #fbe3e1}
.kslot-pic{position:relative;aspect-ratio:3/2;background:#e8ebe9;display:grid;place-items:center;overflow:hidden}
.kslot-pic img{width:100%;height:100%;object-fit:cover}
.kslot-sample{opacity:.35;filter:grayscale(.4)}
.kslot-cartoon{opacity:.9}
.kslot-cartoon.mirror{transform:scaleX(-1)}
.kslot-outline{object-fit:contain!important;padding:8%;box-sizing:border-box;opacity:.8;background:#5d6862}
.kslot-outline.mirror,.cam-outline.mirror{transform:scaleX(-1)}
.kcover{position:absolute;left:8px;top:8px;background:var(--yellow);font:500 12px Oswald,sans-serif;padding:2px 8px;border-radius:3px;text-transform:uppercase}
.kslot-txt{padding:8px 10px 2px;display:grid;gap:2px}
.kslot-txt b{font-size:15px}
.kslot-txt small{color:var(--muted);font-size:12.5px;line-height:1.35}
.kslot-btns{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:6px 10px 10px;margin-top:auto}
.kspin{position:absolute;inset:auto auto 8px 8px;width:22px;height:22px;border-radius:50%;border:3px solid #fff;border-top-color:var(--green);animation:kspin .8s linear infinite}
@keyframes kspin{to{transform:rotate(360deg)}}
.kextra{margin-top:18px}
.kextra h4{margin:0 0 4px;font-size:16px}
.kextra-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin-top:8px}
.kextra-item{position:relative;aspect-ratio:3/2;border-radius:4px;overflow:hidden;background:var(--grey)}
.kextra-item img{width:100%;height:100%;object-fit:cover}
.kx{position:absolute;top:4px;right:4px;width:26px;height:26px;border-radius:50%;border:0;background:rgba(0,0,0,.65);color:#fff;font-size:18px;line-height:1;cursor:pointer}
.kextra-add{aspect-ratio:3/2;border:2px dashed #b9c0bb;border-radius:4px;background:#fff;color:var(--green);font:500 14px Oswald,sans-serif;cursor:pointer}

/* camera with the outline of the machine */
html.cam-open,html.cam-open body{overflow:hidden}
.cam{position:fixed;inset:0;z-index:1000;background:#000;color:#fff;display:flex;flex-direction:column}
.cam-stage{position:relative;flex:1;display:grid;place-items:center;overflow:hidden}
.cam-frame{position:relative}
.cam-frame[hidden]{display:none}
.cam-frame video{width:100%;height:100%;display:block;object-fit:fill}
.cam-outline{position:absolute;inset:6%;width:88%;height:88%;object-fit:contain;opacity:.8;pointer-events:none;filter:drop-shadow(0 0 2px rgba(0,0,0,.9))}
.cam-grid{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,transparent calc(33.33% - .5px),rgba(255,255,255,.18) calc(33.33% - .5px),rgba(255,255,255,.18) calc(33.33% + .5px),transparent calc(33.33% + .5px),transparent calc(66.66% - .5px),rgba(255,255,255,.18) calc(66.66% - .5px),rgba(255,255,255,.18) calc(66.66% + .5px),transparent calc(66.66% + .5px)),
  linear-gradient(transparent calc(33.33% - .5px),rgba(255,255,255,.18) calc(33.33% - .5px),rgba(255,255,255,.18) calc(33.33% + .5px),transparent calc(33.33% + .5px),transparent calc(66.66% - .5px),rgba(255,255,255,.18) calc(66.66% - .5px),rgba(255,255,255,.18) calc(66.66% + .5px),transparent calc(66.66% + .5px))}
.cam-shot{max-width:100%;max-height:100%;object-fit:contain}
.cam-shot[hidden]{display:none}
.cam-rotate{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);background:rgba(0,0,0,.72);padding:8px 16px;border-radius:8px;font:500 16px Oswald,sans-serif;text-align:center;white-space:nowrap}
.cam-rotate[hidden]{display:none}
.cam-top{position:absolute;left:0;right:0;top:0;padding:12px 56px 12px 16px;background:linear-gradient(rgba(0,0,0,.7),transparent);display:grid;gap:2px;pointer-events:none}
.cam-top b{font:500 18px Oswald,sans-serif}
.cam-top small{font-size:13px;opacity:.9;max-width:640px}
.cam-x{position:absolute;right:10px;top:10px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.18);color:#fff;font-size:26px;line-height:1;cursor:pointer;pointer-events:auto}
.cam-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px calc(12px + env(safe-area-inset-bottom));background:#000}
.cam-take{width:70px;height:70px;border-radius:50%;border:4px solid #fff;background:rgba(255,255,255,.25);cursor:pointer}
.cam-take:active{background:#fff}
.cam-take[hidden],.cam-btn[hidden]{display:none}
.cam-side{width:70px;background:none;border:0;color:#fff;font-size:24px;display:grid;justify-items:center;gap:2px;cursor:pointer}
.cam-side span{font-size:11px}
.cam-btn{flex:1}
@media (orientation:landscape) and (max-height:520px){
  .cam{flex-direction:row}
  .cam-bar{flex-direction:column-reverse;padding:12px calc(12px + env(safe-area-inset-right)) 12px 12px}
  .cam-btn{flex:none}
}

#kab-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:#1f2a24;color:#fff;padding:12px 18px;border-radius:6px;max-width:min(92vw,560px);font-size:15px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:1100}
#kab-toast.show{opacity:1;transform:translate(-50%,0)}
#kab-toast.bad{background:#9a2a22}

@media (max-width:820px){.kauth-wrap{grid-template-columns:1fr}.kintro{order:2}}
@media (max-width:640px){
  section.kab-sec{padding:12px 0 24px}
  .kbox{padding:12px}
  .ktabs{margin:-12px -12px 12px}
  .kgrid{grid-template-columns:1fr}
  .kf input,.kf select,.kf textarea{font-size:16px} /* 16px keeps iPhone from zooming into the field */
  .klist-item{grid-template-columns:96px 1fr;gap:12px}
  .kslots{grid-template-columns:1fr 1fr;gap:10px}
  .kslot-txt small{display:none}
  .kslot-btns .btn{flex:1 1 100%}
  .ksave .btn{flex:1 1 0;padding:11px 8px;white-space:normal;font-size:15px}
}

/* «Войти через Google» — Google's own button look (white, grey border, the colour G) */
.kgoogle{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;box-sizing:border-box;min-height:44px;padding:10px 12px;background:#fff;border:1px solid #747775;border-radius:var(--r);color:#1f1f1f;font:500 15px Roboto,Arial,sans-serif;text-decoration:none;cursor:pointer}
.kgoogle:hover{background:#f8faff;box-shadow:0 1px 3px rgba(60,64,67,.3)}
.kg-logo{display:flex;flex:none}
.kg-logo svg{width:18px;height:18px}
.kor{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;margin:12px 0}
.kor::before,.kor::after{content:"";flex:1;border-top:1px solid var(--line)}
.kcomplete{max-width:520px;margin:0 auto 12px}