/* ===== ТРЕНДОВАЯ ПАЛИТРА ===== */
:root{
  /* молочно-кремовая база с тёплым оттенком */
  --bg:#fbf7f1;
  --bg-2:#f3ecfb;
  --surface:rgba(255,255,255,.72);
  --surface-solid:#ffffff;
  --ink:#241b34;
  --ink-soft:#5a4f6b;
  --muted:#8a819a;

  --line:rgba(110,90,160,.14);
  --line-soft:rgba(110,90,160,.08);

  /* насыщенные трендовые акценты */
  --lavender:#8b7bd6;
  --lavender-deep:#6c5dc4;
  --lavender-soft:#efebfb;
  --peach:#ff8a65;
  --peach-soft:#ffe2d5;
  --mint:#5fd0a8;
  --mint-soft:#d6f5e8;
  --pink:#ff7eb6;
  --pink-soft:#ffe1ee;
  --sun:#ffce5a;
  --sun-soft:#fff2cd;

  --primary:#7b5cf0;
  --primary-2:#a89bf0;
  --primary-grad:linear-gradient(135deg,#7b5cf0 0%,#b48bff 50%,#ff8ad1 100%);
  --accent-grad:linear-gradient(135deg,#ffd28a,#ff8ad1 60%,#7b5cf0);
  --warm-grad:linear-gradient(135deg,#ffd28a 0%,#ff8a9b 50%,#b48bff 100%);

  --danger:#e16f7d;
  --ok:#3cb088;

  --shadow-sm:0 2px 10px rgba(60,40,90,.06);
  --shadow:0 12px 32px rgba(80,55,160,.12);
  --shadow-lg:0 24px 60px rgba(80,55,160,.18);
  --ring:0 0 0 4px rgba(123,92,240,.16);

  --r-card:22px;
  --r-btn:14px;
  --r-pill:999px;
}

/* ===== ОБЩЕЕ ===== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,sans-serif;
  color:var(--ink);
  font-size:17px;
  line-height:1.5;
  min-height:100vh;
  background:
    radial-gradient(1200px 700px at -10% -20%, #ffe6f1 0%, transparent 55%),
    radial-gradient(900px 600px at 110% 10%, #e2e7ff 0%, transparent 60%),
    radial-gradient(800px 600px at 50% 110%, #ffe5cf 0%, transparent 55%),
    var(--bg);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* фон с плавающими цветными blob-формами */
.bg-blobs{
  position:fixed; inset:0;
  z-index:-1;
  pointer-events:none;
  overflow:hidden;
}
.blob{
  position:absolute;
  border-radius:50%;
  filter:blur(60px);
  opacity:.55;
  mix-blend-mode:multiply;
  animation: float 18s ease-in-out infinite;
}
.blob-1{ width:520px; height:520px; top:-120px; left:-140px;
  background:radial-gradient(circle at 30% 30%, #ffd0e6, #ffa8d8 60%, transparent 70%);
}
.blob-2{ width:480px; height:480px; top:30%; right:-160px;
  background:radial-gradient(circle at 40% 40%, #c8b8ff, #8d7bff 60%, transparent 70%);
  animation-delay:-6s;
}
.blob-3{ width:560px; height:560px; bottom:-180px; left:10%;
  background:radial-gradient(circle at 50% 50%, #ffd9b8, #ffb079 60%, transparent 70%);
  animation-delay:-12s;
}
.blob-4{ width:340px; height:340px; top:55%; left:-80px;
  background:radial-gradient(circle at 50% 50%, #c7f1e1, #7fdcc1 60%, transparent 70%);
  animation-delay:-3s;
  opacity:.4;
}
@keyframes float{
  0%,100%{ transform:translate(0,0) scale(1)}
  50%{ transform:translate(20px,-30px) scale(1.05)}
}
/* лёгкая зернистость для «бумажного» ощущения */
.bg-grain{
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(60,40,90,.045) 1px, transparent 1px);
  background-size:3px 3px;
  opacity:.6;
  mix-blend-mode:multiply;
}

/* ===== ШАПКА ===== */
.topbar{
  position:sticky; top:0; z-index:5;
  padding:18px 20px 12px;
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.55));
  backdrop-filter:saturate(1.2) blur(14px);
  -webkit-backdrop-filter:saturate(1.2) blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.brand{
  display:flex; align-items:center; gap:12px;
  max-width:920px; margin:0 auto;
}
.brand-icon{
  width:46px; height:46px; flex:none;
  display:grid; place-items:center;
  border-radius:16px;
  font-size:24px;
  background:var(--primary-grad);
  color:#fff;
  box-shadow:0 10px 24px rgba(123,92,240,.35);
}
.brand-name{
  font-weight:800; font-size:20px; letter-spacing:-.01em;
  background:var(--primary-grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.brand-sub{ font-size:13px; color:var(--ink-soft) }

/* ===== ВКЛАДКИ ===== */
.tabs{
  display:flex; gap:8px;
  padding:12px 16px;
  max-width:920px; margin:0 auto;
  overflow-x:auto;
  scrollbar-width:none;
}
.tabs::-webkit-scrollbar{ display:none }
.tab{
  flex:1; min-width:max-content;
  padding:11px 16px;
  font:inherit; font-weight:600;
  color:var(--ink-soft);
  background:rgba(255,255,255,.6);
  border:1px solid var(--line-soft);
  border-radius:var(--r-pill);
  cursor:pointer;
  white-space:nowrap;
  transition:all .2s ease;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.tab:hover{ background:rgba(255,255,255,.85) }
.tab.is-active{
  color:#fff;
  background:var(--primary-grad);
  border-color:transparent;
  box-shadow:0 8px 20px rgba(123,92,240,.35);
  transform:translateY(-1px);
}
.tab .badge{
  display:inline-grid; place-items:center;
  min-width:22px; height:22px; padding:0 7px;
  font-size:12px; font-weight:700;
  background:rgba(255,255,255,.95);
  color:var(--lavender-deep);
  border-radius:var(--r-pill);
}
.tab:not(.is-active) .badge{
  background:var(--lavender-soft);
  color:var(--lavender-deep);
}

/* ===== КОНТЕНТ ===== */
.content{ max-width:920px; margin:0 auto; padding:8px 16px 110px }
.view{ display:none; animation:fadeIn .25s ease }
.view.is-active{ display:block }
@keyframes fadeIn{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }

/* ===== ЗАГОЛОВКИ ===== */
.hero{ padding:18px 4px 8px }
.hero h1{
  font-size:clamp(28px, 5vw, 40px);
  line-height:1.1;
  margin:0 0 10px;
  font-weight:800;
  letter-spacing:-.02em;
  background:linear-gradient(135deg,#241b34 0%, #5b3fc8 60%, #d04ea0 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.lead{ color:var(--ink-soft); font-size:16px; margin:0 0 4px }
.lead.small{ font-size:14px }
.page-head{ padding:20px 4px 8px }
.page-head h2{
  font-size:clamp(24px, 4vw, 32px);
  font-weight:800;
  letter-spacing:-.02em;
  margin:0 0 6px;
  background:linear-gradient(135deg,#241b34, #6c5dc4);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ===== КАРТОЧКИ (glassmorphism) ===== */
.card{
  background:var(--surface);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid rgba(255,255,255,.7);
  border-radius:var(--r-card);
  padding:22px;
  box-shadow:var(--shadow);
  margin:14px 0;
}
.form-card{ padding:20px }

/* ===== ПОЛЯ ===== */
.field{ margin:14px 0 }
.field-label{
  display:block;
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--ink-soft);
  margin-bottom:8px;
}
.input{
  width:100%;
  font:inherit;
  font-size:16px;
  color:var(--ink);
  background:rgba(255,255,255,.8);
  border:1.5px solid var(--line);
  border-radius:12px;
  padding:11px 14px;
  outline:none;
  transition:border-color .2s, box-shadow .2s;
  resize:vertical;
}
.input:focus{
  border-color:var(--lavender);
  box-shadow:var(--ring);
  background:#fff;
}
textarea.input{ min-height:64px; line-height:1.45 }

/* ===== ЧИПЫ ===== */
.chips{ display:flex; flex-wrap:wrap; gap:8px }
.chips-wrap{ flex-wrap:wrap }
.chip{
  font:inherit;
  font-size:14px;
  font-weight:600;
  color:var(--ink-soft);
  background:rgba(255,255,255,.7);
  border:1.5px solid var(--line);
  border-radius:var(--r-pill);
  padding:11px 16px;
  cursor:pointer;
  transition:all .18s ease;
  white-space:nowrap;
}
.chip:hover{
  background:#fff;
  border-color:var(--lavender);
  color:var(--ink);
  transform:translateY(-1px);
}
.chip.is-active{
  color:#fff;
  background:var(--primary-grad);
  border-color:transparent;
  box-shadow:0 6px 16px rgba(123,92,240,.35);
}

/* ===== КНОПКИ ===== */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%;
  padding:15px 18px;
  font:inherit; font-size:16px; font-weight:700;
  color:#fff;
  background:var(--primary-grad);
  border:none;
  border-radius:var(--r-btn);
  cursor:pointer;
  box-shadow:0 10px 24px rgba(123,92,240,.35);
  transition:transform .15s ease, box-shadow .2s ease, opacity .2s;
  margin-top:8px;
}
.btn-primary:hover:not(:disabled){ transform:translateY(-2px); box-shadow:0 16px 30px rgba(123,92,240,.45) }
.btn-primary:active:not(:disabled){ transform:translateY(0) }
.btn-primary:disabled{
  background:linear-gradient(135deg,#cfc6e6,#e6dffb);
  cursor:not-allowed;
  box-shadow:none;
}

.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:inherit; font-size:15px; font-weight:600;
  color:var(--lavender-deep);
  background:rgba(255,255,255,.85);
  border:1.5px solid var(--line);
  border-radius:var(--r-btn);
  padding:12px 16px;
  cursor:pointer;
  transition:all .18s ease;
}
.btn-ghost:hover{
  background:#fff;
  border-color:var(--lavender);
  transform:translateY(-1px);
  box-shadow:var(--shadow-sm);
}

.btn-link{
  font:inherit; font-size:14px; font-weight:600;
  color:var(--lavender-deep);
  background:none;
  border:none;
  cursor:pointer;
  padding:6px 8px;
  border-radius:8px;
  transition:background .15s;
}
.btn-link:hover{ background:var(--lavender-soft) }
.btn-link.danger{ color:var(--danger) }
.btn-link.danger:hover{ background:#fdecee }

.row{ display:flex; align-items:center }
.row.gap{ gap:10px }
.row-actions{
  display:flex; align-items:center; justify-content:space-between;
  margin:8px 4px;
}

/* ===== ПОДСКАЗКА ===== */
.hint{
  font-size:13px;
  color:var(--ink-soft);
  text-align:center;
  margin:10px 0 0;
}

/* ===== РЕЗУЛЬТАТ ПОДБОРА ===== */
.result{ padding:24px }
.result-head{ margin-bottom:6px }
.result-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px }
.tag{
  font-size:12px;
  font-weight:700;
  padding:5px 10px;
  border-radius:var(--r-pill);
  background:var(--primary-grad);
  color:#fff;
  letter-spacing:.02em;
}
.tag.soft{
  background:rgba(255,255,255,.85);
  color:var(--ink-soft);
  border:1px solid var(--line);
}
.result h3{
  font-size:22px;
  font-weight:800;
  margin:8px 0 6px;
  letter-spacing:-.01em;
}
.result-desc{
  color:var(--ink-soft);
  margin:0 0 14px;
  font-size:15px;
}
.section{ margin-top:18px }
.section h4{
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--lavender-deep);
  margin:0 0 8px;
}
.section p{ margin:4px 0 }
.muted{ color:var(--ink-soft) }
.small{ font-size:13px }
.callout{
  font-size:16px;
  font-weight:600;
  padding:14px 16px;
  border-radius:14px;
  background:linear-gradient(135deg, #fff2cd 0%, #ffe1ee 100%);
  color:var(--ink);
  border:1px solid rgba(255,138,209,.25);
  line-height:1.4;
}

.timeline, .shots{
  list-style:none; padding:0; margin:0;
}
.timeline li{
  display:flex; gap:12px;
  padding:8px 0;
  border-bottom:1px dashed var(--line);
}
.timeline li:last-child{ border-bottom:none }
.t-time{
  flex:none;
  font-variant-numeric:tabular-nums;
  font-weight:700;
  color:var(--lavender-deep);
  min-width:54px;
  padding-top:1px;
}
.shots li{
  display:flex; gap:10px;
  padding:6px 0;
}
.shots .num{
  flex:none;
  width:24px; height:24px;
  display:grid; place-items:center;
  background:var(--primary-grad);
  color:#fff;
  border-radius:50%;
  font-size:12px; font-weight:800;
}

.actions-row{
  display:flex; gap:10px; flex-wrap:wrap;
  margin-top:22px;
}
.actions-row .btn-primary{ width:auto; flex:1 1 200px; margin-top:0 }
.actions-row .btn-ghost{ flex:1 1 140px }

/* когда нет подходящих */
.no-fit{
  padding:20px;
  text-align:center;
  background:rgba(255,255,255,.7);
  border:1px dashed var(--line);
  border-radius:var(--r-card);
}
.no-fit b{ display:block; margin-bottom:8px; font-size:18px }
.no-fit p{ margin:6px 0; color:var(--ink-soft); font-size:14px }
.no-fit .btn-ghost{ margin-top:12px }

/* ===== МОИ РОЛИКИ ===== */
.status-bar{
  display:flex; gap:8px;
  padding:8px 4px 4px;
  overflow-x:auto;
  scrollbar-width:none;
}
.status-bar::-webkit-scrollbar{ display:none }
.status-pill{
  flex:none;
  font:inherit; font-size:13px; font-weight:600;
  color:var(--ink-soft);
  background:rgba(255,255,255,.7);
  border:1.5px solid var(--line);
  border-radius:var(--r-pill);
  padding:11px 16px;
  cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
  transition:all .18s;
  white-space:nowrap;
}
.status-pill:hover{ background:#fff; border-color:var(--lavender) }
.status-pill.is-active{
  background:var(--ink);
  color:#fff;
  border-color:var(--ink);
}
.status-pill .cnt{
  display:inline-grid; place-items:center;
  min-width:20px; height:20px; padding:0 6px;
  font-size:11px; font-weight:800;
  background:var(--lavender-soft);
  color:var(--lavender-deep);
  border-radius:var(--r-pill);
}
.status-pill.is-active .cnt{ background:#fff; color:var(--ink) }

.my-card{
  background:var(--surface);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.7);
  border-radius:var(--r-card);
  padding:18px;
  margin:12px 0;
  box-shadow:var(--shadow);
}
.my-card-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:6px }
.my-card-head h3{ font-size:18px; font-weight:700; margin:0; letter-spacing:-.01em }

.field-row{
  display:flex; align-items:center; gap:10px;
  margin:12px 0;
  flex-wrap:wrap;
}
.field-row label{
  font-size:13px; font-weight:700;
  color:var(--ink-soft);
  text-transform:uppercase; letter-spacing:.04em;
}
.status-select, .date-input{
  font:inherit; font-size:15px;
  color:var(--ink);
  background:rgba(255,255,255,.85);
  border:1.5px solid var(--line);
  border-radius:10px;
  padding:10px 12px;
  outline:none;
}
.status-select:focus, .date-input:focus{
  border-color:var(--lavender);
  box-shadow:var(--ring);
}

.checklist{
  list-style:none; padding:0; margin:14px 0 0;
  display:grid; gap:6px;
}
.checklist label{
  display:flex; gap:10px; align-items:flex-start;
  padding:10px 12px;
  border-radius:10px;
  cursor:pointer;
  transition:background .15s;
}
.checklist label:hover{ background:rgba(255,255,255,.6) }
.checklist input[type="checkbox"]{
  width:20px; height:20px;
  accent-color:var(--lavender-deep);
  margin-top:1px;
  flex:none;
}
.checklist .checked{ text-decoration:line-through; color:var(--muted) }

.note-input{
  width:100%;
  font:inherit; font-size:15px;
  color:var(--ink);
  background:rgba(255,255,255,.7);
  border:1.5px dashed var(--line);
  border-radius:12px;
  padding:10px 12px;
  outline:none;
  resize:vertical;
  min-height:54px;
  margin-top:10px;
  transition:border-color .2s;
}
.note-input:focus{ border-style:solid; border-color:var(--lavender) }

.my-actions{
  display:flex; gap:6px; justify-content:flex-end;
  margin-top:10px;
}

/* пусто */
.empty{
  text-align:center;
  padding:36px 18px;
  background:rgba(255,255,255,.7);
  border:1px dashed var(--line);
  border-radius:var(--r-card);
  margin:14px 0;
}
.empty .emoji{ font-size:42px; display:block; margin-bottom:8px }
.empty p{ margin:4px 0 14px; color:var(--ink-soft) }

/* ===== БАНК ИДЕЙ ===== */
.bank-item{
  background:var(--surface);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.7);
  border-radius:var(--r-card);
  padding:16px 18px;
  margin:10px 0;
  cursor:pointer;
  transition:transform .18s, box-shadow .2s;
  box-shadow:var(--shadow-sm);
}
.bank-item:hover{ transform:translateY(-2px); box-shadow:var(--shadow) }
.bank-item h4{
  font-size:16px; font-weight:700; margin:0 0 4px;
  letter-spacing:-.01em;
}
.bank-item p{ margin:0 0 10px; color:var(--ink-soft); font-size:14px }
.bank-tags{ display:flex; flex-wrap:wrap; gap:6px }

/* ===== ФОРМА СВОЕЙ ИДЕИ ===== */
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.field.full{ grid-column:1 / -1 }
@media (max-width:560px){
  .form-grid{ grid-template-columns:1fr }
}

/* ===== МОДАЛКА ===== */
.modal{
  position:fixed; inset:0; z-index:30;
  display:flex; align-items:flex-end; justify-content:center;
  background:rgba(40,30,70,.45);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  padding:14px;
}
.modal[hidden]{ display:none }
.modal-window{
  position:relative;
  width:100%; max-width:560px;
  max-height:85vh;
  overflow-y:auto;
  background:#fff;
  border-radius:24px;
  padding:24px;
  box-shadow:var(--shadow-lg);
  animation:slideUp .3s cubic-bezier(.2,.8,.2,1);
}
.modal-window.small{ max-width:380px }
@keyframes slideUp{ from{ transform:translateY(40px); opacity:0 } to{ transform:none; opacity:1 } }
.modal-close{
  position:absolute; top:14px; right:14px;
  width:36px; height:36px;
  border:none; border-radius:50%;
  background:var(--lavender-soft);
  color:var(--lavender-deep);
  font-size:22px; line-height:1;
  cursor:pointer;
  transition:transform .15s;
}
.modal-close:hover{ transform:rotate(90deg) }
.confirm-text{ font-size:16px; margin-bottom:16px }

/* ===== ТОСТ ===== */
.toast{
  position:fixed; left:50%; bottom:96px;
  transform:translateX(-50%);
  background:var(--ink);
  color:#fff;
  padding:12px 20px;
  border-radius:var(--r-pill);
  font-size:14px; font-weight:600;
  box-shadow:var(--shadow-lg);
  z-index:50;
  animation:pop .25s ease;
}
@keyframes pop{ from{ transform:translate(-50%, 8px); opacity:0 } to{ transform:translateX(-50%); opacity:1 } }

/* ===== НИЖНЯЯ НАВИГАЦИЯ НА МОБИЛЕ ===== */
@media (max-width:680px){
  .tabs{
    position:fixed; bottom:0; left:0; right:0;
    z-index:20;
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(18px) saturate(1.3);
    -webkit-backdrop-filter:blur(18px) saturate(1.3);
    border-top:1px solid var(--line-soft);
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    box-shadow:0 -10px 30px rgba(80,55,160,.08);
  }
  .content{ padding-bottom:120px }
  .topbar{ padding-top:14px }
}

/* ===== ШИРОКИЙ ЭКРАН ===== */
@media (min-width:1024px){
  body{ font-size:18px }
  .content{ padding:18px 24px 80px }
  .hero h1{ font-size:48px }
  .page-head h2{ font-size:36px }
  .card{ padding:28px }
  .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
}

/* предпочтение сниженного движения */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
  .blob{ animation:none }
}