/* APP-DESIGN-r1 — KARETA mobile app design system.
   Scope: shared variables and reusable classes for the new reference-style app screens.
   This file is additive. It does not rewrite existing pages by itself.
*/
:root{
  --k-bg:#f7f7f8;
  --k-screen:#ffffff;
  --k-surface:#ffffff;
  --k-surface-soft:#f2f2f3;
  --k-surface-2:#fafafa;
  --k-text:#111111;
  --k-muted:#707070;
  --k-light:#a8a8a8;
  --k-yellow:#ffc400;
  --k-yellow-dark:#f4b400;
  --k-green:#29b35a;
  --k-red:#ef4444;
  --k-blue:#3b82f6;
  --k-border:#e8e8ea;
  --k-shadow:0 10px 30px rgba(0,0,0,.08);
  --k-card-shadow:0 4px 16px rgba(0,0,0,.055);
  --k-radius-sm:10px;
  --k-radius:14px;
  --k-radius-lg:20px;
  --k-radius-xl:28px;
  --k-font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

.k-app-screen{
  width:100%;
  max-width:430px;
  min-height:100dvh;
  margin:0 auto;
  background:var(--k-screen);
  color:var(--k-text);
  position:relative;
  padding:18px 16px calc(88px + env(safe-area-inset-bottom));
  font-family:var(--k-font);
}
.k-app-screen--gray{background:var(--k-bg)}
.k-app-header{
  min-height:44px;
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.k-app-back,
.k-app-icon-btn{
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--k-text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  cursor:pointer;
}
.k-app-title{
  flex:1;
  margin:0;
  font-size:18px;
  font-weight:850;
  line-height:1.2;
}
.k-app-logo{
  font-size:24px;
  font-weight:900;
  letter-spacing:-.7px;
  line-height:1;
}
.k-app-logo span{color:var(--k-yellow-dark)}
.k-app-hero-title{
  margin:18px 0 14px;
  font-size:24px;
  font-weight:900;
  line-height:1.08;
  letter-spacing:-.5px;
}
.k-app-section{margin-top:22px}
.k-app-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
  gap:12px;
}
.k-app-section-title{
  margin:0;
  font-size:16px;
  font-weight:850;
}
.k-app-section-link{
  border:0;
  background:transparent;
  color:var(--k-muted);
  font-size:13px;
  font-weight:750;
  cursor:pointer;
}
.k-app-search{
  display:flex;
  gap:8px;
  margin:12px 0 20px;
}
.k-app-search__field{
  flex:1;
  height:44px;
  border:0;
  outline:0;
  border-radius:var(--k-radius);
  background:var(--k-surface-soft);
  padding:0 14px;
  font-size:14px;
  color:var(--k-text);
}
.k-app-search__field::placeholder{color:var(--k-light)}
.k-app-search__btn,
.k-app-btn{
  border:0;
  cursor:pointer;
  border-radius:var(--k-radius);
  font-weight:850;
  transition:transform .12s ease,background .12s ease,opacity .12s ease;
}
.k-app-search__btn{
  width:48px;
  height:44px;
  background:var(--k-yellow);
  color:#111;
  font-size:18px;
}
.k-app-btn{
  width:100%;
  min-height:48px;
  padding:0 18px;
  background:var(--k-yellow);
  color:#111;
  font-size:15px;
}
.k-app-btn:active,
.k-app-search__btn:active{transform:scale(.98)}
.k-app-btn--outline{background:#fff;border:1px solid var(--k-border)}
.k-app-btn--danger{color:var(--k-red);background:#fff;border:1px solid rgba(239,68,68,.4)}
.k-app-btn-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.k-app-category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.k-app-category{
  min-height:86px;
  border:0;
  border-radius:var(--k-radius);
  background:linear-gradient(180deg,#f8f8f9,#f1f1f2);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  color:var(--k-text);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.02);
  cursor:pointer;
}
.k-app-category__icon{width:30px;height:30px;display:flex;align-items:center;justify-content:center}
.k-app-category__label{font-size:13px;font-weight:850}
.k-app-card{
  background:var(--k-surface);
  border:1px solid var(--k-border);
  border-radius:var(--k-radius-lg);
  box-shadow:var(--k-card-shadow);
  padding:14px;
}
.k-app-list-card{
  display:grid;
  grid-template-columns:52px 1fr 18px;
  gap:12px;
  align-items:center;
  margin-bottom:10px;
}
.k-app-list-card__icon{
  width:52px;
  height:52px;
  border-radius:var(--k-radius);
  background:var(--k-surface-soft);
  display:flex;
  align-items:center;
  justify-content:center;
}
.k-app-list-card__title{margin:0 0 4px;font-size:15px;font-weight:850;line-height:1.2}
.k-app-list-card__text{margin:0 0 5px;color:var(--k-muted);font-size:12px;line-height:1.35}
.k-app-list-card__price{font-size:13px;font-weight:850}
.k-app-chevron{color:var(--k-muted);font-size:20px}
.k-app-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:14px;scrollbar-width:none}
.k-app-chips::-webkit-scrollbar{display:none}
.k-app-chip{
  border:0;
  white-space:nowrap;
  height:34px;
  padding:0 14px;
  border-radius:999px;
  background:var(--k-surface-soft);
  color:var(--k-text);
  font-size:13px;
  font-weight:850;
}
.k-app-chip.is-active{background:var(--k-yellow)}
.k-app-status{display:inline-flex;align-items:center;min-height:24px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:850}
.k-app-status--work{color:#8a5c00;background:#fff1bd}
.k-app-status--wait{color:#9a4b00;background:#ffe1c2}
.k-app-status--done{color:#14783a;background:#dff7e8}
.k-app-status--blue{color:#1d5fbf;background:#e4f0ff}
.k-app-form{display:grid;gap:13px}
.k-app-field{display:grid;gap:7px}
.k-app-field__label{font-size:13px;font-weight:850}
.k-app-input,
.k-app-textarea,
.k-app-select-like{
  width:100%;
  border:1px solid var(--k-border);
  border-radius:var(--k-radius);
  background:#fff;
  min-height:45px;
  padding:0 13px;
  color:var(--k-text);
  font-size:14px;
  outline:0;
}
.k-app-textarea{min-height:108px;resize:vertical;padding-top:12px;line-height:1.45}
.k-app-select-like{display:flex;align-items:center;justify-content:space-between;text-align:left}
.k-app-timeline{position:relative;display:grid;gap:22px;margin:18px 0 28px}
.k-app-timeline__item{position:relative;display:grid;grid-template-columns:30px 1fr;gap:12px}
.k-app-timeline__item::before{content:"";position:absolute;left:14px;top:30px;bottom:-22px;width:2px;background:var(--k-border)}
.k-app-timeline__item:last-child::before{display:none}
.k-app-timeline__dot{width:30px;height:30px;border-radius:50%;border:2px solid var(--k-border);background:#fff;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:900}
.k-app-timeline__item.is-done .k-app-timeline__dot{background:var(--k-green);border-color:var(--k-green)}
.k-app-timeline__item.is-active .k-app-timeline__dot{background:var(--k-yellow);border-color:var(--k-yellow);color:#111}
.k-app-timeline__title{margin:0 0 4px;font-size:15px;font-weight:850}
.k-app-timeline__meta{margin:0;color:var(--k-muted);font-size:13px}
@media (min-width:768px){
  .k-app-screen{border-radius:28px;box-shadow:var(--k-shadow);min-height:min(900px,100dvh);margin:24px auto;background:#fff}
}