/* App components — BAKERY theme. Every value comes from var(--tp-*).
   Only exception: messenger brand colours (channel tiles) and the Google button,
   which follow their own brand rules and live in the two :root blocks below. */

/* Channel identity colours — brand assets, not theme colours. */
:root{
  --cb-call-a:#4A3A32; --cb-call-b:#2E211B;
  --cb-wa-a:#3FE07A;  --cb-wa-b:#1FA855;
  --cb-viber-a:#8B7BF7; --cb-viber-b:#665CBF;
  --cb-tg-a:#4FC3F7;  --cb-tg-b:#1F97D4;
  --cb-vk-a:#4C75A3;  --cb-vk-b:#2C4C73;
  --cb-mail-a:#E1487C; --cb-mail-b:#671226;
  --cb-ig-1:#FEDA75; --cb-ig-2:#FA7E1E; --cb-ig-3:#D62976; --cb-ig-4:#962FBF; --cb-ig-5:#4F5BD5;
  /* Google sign-in button (Google brand rules) */
  --g-text:#1f1f1f; --g-border:#dadce0; --g-hover:#f8f9fa;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
/* Тема покачивает .tp-stage через transform — из-за этого position:fixed внутри
   считался бы от него, а не от экрана. Для приложения это ломает нижнюю навигацию,
   листы и календарь, поэтому покачивание отключено. */
.tp-stage{animation:none}
/* overflow:clip вместо hidden из темы: обрезка декоративного свечения нужна,
   но hidden делает .tp-screen скролл-контейнером и ломает прилипающую шапку. */
.tp-screen{overflow:clip}
body.is-locked{overflow:hidden}
body{
  background:var(--tp-bg);
  color:var(--tp-ink);
  font-family:var(--tp-font-body);
  font-size:15px;
  line-height:1.45;
  min-height:100vh;
  padding-bottom:calc(96px + env(safe-area-inset-bottom));
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:var(--tp-tex); opacity:.5;
}
h1,h2,h3,h4{margin:0;font-weight:800}
button{font:inherit;color:inherit}
input,select,textarea{font:inherit}
a{color:inherit}
/* Иконки — всегда токеном темы: без явного размера SVG растягивается до 300×150. */
svg{width:20px; height:20px; flex:none}
.tp-stage{min-height:100vh}
.tp-screen{min-height:100vh;background:var(--tp-bg)}
.shell{position:relative;z-index:1;max-width:560px;margin:0 auto;padding:0 16px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hidden{display:none !important}

/* ---------- header ---------- */
.app-header{
  position:sticky; top:0; z-index:30;
  background:var(--tp-bg);
  border-bottom:var(--tp-bw) solid var(--tp-line);
}
.app-header .bar{
  max-width:560px; margin:0 auto; padding:calc(12px + env(safe-area-inset-top)) 16px 12px;
  display:flex; align-items:center; gap:12px;
}
.brand{display:flex; align-items:center; gap:12px; min-width:0; flex:1}
.brand-mark{
  width:52px; height:52px; flex:none; position:relative; overflow:hidden;
  border-radius:50%; aspect-ratio:var(--tp-img-ar);
  border:var(--tp-img-frame); box-shadow:var(--tp-sh-sm);
  background:var(--tp-grad);
}
.brand-mark img{
  width:100%; height:100%; object-fit:cover; object-position:50% 34%; display:block;
  filter:var(--tp-img-filter); transform:rotate(var(--tp-img-tilt));
}
.brand-mark::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:var(--tp-grad); opacity:var(--tp-img-overlay-op); mix-blend-mode:var(--tp-img-blend);
}
.brand-text{min-width:0}
.brand-eyebrow{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--tp-mute); font-weight:700;
}
.brand-name{
  font-family:var(--tp-font-display); font-weight:var(--tp-w-display);
  font-size:27px; line-height:1.1; letter-spacing:var(--tp-track-display);
  text-transform:var(--tp-case-display); color:var(--tp-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.header-btn{
  width:46px; height:46px; flex:none; display:grid; place-items:center;
  border-radius:var(--tp-r-btn); border:var(--tp-bw) solid var(--tp-line);
  background:var(--tp-surf); color:var(--tp-ink); cursor:pointer;
  transition:transform var(--tp-dur) var(--tp-ease); position:relative;
}
.header-btn:active{transform:scale(var(--tp-press))}
.header-btn svg{width:21px; height:21px}
.header-btn .dot{
  position:absolute; top:8px; right:8px; width:9px; height:9px; border-radius:50%;
  background:var(--tp-acc-2); border:2px solid var(--tp-surf);
}

/* search */
.search-wrap{max-width:560px; margin:0 auto; padding:0 16px 12px}
.search-field{position:relative; display:flex; align-items:center}
.search-field svg{position:absolute; left:14px; width:18px; height:18px; color:var(--tp-mute)}
.search-field input{
  width:100%; min-height:46px; padding:12px 14px 12px 42px;
  border-radius:var(--tp-r-btn); border:var(--tp-bw) solid var(--tp-line);
  background:var(--tp-surf); color:var(--tp-ink); font-size:15px;
}
.search-field input::placeholder{color:var(--tp-mute)}
.search-field input:focus{outline:2px solid var(--tp-acc); outline-offset:1px}

/* ---------- segmented control (statuses) ---------- */
.segmented{
  display:flex; gap:8px; overflow-x:auto; padding:12px 16px 10px;
  max-width:560px; margin:0 auto; scrollbar-width:none;
}
.segmented::-webkit-scrollbar{display:none}
.seg-btn{
  flex:none; min-height:44px; display:inline-flex; align-items:center; gap:7px;
  padding:10px 16px; border-radius:var(--tp-r-btn);
  border:var(--tp-bw) solid var(--tp-line); background:var(--tp-surf); color:var(--tp-mute);
  font-size:13.5px; font-weight:800; white-space:nowrap; cursor:pointer;
  transition:transform var(--tp-dur) var(--tp-ease), background var(--tp-dur) linear, color var(--tp-dur) linear;
}
.seg-btn:active{transform:scale(var(--tp-press))}
.seg-btn .n{
  font-family:var(--tp-font-mono); font-size:12px; font-weight:700;
  padding:1px 7px; border-radius:var(--tp-r-btn); background:var(--tp-surf-2); color:var(--tp-mute);
}
.seg-btn.is-on{background:var(--tp-ink); border-color:var(--tp-ink); color:var(--tp-surf)}
.seg-btn.is-on .n{background:var(--tp-surf); color:var(--tp-ink)}

/* ---------- section titles ---------- */
.section-title{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:6px 0 10px; font-size:12px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tp-mute);
}
.section-title button{
  border:0; background:none; color:var(--tp-acc-2); font-size:12.5px; font-weight:800; cursor:pointer;
  letter-spacing:.02em; text-transform:none; min-height:44px; padding:0 4px;
}

/* ---------- reminders rail (stories) ---------- */
.rail{display:flex; gap:10px; overflow-x:auto; padding:2px 16px 6px; margin:0 -16px; scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail-card{
  flex:none; width:172px; text-align:left; cursor:pointer;
  background:var(--tp-surf); border:var(--tp-bw) solid var(--tp-line);
  border-radius:var(--tp-r); padding:12px; box-shadow:var(--tp-sh-sm);
  transition:transform var(--tp-dur) var(--tp-ease);
}
.rail-card:active{transform:scale(var(--tp-press))}
.rail-card.is-due{border-color:var(--tp-acc-2)}
.rail-when{
  display:flex; align-items:center; gap:6px; font-family:var(--tp-font-mono);
  font-size:11.5px; font-weight:700; color:var(--tp-acc-2); margin-bottom:6px;
}
.rail-when svg{width:14px; height:14px}
.rail-name{
  display:block; font-family:var(--tp-font-display); font-size:17px; line-height:1.15;
  margin-bottom:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rail-desc{
  display:-webkit-box; font-size:12.5px; color:var(--tp-mute); line-height:1.35;
  height:2.7em; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.rail-empty{
  flex:none; width:100%; padding:14px 16px; border-radius:var(--tp-r);
  background:var(--tp-surf-2); color:var(--tp-mute); font-size:13px;
}
/* ---------- order card (feed post) ---------- */
.order-list{display:flex; flex-direction:column; gap:12px}
.order-card{
  position:relative; display:flex; gap:12px; width:100%; text-align:left; cursor:pointer;
  background:var(--tp-surf); border:var(--tp-bw) solid var(--tp-line);
  border-radius:var(--tp-r); padding:12px; box-shadow:var(--tp-sh-sm);
  transition:transform var(--tp-dur) var(--tp-ease);
}
.order-card:active{transform:scale(.985)}
.order-card.is-urgent{border-color:var(--tp-acc-2)}
.oc-photo{
  width:86px; height:86px; flex:none; position:relative; overflow:hidden;
  border-radius:var(--tp-img-r); aspect-ratio:var(--tp-img-ar);
  border:var(--tp-img-frame); box-shadow:var(--tp-img-sh);
  background:var(--tp-grad); display:grid; place-items:center;
}
.oc-photo img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:var(--tp-img-filter); transform:rotate(var(--tp-img-tilt));
}
.oc-photo .mark{width:46%; height:46%; opacity:.9}
.oc-photo::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:var(--tp-grad); opacity:var(--tp-img-overlay-op); mix-blend-mode:var(--tp-img-blend);
}
.oc-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:6px}
.oc-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.oc-name{
  font-family:var(--tp-font-display); font-weight:var(--tp-w-display);
  font-size:19px; line-height:1.15; margin:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;
}
.oc-actions{display:flex; gap:6px; flex:none}
.oc-price{text-align:right; flex:none}
.oc-price .sum{
  font-family:var(--tp-font-mono); font-size:15px; font-weight:700; white-space:nowrap;
}
.oc-price .debt{
  font-family:var(--tp-font-mono); font-size:11.5px; font-weight:700;
  color:var(--tp-acc-2); white-space:nowrap;
}
.oc-price .debt.is-paid{color:var(--tp-mute)}
.oc-chips{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.oc-desc{
  font-size:13.5px; color:var(--tp-mute); line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  word-break:break-word;
}
.oc-meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:2px}
.oc-when{
  display:inline-flex; align-items:center; gap:5px; font-family:var(--tp-font-mono);
  font-size:12px; font-weight:700; color:var(--tp-mute);
}
.oc-when svg{width:14px; height:14px}
.oc-when.is-urgent{color:var(--tp-acc-2)}
.oc-when.is-late{color:var(--tp-acc-2); text-decoration:line-through}

/* ---------- chips & badges ---------- */
.chip{
  display:inline-flex; align-items:center; gap:5px; min-height:30px; padding:5px 11px;
  border-radius:var(--tp-r-btn); border:var(--tp-bw) solid var(--tp-line);
  background:var(--tp-surf-2); color:var(--tp-ink); font-size:12px; font-weight:800;
  font-family:inherit; cursor:pointer; white-space:nowrap;
  transition:transform var(--tp-dur) var(--tp-ease);
}
.chip:active{transform:scale(var(--tp-press))}
.chip svg{width:14px; height:14px; flex:none}
.chip.is-plain{cursor:default}
.chip.is-acc{background:var(--tp-acc); border-color:var(--tp-acc); color:var(--tp-acc-ink)}
.chip.is-alert{background:transparent; border-color:var(--tp-acc-2); color:var(--tp-acc-2)}
.chip.is-quiet{background:transparent; color:var(--tp-mute)}
.badge{
  display:inline-flex; align-items:center; gap:6px; min-height:30px; padding:5px 12px;
  border-radius:var(--tp-r-btn); border:var(--tp-bw) solid transparent;
  font-size:12px; font-weight:800; cursor:pointer; font-family:inherit; white-space:nowrap;
}
.badge::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.badge.new{background:var(--tp-surf-2); color:var(--tp-ink)}
.badge.progress{background:var(--tp-grad); color:var(--tp-acc-ink)}
.badge.ready{background:var(--tp-acc); color:var(--tp-acc-ink)}
.badge.done{background:transparent; border-color:var(--tp-line); color:var(--tp-mute); opacity:.85}

/* ---------- contact tiles ---------- */
.contact-grid{display:flex; flex-wrap:wrap; gap:10px}
.c-tile{
  width:64px; display:flex; flex-direction:column; align-items:center; gap:6px;
  border:0; background:none; cursor:pointer; padding:0;
}
.c-ico{
  width:52px; height:52px; border-radius:var(--tp-r-sm); display:grid; place-items:center;
  box-shadow:var(--tp-sh-sm); overflow:hidden; position:relative;
  transition:transform var(--tp-dur) var(--tp-ease);
}
.c-ico svg{width:27px; height:27px; position:relative; z-index:1}
.c-tile:active .c-ico{transform:scale(.9)}
.c-tile .lbl{font-size:10.5px; font-weight:800; color:var(--tp-mute); text-align:center; line-height:1.2}
.c-ico.call{background:linear-gradient(145deg,var(--cb-call-a),var(--cb-call-b))}
.c-ico.wa{background:linear-gradient(145deg,var(--cb-wa-a),var(--cb-wa-b))}
.c-ico.viber{background:linear-gradient(145deg,var(--cb-viber-a),var(--cb-viber-b))}
.c-ico.tg{background:linear-gradient(145deg,var(--cb-tg-a),var(--cb-tg-b))}
.c-ico.vk{background:linear-gradient(145deg,var(--cb-vk-a),var(--cb-vk-b))}
.c-ico.mail{background:linear-gradient(145deg,var(--cb-mail-a),var(--cb-mail-b))}
.c-ico.ig{background:linear-gradient(135deg,var(--cb-ig-1),var(--cb-ig-2) 30%,var(--cb-ig-3) 55%,var(--cb-ig-4) 75%,var(--cb-ig-5))}
.c-ico.max{background:var(--tp-surf)}
.c-ico.max svg{width:52px; height:52px}
.c-mini{
  width:32px; height:32px; flex:none; border:0; padding:0; border-radius:9px;
  display:grid; place-items:center; cursor:pointer; overflow:hidden;
  transition:transform var(--tp-dur) var(--tp-ease);
}
.c-mini:active{transform:scale(.88)}
.c-mini svg{width:17px; height:17px}
.c-mini.max svg{width:32px; height:32px}
.c-mini.call{background:linear-gradient(145deg,var(--cb-call-a),var(--cb-call-b))}
.c-mini.wa{background:linear-gradient(145deg,var(--cb-wa-a),var(--cb-wa-b))}
.c-mini.viber{background:linear-gradient(145deg,var(--cb-viber-a),var(--cb-viber-b))}
.c-mini.tg{background:linear-gradient(145deg,var(--cb-tg-a),var(--cb-tg-b))}
.c-mini.vk{background:linear-gradient(145deg,var(--cb-vk-a),var(--cb-vk-b))}
.c-mini.mail{background:linear-gradient(145deg,var(--cb-mail-a),var(--cb-mail-b))}
.c-mini.ig{background:linear-gradient(135deg,var(--cb-ig-1),var(--cb-ig-2) 30%,var(--cb-ig-3) 55%,var(--cb-ig-4) 75%,var(--cb-ig-5))}
.c-mini.max{background:var(--tp-surf-2)}
.c-mini.tiny{width:24px; height:24px; border-radius:7px}
.c-mini.tiny svg{width:13px; height:13px}
.c-mini.tiny.max svg{width:24px; height:24px}

/* ---------- bottom nav (fab archetype) ---------- */
.nav-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:var(--tp-surf); border-top:var(--tp-bw) solid var(--tp-line);
  padding:6px 8px calc(6px + env(safe-area-inset-bottom));
  box-shadow:0 -8px 24px rgba(90,50,20,.08);
}
.nav-inner{
  max-width:560px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr auto 1fr 1fr;
  align-items:end; gap:2px;
}
.nav-item{
  position:relative; border:0; background:none; cursor:pointer; padding:8px 2px 6px;
  display:flex; flex-direction:column; align-items:center; gap:4px; min-height:52px;
  color:var(--tp-mute); font-size:10.5px; font-weight:800;
  transition:color var(--tp-dur) linear, transform var(--tp-dur) var(--tp-ease);
}
.nav-item:active{transform:scale(var(--tp-press))}
.nav-item svg{width:23px; height:23px}
.nav-item.is-on{color:var(--tp-ink)}
.nav-item .n{
  position:absolute; top:4px; right:calc(50% - 22px); min-width:18px; height:18px; padding:0 5px;
  border-radius:var(--tp-r-btn); background:var(--tp-acc-2); color:var(--tp-acc-ink);
  font-family:var(--tp-font-mono); font-size:10.5px; font-weight:700; line-height:18px; text-align:center;
}
.nav-fab{
  justify-self:center; align-self:center; margin-bottom:14px;
  width:62px; height:62px; border-radius:50%; border:4px solid var(--tp-surf);
  background:var(--tp-acc); color:var(--tp-acc-ink); cursor:pointer;
  display:grid; place-items:center; box-shadow:var(--tp-sh);
  transition:transform var(--tp-dur) var(--tp-ease);
}
.nav-fab:active{transform:scale(.92)}
.nav-fab svg{width:28px; height:28px}

/* ---------- sheets ---------- */
.sheet-overlay{
  position:fixed; inset:0; z-index:60; display:none; align-items:flex-end; justify-content:center;
  background:rgba(58,34,18,.42);
}
.sheet-overlay.is-open{display:flex}
.sheet-panel{
  width:100%; max-width:560px; max-height:92vh; overflow:hidden;
  display:flex; flex-direction:column;
  background:var(--tp-surf); border-radius:var(--tp-r-lg) var(--tp-r-lg) 0 0;
  padding:8px 18px calc(14px + env(safe-area-inset-bottom));
  box-shadow:var(--tp-sh); animation:tp-sheet var(--tp-dur-slow) var(--tp-ease) both;
}
.sheet-grab, .sheet-head{flex:none}
.sheet-body{
  flex:1 1 auto; min-height:0; overflow-y:auto;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  padding-bottom:4px;
}
.sheet-grab{width:44px; height:5px; border-radius:var(--tp-r-btn); background:var(--tp-line); margin:6px auto 14px}
.sheet-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px}
.sheet-title{font-family:var(--tp-font-display); font-weight:var(--tp-w-display); font-size:23px; line-height:1.15}
.sheet-sub{font-size:12.5px; color:var(--tp-mute); font-weight:700; margin-top:2px}
.sheet-close{
  width:44px; height:44px; flex:none; border-radius:var(--tp-r-btn); border:var(--tp-bw) solid var(--tp-line);
  background:var(--tp-bg); cursor:pointer; display:grid; place-items:center;
  transition:transform var(--tp-dur) var(--tp-ease);
}
.sheet-close:active{transform:scale(var(--tp-press))}
.sheet-close svg{width:19px; height:19px}

/* full-screen pushed view */
.page-screen{
  position:fixed; inset:0; z-index:50; background:var(--tp-bg); overflow-y:auto;
  animation:tp-up var(--tp-dur-slow) var(--tp-ease) both;
  padding-bottom:calc(96px + env(safe-area-inset-bottom));
}
.page-head{
  position:sticky; top:0; z-index:5; background:var(--tp-bg); border-bottom:var(--tp-bw) solid var(--tp-line);
  padding:calc(10px + env(safe-area-inset-top)) 16px 10px;
  display:flex; align-items:center; gap:10px;
}
.page-head .title{font-family:var(--tp-font-display); font-weight:var(--tp-w-display); font-size:21px; flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* ---------- forms ---------- */
.field{margin-bottom:14px}
.field > label{
  display:block; font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tp-mute); margin-bottom:6px;
}
/* Любое поле ввода, кроме флажков: атрибут type может быть не указан вовсе. */
.field input:not([type="checkbox"]):not([type="radio"]), .field textarea, .field select{
  width:100%; min-height:48px; padding:12px 14px;
  border-radius:var(--tp-r-sm); border:var(--tp-bw) solid var(--tp-line);
  background:var(--tp-surf); color:var(--tp-ink); font-size:15.5px;
}
.field input[type="checkbox"]{
  width:18px; height:18px; flex:none; margin:0; accent-color:var(--tp-acc);
}
.field input[type="file"]{display:none}
.field textarea{min-height:84px; resize:vertical; line-height:1.45}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:2px solid var(--tp-acc); outline-offset:1px;
}
.field .search-field{position:relative}
.field .search-field input{padding-left:42px}
.field .search-field svg{position:absolute; left:14px; width:18px; height:18px; color:var(--tp-mute); pointer-events:none}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.field-hint{font-size:12.5px; color:var(--tp-mute); margin-top:6px; line-height:1.4}
.field-hint.is-warn{color:var(--tp-acc-2); font-weight:700}

/* date trigger (opens calendar) */
.date-trigger{
  width:100%; min-height:48px; text-align:left; padding:12px 14px;
  border-radius:var(--tp-r-sm); border:var(--tp-bw) solid var(--tp-line);
  background:var(--tp-surf); color:var(--tp-ink); font-size:15.5px; cursor:pointer;
  display:flex; align-items:center; gap:10px;
}
.date-trigger svg{width:18px; height:18px; color:var(--tp-mute); flex:none}
.date-trigger .val{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.date-trigger .val.is-empty{color:var(--tp-mute)}
.date-trigger:active{transform:scale(var(--tp-press))}

/* money pair */
.money-row{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.money-row .field{margin-bottom:0}
.debt-note{
  grid-column:1 / -1; font-size:12.5px; color:var(--tp-mute); font-weight:700; margin-top:8px;
}
.debt-note b{font-family:var(--tp-font-mono); color:var(--tp-acc-2)}

/* option chips (status / delivery / reminder) */
.opt-row{display:flex; flex-wrap:wrap; gap:8px}
.opt{
  min-height:44px; padding:10px 14px; border-radius:var(--tp-r-btn);
  border:var(--tp-bw) solid var(--tp-line); background:var(--tp-surf); color:var(--tp-mute);
  font-size:13.5px; font-weight:800; cursor:pointer; white-space:nowrap; font-family:inherit;
  transition:transform var(--tp-dur) var(--tp-ease), background var(--tp-dur) linear;
}
.opt:active{transform:scale(var(--tp-press))}
.opt svg{width:18px; height:18px}
.opt{display:inline-flex; align-items:center; gap:7px}
.opt.is-on{background:var(--tp-ink); border-color:var(--tp-ink); color:var(--tp-surf)}
.opt.is-accent.is-on{background:var(--tp-acc); border-color:var(--tp-acc); color:var(--tp-acc-ink)}

/* priority channel picker rows */
.pick-row{
  display:flex; align-items:center; gap:12px; min-height:56px; padding:8px 2px;
  border-bottom:var(--tp-bw) solid var(--tp-line); cursor:pointer;
}
.pick-row:last-child{border-bottom:0}
.pick-row .grow{flex:1; min-width:0}
.pick-row .t{font-size:14.5px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pick-row .s{font-size:12.5px; color:var(--tp-mute); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.star{
  width:44px; height:44px; flex:none; border-radius:var(--tp-r-btn); border:var(--tp-bw) solid var(--tp-line);
  background:var(--tp-surf); display:grid; place-items:center; cursor:pointer;
}
.star svg{width:20px; height:20px; color:var(--tp-line)}
.star.is-on{border-color:var(--tp-acc); background:var(--tp-acc); }
.star.is-on svg{color:var(--tp-acc-ink)}

/* photo row in sheets */
.photo-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:4px}
.photo-thumb{position:relative; width:84px; height:84px; border-radius:var(--tp-img-r); overflow:hidden; background:var(--tp-surf-2)}
.photo-thumb img{width:100%; height:100%; object-fit:cover; display:block; filter:var(--tp-img-filter)}
.photo-thumb .rm{
  position:absolute; top:4px; right:4px; width:26px; height:26px; border-radius:var(--tp-r-btn);
  border:0; background:rgba(58,34,18,.62); color:var(--tp-surf); font-size:15px; line-height:1; cursor:pointer;
}
.add-photo{
  width:84px; height:84px; border-radius:var(--tp-img-r); cursor:pointer;
  border:2px dashed var(--tp-line); background:transparent; color:var(--tp-mute);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.add-photo svg{width:22px; height:22px}
.add-photo span{font-size:10.5px; font-weight:800}

/* ---------- buttons ---------- */
.btn{
  min-height:50px; padding:13px 20px; border-radius:var(--tp-r-btn); border:var(--tp-bw) solid transparent;
  font-size:15px; font-weight:800; cursor:pointer; font-family:inherit;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  transition:transform var(--tp-dur) var(--tp-ease);
}
.btn:active{transform:scale(var(--tp-press))}
.btn svg{width:19px; height:19px; flex:none}
.btn.is-primary{background:var(--tp-acc); color:var(--tp-acc-ink); box-shadow:var(--tp-sh-sm)}
.btn.is-ink{background:var(--tp-ink); color:var(--tp-surf)}
.btn.is-ghost{background:var(--tp-surf); border-color:var(--tp-line); color:var(--tp-ink)}
.btn.is-quiet{background:transparent; color:var(--tp-mute); border-color:var(--tp-line)}
.btn.is-danger{background:transparent; border-color:var(--tp-acc-2); color:var(--tp-acc-2)}
.btn.is-block{width:100%}
.btn-row{display:flex; gap:10px; margin-top:16px}
.btn-row .btn{flex:1}

/* pinned action bar at the bottom of a sheet */
.sheet-actions{
  flex:none; margin:0 -18px; padding:14px 18px 0;
  background:var(--tp-surf); border-top:var(--tp-bw) solid var(--tp-line);
}
.sheet-actions .btn-row{margin-top:0}

/* ---------- client card tabs ---------- */
.tab-switch{
  display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:6px;
  background:var(--tp-surf-2); border-radius:var(--tp-r-btn); margin:14px 0 16px;
}
.tab-switch button{
  min-height:44px; border:0; background:none; border-radius:var(--tp-r-btn);
  font-size:14px; font-weight:800; color:var(--tp-mute); cursor:pointer; font-family:inherit;
  transition:background var(--tp-dur) linear, color var(--tp-dur) linear;
}
.tab-switch button.is-on{background:var(--tp-surf); color:var(--tp-ink); box-shadow:var(--tp-sh-sm)}

/* ---------- stats ---------- */
.hero-num{
  font-family:var(--tp-font-mono); font-size:44px; font-weight:700; line-height:1;
  letter-spacing:-.02em; color:var(--tp-ink);
}
.hero-num small{font-size:16px; font-weight:700; color:var(--tp-mute); margin-left:4px}
.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.stat-tile{
  background:var(--tp-surf); border:var(--tp-bw) solid var(--tp-line); border-radius:var(--tp-r);
  padding:14px; box-shadow:var(--tp-sh-sm);
}
.stat-tile .k{font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--tp-mute)}
.stat-tile .v{font-family:var(--tp-font-mono); font-size:22px; font-weight:700; margin-top:6px}
.stat-tile .v.is-alert{color:var(--tp-acc-2)}
.stat-tile .n{font-size:12.5px; color:var(--tp-mute); margin-top:3px}
.stat-card{
  background:var(--tp-surf); border:var(--tp-bw) solid var(--tp-line); border-radius:var(--tp-r-lg);
  padding:18px; box-shadow:var(--tp-sh-sm); margin-bottom:14px;
}
.stat-card h3{font-family:var(--tp-font-display); font-weight:var(--tp-w-display); font-size:21px; margin-bottom:12px}
.bar-row{display:grid; grid-template-columns:104px 1fr 54px; align-items:center; gap:10px; margin-bottom:10px}
.bar-row .k{font-size:12.5px; font-weight:800; color:var(--tp-mute); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bar-row .track{height:12px; border-radius:var(--tp-r-btn); background:var(--tp-surf-2); overflow:hidden}
.bar-row .fill{height:100%; border-radius:var(--tp-r-btn); background:var(--tp-grad); transform-origin:left center; animation:tp-bar var(--tp-dur-slow) var(--tp-ease) both}
.bar-row .v{font-family:var(--tp-font-mono); font-size:12.5px; font-weight:700; text-align:right}

/* workload chart */
.wl-wrap{overflow-x:auto; margin:0 -18px; padding:0 18px 6px}
.wl-chart{display:flex; align-items:flex-end; gap:7px; height:168px}
.wl-col{display:flex; flex-direction:column; align-items:center; width:30px; flex:none; height:100%}
.wl-n{font-family:var(--tp-font-mono); font-size:10.5px; font-weight:700; color:var(--tp-ink); min-height:14px}
.wl-track{flex:1; width:16px; background:var(--tp-surf-2); border-radius:var(--tp-r-btn); display:flex; align-items:flex-end; overflow:hidden}
.wl-fill{width:100%; background:var(--tp-grad); border-radius:var(--tp-r-btn); min-height:3px; transition:height var(--tp-dur) var(--tp-ease)}
.wl-lbl{font-size:9.5px; color:var(--tp-mute); text-align:center; margin-top:5px; line-height:1.2}
.wl-lbl.is-today{color:var(--tp-acc-2); font-weight:800}
.wl-lbl .d{font-family:var(--tp-font-mono); display:block; font-weight:700}

/* client rows */
.client-row{
  width:100%; text-align:left; cursor:pointer; background:var(--tp-surf);
  border:var(--tp-bw) solid var(--tp-line); border-radius:var(--tp-r);
  padding:13px; box-shadow:var(--tp-sh-sm); margin-bottom:10px;
  transition:transform var(--tp-dur) var(--tp-ease);
}
.client-row:active{transform:scale(.99)}
.cr-top{display:flex; align-items:center; gap:9px}
.cr-rank{
  width:26px; height:26px; flex:none; border-radius:var(--tp-r-btn); background:var(--tp-surf-2);
  font-family:var(--tp-font-mono); font-size:11.5px; font-weight:700; color:var(--tp-mute);
  display:grid; place-items:center;
}
.cr-name{
  font-family:var(--tp-font-display); font-weight:var(--tp-w-display); font-size:18px; flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cr-sub{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:6px 0 0 35px}
.cr-phone{font-family:var(--tp-font-mono); font-size:12.5px; color:var(--tp-mute)}
.cr-ch{display:flex; gap:4px}
.cr-stats{display:flex; gap:18px; margin:10px 0 0 35px}
.cr-stats .s .k{font-size:11px; color:var(--tp-mute)}
.cr-stats .s .v{font-family:var(--tp-font-mono); font-size:14.5px; font-weight:700}
.cr-stats .s .v.is-alert{color:var(--tp-acc-2)}

/* order row inside client card */
.mini-order{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left; cursor:pointer;
  background:var(--tp-surf); border:var(--tp-bw) solid var(--tp-line); border-radius:var(--tp-r-sm);
  padding:11px 12px; margin-bottom:8px;
  transition:transform var(--tp-dur) var(--tp-ease);
}
.mini-order:active{transform:scale(.99)}
.mini-order .ph{
  width:46px; height:46px; flex:none; border-radius:var(--tp-img-r); overflow:hidden;
  background:var(--tp-grad); display:grid; place-items:center; position:relative;
}
.mini-order .ph img{width:100%; height:100%; object-fit:cover; display:block; filter:var(--tp-img-filter)}
.mini-order .ph .mark{width:50%; height:50%; opacity:.9}
.mini-order .txt{flex:1; min-width:0}
.mini-order .t{font-size:14px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mini-order .s{font-family:var(--tp-font-mono); font-size:11.5px; color:var(--tp-mute); margin-top:2px}
.mini-order .r{text-align:right; flex:none}
.mini-order .r .sum{font-family:var(--tp-font-mono); font-size:13.5px; font-weight:700; white-space:nowrap}
.mini-order .r .d{font-family:var(--tp-font-mono); font-size:11px; font-weight:700; color:var(--tp-acc-2)}
.mini-order .r .d.is-paid{color:var(--tp-mute)}
/* ---------- calendar ---------- */
.cal-overlay{
  position:fixed; inset:0; z-index:70; display:none; align-items:center; justify-content:center;
  padding:16px; background:rgba(58,34,18,.5);
}
.cal-overlay.is-open{display:flex}
.cal-box{
  width:min(92vw, 340px); max-height:88vh; overflow-y:auto; box-sizing:border-box;
  background:var(--tp-surf); border-radius:var(--tp-r-lg); padding:16px;
  box-shadow:var(--tp-sh); animation:tp-pop var(--tp-dur-slow) var(--tp-ease) both;
}
.cal-picked{
  text-align:center; font-weight:800; font-size:14px; color:var(--tp-acc-ink);
  background:var(--tp-acc); border-radius:var(--tp-r-sm); padding:9px; margin-bottom:12px; text-transform:capitalize;
}
.cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.cal-month{font-weight:800; font-size:15px; text-transform:capitalize}
.cal-nav{
  width:44px; height:44px; border-radius:var(--tp-r-btn); border:var(--tp-bw) solid var(--tp-line);
  background:var(--tp-surf); cursor:pointer; display:grid; place-items:center;
}
.cal-nav svg{width:18px; height:18px}
.cal-grid{display:grid; grid-template-columns:repeat(7, 1fr); gap:2px}
.cal-dow{
  height:26px; display:grid; place-items:center; font-size:11px; font-weight:800; color:var(--tp-mute);
}
.cal-cell{
  min-height:40px; border:0; background:none; border-radius:var(--tp-r-sm); cursor:pointer;
  font-size:13.5px; font-weight:700; color:var(--tp-ink); font-family:inherit;
  display:grid; place-items:center;
}
.cal-cell.is-empty{cursor:default}
.cal-cell.is-today{border:var(--tp-bw) solid var(--tp-acc-2)}
.cal-cell.is-sel{background:var(--tp-ink); color:var(--tp-surf)}
.cal-time{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; padding-top:12px; border-top:var(--tp-bw) solid var(--tp-line)}
.cal-time label{font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--tp-mute)}
.cal-time input{
  min-height:44px; padding:8px 12px; border-radius:var(--tp-r-sm);
  border:var(--tp-bw) solid var(--tp-line); background:var(--tp-surf); color:var(--tp-ink);
  font-family:var(--tp-font-mono); font-size:15px;
}
.cal-quick{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:80; display:none; align-items:center; justify-content:center;
  background:rgba(26,14,8,.94); padding:16px;
}
.lightbox.is-open{display:flex}
.lightbox img{max-width:94vw; max-height:86vh; border-radius:var(--tp-r); box-shadow:var(--tp-sh)}
.lightbox-close{
  position:absolute; top:calc(16px + env(safe-area-inset-top)); right:16px;
  width:46px; height:46px; border-radius:var(--tp-r-btn); border:0;
  background:rgba(255,250,241,.18); color:var(--tp-surf); cursor:pointer; display:grid; place-items:center;
}
.lightbox-close svg{width:22px; height:22px}

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:calc(112px + env(safe-area-inset-bottom)); transform:translate(-50%, 12px);
  z-index:90; max-width:min(92vw, 420px); pointer-events:none; opacity:0;
  background:var(--tp-ink); color:var(--tp-surf); border-radius:var(--tp-r-btn);
  padding:12px 18px; font-size:14px; font-weight:700; box-shadow:var(--tp-sh);
  transition:opacity var(--tp-dur) linear, transform var(--tp-dur) var(--tp-ease);
}
.toast.is-on{opacity:1; transform:translate(-50%, 0)}

/* reminder banner (in-app push) */
.banner{
  display:flex; align-items:center; gap:12px; margin-bottom:12px;
  background:var(--tp-surf); border:var(--tp-bw) solid var(--tp-acc-2); border-radius:var(--tp-r);
  padding:13px; box-shadow:var(--tp-sh-sm);
}
.banner .ico{
  width:44px; height:44px; flex:none; border-radius:var(--tp-r-sm); background:var(--tp-acc-2);
  color:var(--tp-acc-ink); display:grid; place-items:center;
}
.banner .ico svg{width:22px; height:22px}
.banner .txt{flex:1; min-width:0}
.banner .t{font-weight:800; font-size:14px}
.banner .s{font-size:12.5px; color:var(--tp-mute); margin-top:2px}
.banner button{
  min-height:44px; padding:10px 14px; border-radius:var(--tp-r-btn); border:var(--tp-bw) solid var(--tp-line);
  background:var(--tp-bg); font-size:13px; font-weight:800; cursor:pointer;
}

/* ---------- drive / auth ---------- */
.card{
  background:var(--tp-surf); border:var(--tp-bw) solid var(--tp-line); border-radius:var(--tp-r-lg);
  padding:16px; box-shadow:var(--tp-sh-sm); margin-bottom:14px;
}
.card h3{font-family:var(--tp-font-display); font-weight:var(--tp-w-display); font-size:21px; margin-bottom:6px}
.card p{margin:0; font-size:13px; color:var(--tp-mute); line-height:1.45}
.card .hint{font-size:12.5px; color:var(--tp-mute); margin-top:10px; line-height:1.4}
.card .hint.is-warn{color:var(--tp-acc-2); font-weight:700}
.auth-user{display:flex; align-items:center; gap:12px}
.auth-avatar{
  width:48px; height:48px; flex:none; border-radius:50%; object-fit:cover;
  border:var(--tp-bw) solid var(--tp-line); background:var(--tp-surf-2);
  display:grid; place-items:center; font-weight:800; font-size:18px; color:var(--tp-mute);
}
.auth-who{flex:1; min-width:0}
.auth-name{font-weight:800; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.auth-mail{font-size:12.5px; color:var(--tp-mute); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gbtn{
  width:100%; min-height:50px; display:flex; align-items:center; justify-content:center; gap:11px;
  border-radius:var(--tp-r-btn); border:1px solid var(--g-border); background:#fff; color:var(--g-text);
  font-size:15px; font-weight:700; cursor:pointer; box-shadow:0 1px 2px rgba(60,64,67,.14);
  transition:transform var(--tp-dur) var(--tp-ease), background 120ms linear;
}
.gbtn:hover{background:var(--g-hover)}
.gbtn:active{transform:scale(var(--tp-press))}
.gbtn svg{width:20px; height:20px; flex:none}
.drive-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.drive-actions .btn{flex:1 1 46%}

/* ---------- import ---------- */
.drop{
  border:2px dashed var(--tp-line); border-radius:var(--tp-r); background:var(--tp-surf);
  padding:22px 16px; text-align:center; cursor:pointer;
}
.drop svg{width:34px; height:34px; color:var(--tp-acc); margin-bottom:8px}
.drop .t{font-weight:800; font-size:15px}
.drop .s{font-size:12.5px; color:var(--tp-mute); margin-top:4px}
.imp-list{
  max-height:230px; overflow-y:auto; border:var(--tp-bw) solid var(--tp-line);
  border-radius:var(--tp-r-sm); margin:12px 0; background:var(--tp-bg);
}
.imp-row{display:flex; gap:10px; padding:10px 12px; border-bottom:var(--tp-bw) solid var(--tp-line); font-size:13px}
.imp-row:last-child{border-bottom:0}
.imp-row .n{font-weight:800; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.imp-row .d{font-family:var(--tp-font-mono); font-size:11.5px; color:var(--tp-mute); flex:none}
.imp-row .tag{font-size:11px; font-weight:800; padding:2px 8px; border-radius:var(--tp-r-btn); background:var(--tp-surf-2); flex:none}
.imp-row .tag.is-new{background:var(--tp-acc); color:var(--tp-acc-ink)}
.imp-row.is-bad{opacity:.6}

/* ---------- empty & skeleton ---------- */
.empty{
  text-align:center; padding:34px 20px; background:var(--tp-surf);
  border:var(--tp-bw) dashed var(--tp-line); border-radius:var(--tp-r-lg);
}
.empty .logo{width:104px; height:104px; border-radius:var(--tp-r); object-fit:cover; margin-bottom:12px; filter:var(--tp-img-filter)}
.empty .mark{width:74px; height:74px; opacity:.25; margin-bottom:10px}
.empty .t{font-family:var(--tp-font-display); font-weight:var(--tp-w-display); font-size:20px; margin-bottom:6px}
.empty .s{font-size:13.5px; color:var(--tp-mute); line-height:1.5; max-width:330px; margin:0 auto}
.skel{background:var(--tp-surf-2); border-radius:var(--tp-r-sm); position:relative; overflow:hidden}
.skel::after{
  content:""; position:absolute; inset:0; mix-blend-mode:soft-light;
  background:linear-gradient(90deg, transparent, rgba(255,250,241,.9), transparent);
  background-size:60% 100%; background-repeat:no-repeat; animation:tp-shimmer 1.4s linear infinite;
}
.skel-card{height:110px; border-radius:var(--tp-r); margin-bottom:12px}
.skel-line{height:14px; margin-bottom:8px}

/* ---------- desktop shell ---------- */
@media (min-width:900px){
  body{font-size:15.5px}
  .page-screen{padding-bottom:40px}
  .shell{max-width:760px}
  .app-header .bar, .search-wrap, .segmented, .nav-inner{max-width:760px}
  .nav-fab{width:56px; height:56px; margin-bottom:10px}
  .order-list{display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:14px; align-items:start}
  .stat-grid{grid-template-columns:repeat(4, 1fr)}
  .contact-grid{gap:12px}
}