:root{
  --ink:#111;
  --muted:#8a8a8a;
  --line:#d6d6d6;
  --gray:#f2f2f2;
  --bg:#fff;
  --sans:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  --shop-w:380px;
  --hist-w:300px;
  --gap:16px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:var(--sans);background:var(--gray);color:var(--ink);-webkit-font-smoothing:antialiased;overflow:hidden}
[hidden]{display:none !important}

/* ===== splash ===== */
.splash{
  position:fixed;inset:0;z-index:50;background:var(--gray);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .7s ease;
}
.splash.hide{opacity:0;pointer-events:none}
.splash .logo{font-weight:200;font-size:54px;letter-spacing:0.05em;color:var(--ink)}
.splash .logo-img{max-width:220px;max-height:40vh;display:none}
.splash.has-img .logo-img{display:block}
.splash.has-img .logo{display:none}

/* ===== role select ===== */
.roles{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px}
.roles-title{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.roles-list{width:100%;max-width:var(--shop-w);background:var(--bg);border:2px solid var(--line)}
.role-row{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:16px 18px;border:none;border-bottom:2px solid var(--line);
  background:var(--bg);cursor:pointer;font-family:var(--sans);font-size:16px;color:var(--ink);
  text-align:left;transition:background .15s ease;
}
.role-row:last-child{border-bottom:none}
.role-row:hover{background:var(--gray)}
.role-row:active{background:var(--line)}
.dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.roles-err{width:100%;max-width:var(--shop-w);text-align:center;color:var(--muted);font-size:13px;padding:18px}

/* ===== app ===== */
.app{height:100vh;display:flex;flex-direction:column}
.topbar{
  flex:0 0 auto;display:flex;align-items:center;gap:12px;
  padding:10px 18px;border-bottom:1px solid var(--line);background:var(--bg);
}
.topbar .inner{width:100%;max-width:var(--shop-w);margin:0 auto;display:flex;align-items:center;gap:10px}
.who{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;color:var(--ink)}
.linkbtn{
  margin-left:auto;border:none;background:transparent;cursor:pointer;
  font-family:var(--mono);font-size:10px;letter-spacing:0.06em;color:var(--muted);
  text-transform:uppercase;padding:4px 0;
}
.linkbtn:hover{color:var(--ink)}
.net-badge{font-family:var(--mono);font-size:10px;color:#9b2c2c;letter-spacing:0.06em}
.net-badge.hidden{display:none}

.stage{flex:1;display:flex;flex-direction:column;min-height:0;overflow-y:auto}
.col{display:flex;flex-direction:column;min-height:0}
.col-head{
  position:sticky;top:0;z-index:2;
  padding:16px 18px 8px;font-family:var(--mono);font-size:11px;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--line);
}
.col-head .cnt{color:var(--ink)}

.shopping{order:1;width:100%;flex:0 0 auto;background:var(--bg)}
.history{order:2;width:100%;flex:0 0 auto;background:#e8e8e8}
.shopping .col-head{background:var(--bg)}
.history .col-head{background:#e8e8e8}
.rightspacer{display:none}

/* item — read-only block: left 90% / right 10% */
.item{
  display:flex;align-items:stretch;gap:10px;
  padding:16px 18px;border-bottom:2px solid var(--line);
  cursor:pointer;
}
.shopping .item{background:var(--bg)}
.history .item{background:#e8e8e8}
.item{transition:background-color .5s ease}
.item.bought{background:#e8e8e8}
.item.bought .name{color:var(--muted)}
.item.bought .meta,
.item.just-bought .meta{display:none}
.icstack{position:relative;display:block;width:28px;height:28px}
.icstack svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:opacity .4s ease;opacity:0}
.item .ic-buy{opacity:1}
.item.just-bought .ic-buy{opacity:0}
.item.just-bought .ic-black{opacity:1}
.item.bought .ic-buy{opacity:0}
.item.bought .ic-black{opacity:0}
.item.bought .ic-again{opacity:1}
.item.pending{opacity:.55}
@keyframes fade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.ileft{width:90%;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:6px}
.iright{width:10%;display:flex;align-items:center;justify-content:flex-end}
.meta{display:flex;align-items:center;gap:10px}
.ago{font-family:var(--mono);font-size:11px;color:var(--muted)}
.user{font-family:var(--mono);font-size:11px;color:var(--ink)}
.note{display:inline-flex;align-items:center;cursor:default}
.pending-tag{font-family:var(--mono);font-size:10px;color:var(--muted)}
.name{
  font-size:16px;line-height:1.45;color:var(--ink);font-weight:700;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;white-space:normal;word-break:break-word;
}
.act{
  width:32px;height:32px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;cursor:pointer;border:none;background:transparent;color:var(--ink);
  transition:background .15s ease,transform .1s ease;
}
.act:hover{background:rgba(0,0,0,.06)}
.act:active{transform:scale(.9)}
.act svg{display:block}
.empty{padding:44px 18px;text-align:center;color:var(--muted);font-size:13px}

/* ===== карточка товара ===== */
.card{
  position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;
  background:var(--bg);
  transform:translateX(100%);
  transition:transform .28s ease;
  display:flex;flex-direction:column;
}
.card.open{transform:none}
.card-head{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;border-bottom:1px solid var(--line);
}
.card-title{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted)}
.card-body{flex:1;overflow-y:auto;padding:20px 18px}
.field{margin-bottom:18px}
.field .lbl{font-family:var(--mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.field .val{font-size:16px;line-height:1.45;color:var(--ink);word-break:break-word}
.field .val a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.card-foot{padding:12px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.cin{
  width:100%;border:none;border-bottom:1px solid var(--line);background:transparent;
  font-family:var(--sans);font-size:16px;line-height:1.45;color:var(--ink);
  padding:6px 2px;outline:none;
}
.cin:focus{border-bottom-color:var(--ink)}
.cin::placeholder{color:var(--muted)}
textarea.cin{resize:none;overflow:hidden}
.cin-name{font-weight:700;resize:none}
.cin-qty{width:44px;min-width:44px;max-width:44px;text-align:center;font-weight:700}
.cin-qty::-webkit-outer-spin-button,.cin-qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cin-qty{-moz-appearance:textfield;appearance:textfield}
.qtyrow{display:flex;align-items:center;gap:6px}
.qbtn{
  width:36px;height:36px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  border:none;background:transparent;color:var(--ink);
  font-family:var(--sans);font-size:20px;line-height:1;cursor:pointer;
  transition:background .15s ease,transform .1s ease,opacity .15s ease;
}
.qbtn:hover{background:var(--gray)}
.qbtn:active{transform:scale(.92)}
@media (hover:hover){
  .qbtn{opacity:0}
  .qtyrow:hover .qbtn{opacity:1}
}
.filelink{font-family:var(--mono);font-size:11px;line-height:1.45;color:var(--ink);text-decoration:underline;text-underline-offset:2px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attach{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.btns{display:flex;flex-direction:row;gap:6px;flex:0 0 auto}
.sqbtn{
  width:32px;height:32px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:var(--bg);color:var(--muted);cursor:pointer;
  transition:color .15s ease,border-color .15s ease,transform .1s ease;
}
.sqbtn:hover{color:#9b2c2c;border-color:#9b2c2c}
.sqbtn:active{transform:scale(.92)}
.sqbtn.done{color:#276749;border-color:#276749}
.lrow{display:flex;align-items:center;gap:12px;margin-bottom:8px;flex-wrap:wrap}
.ladd{margin-top:4px}
.ladd .cin{flex:1;min-width:140px}
.prow{display:inline-flex;flex-direction:column;align-items:flex-start;gap:4px;margin:0 12px 8px 0}
.photo-slot{display:inline-flex;align-items:center;justify-content:center;min-width:120px;min-height:88px;border:1px dashed var(--line);color:var(--muted)}
.thumb{max-width:180px;max-height:180px;border:1px solid var(--line);display:block;cursor:zoom-in}
.lightbox{
  position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.88);
  display:flex;align-items:center;justify-content:center;padding:16px;cursor:zoom-out;
}
.lightbox img{max-width:100%;max-height:100%;display:block;object-fit:contain}
.filebtn{
  display:inline-block;cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--muted);border:1px dashed var(--line);padding:10px 14px;
  transition:color .15s ease,border-color .15s ease;
}
.filebtn:hover{color:var(--ink);border-color:var(--ink)}
.rm{
  border:none;background:transparent;cursor:pointer;font-family:var(--mono);font-size:10px;
  letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);padding:4px 0;
}
.rm:hover{color:#9b2c2c}
.savebtn{
  font-family:var(--mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;
  padding:10px 14px;border:2px solid var(--ink);background:var(--bg);color:var(--ink);
  cursor:pointer;transition:opacity .15s ease,transform .1s ease;
}
.savebtn:hover{opacity:.7}
.savebtn:active{transform:scale(.97)}
#card-foot .act .ic-buy{opacity:1}
#card-foot .act[data-act="again"] .ic-buy{opacity:0}
#card-foot .act[data-act="again"] .ic-again{opacity:1}

/* ===== add bar ===== */
.addbar{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;
  border-top:2px solid var(--line);background:var(--bg);
  padding:10px 18px;
}
.addbar .inner{width:100%;max-width:var(--shop-w);margin:0 auto;display:flex;align-items:center;gap:10px}
#add-input{
  flex:1;border:none;border-bottom:1px solid var(--line);background:transparent;
  font-family:var(--sans);font-size:16px;color:var(--ink);padding:8px 2px;outline:none;
}
#add-input::placeholder{color:var(--muted)}
#add-input:focus{border-bottom-color:var(--ink)}

/* ===== desktop ===== */
@media (min-width:1024px){
  .stage{flex-direction:row;justify-content:center;overflow:hidden}
  .col{overflow-y:auto}
  .history{order:1;width:var(--hist-w);margin-right:var(--gap);padding-top:38px;background:var(--gray)}
  .history .col-head{background:var(--gray)}
  .history .item{background:var(--gray)}
  .shopping{order:2;width:var(--shop-w)}
  .rightspacer{display:block;order:3;flex:0 0 auto;width:calc(var(--hist-w) + var(--gap))}
  .card{left:auto;width:var(--shop-w);box-shadow:-10px 0 30px rgba(0,0,0,.14)}
}