/* Coffee Nostra CRM / Soft Glass. Additive skin; no business/data changes. */
:root {
  --bg: #f2f0ed;
  --panel: rgba(255, 255, 255, .88);
  --panel-2: #edeae7;
  --line: rgba(74, 60, 55, .1);
  --text: #191a20;
  --text-2: #484851;
  --muted: #6b6972;
  --accent: #7a1825;
  --accent-2: #8e2335;
  --accent-deep: #601320;
  --accent-soft: rgba(122, 24, 37, .09);
  --on-accent: #fff9fa;
  --r-lg: 24px;
  --r-md: 15px;
  --glass: rgba(255, 255, 255, .59);
  --glass-edge: rgba(255, 255, 255, .86);
  --edge: inset 0 1px 0 rgba(255, 255, 255, .8);
  --shadow: 0 12px 36px -22px rgba(68, 48, 45, .22);
  --ease: cubic-bezier(.22, .75, .2, 1);
  --s-new: #34343c;
  --s-thinking: #a6a09c;
  --s-client: #8e2335;
  --s-rejected: #dedbd7;
}
:root[data-theme="dark"] {
  --bg: #171719;
  --panel: rgba(39, 39, 43, .94);
  --panel-2: #333236;
  --line: rgba(242, 235, 232, .11);
  --text: #f5f2ef;
  --text-2: #d3ced0;
  --muted: #aca4aa;
  --accent: #8c2538;
  --accent-2: #f0a3af;
  --accent-deep: #a33148;
  --accent-soft: rgba(236, 149, 166, .14);
  --glass: rgba(39, 38, 42, .7);
  --glass-edge: rgba(255, 255, 255, .13);
  --edge: inset 0 1px 0 rgba(255, 255, 255, .04);
  --shadow: 0 16px 42px -24px rgba(0, 0, 0, .65);
  --s-new: #f5f2ef;
  --s-thinking: #9f9499;
  --s-client: #e99aa8;
  --s-rejected: #4b454a;
}
html, body { font-family: var(--font); background: var(--bg); letter-spacing: -.015em; }
body { isolation: isolate; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 0 30%, rgba(255,255,255,.65), transparent 65%),
    linear-gradient(120deg, rgba(122,24,37,.035), transparent 55%, rgba(155,141,130,.07));
}
[data-theme="dark"] body::before {
  background: radial-gradient(ellipse at 0 30%, rgba(122, 72, 89, .13), transparent 65%),
    linear-gradient(120deg, rgba(122,24,37,.035), transparent 55%, rgba(127,117,113,.045));
}
.main { padding: 0 16px calc(112px + env(safe-area-inset-bottom)); }
.topbar { gap: 12px; padding-top: calc(22px + env(safe-area-inset-top)); padding-bottom: 22px; }
.topbar h1 { font-family: var(--font); text-transform: none; font-size: 26px; font-weight: 700; line-height: 1.15; letter-spacing: -.045em; padding-top: 0; }
.topbar .hello { font-size: 13px; margin-bottom: 6px; letter-spacing: 0; }
.panel, .sidebar, .rows, .rowc { border: 1px solid transparent; box-shadow: var(--shadow), var(--edge); }
.panel { padding: 22px; border-radius: var(--r-lg); }
.panel h2 { font-size: 17px; font-weight: 650; line-height: 1.25; letter-spacing: -.025em; }
.panel .head { margin-bottom: 18px; gap: 12px; }
.panel .head .link { font-size: 13px; font-weight: 500; }
.grid, .row-2 { gap: 18px; }
.kpis { gap: 16px; }
.kpi { padding: 20px; }
.kpi .t { font-size: 13px; line-height: 1.35; min-height: 36px; }
.kpi .t .ic { width: 34px; height: 34px; border-radius: 12px; }
.kpi .v, .month .big {
  font-family: var(--font); text-transform: none; font-weight: 650;
  font-size: clamp(28px, 2.9vw, 44px); line-height: 1.15; letter-spacing: -.045em;
  overflow-wrap: anywhere; margin-top: 14px;
}
.kpi .v small { font-family: var(--font); font-size: .48em; letter-spacing: -.02em; }
.kpi .d { font-size: 12px; line-height: 1.45; margin-top: 8px; }
.kpi.hero { background: linear-gradient(135deg, #8c253b, #6d1525) !important; box-shadow: 0 12px 30px -18px rgba(122,24,37,.55), inset 0 1px 0 rgba(255,255,255,.24); }
.kpi.hero .v { color: #fff9fa; }
.btn, .iconbtn, .seg, .seg button, .seg a { border-radius: 999px; }
.btn, .iconbtn { min-height: 46px; }
.btn { padding: 12px 19px; font-size: 14px; font-weight: 600; border-color: transparent; }
.btn.primary { box-shadow: 0 6px 14px -9px rgba(122,24,37,.55), inset 0 1px 0 rgba(255,255,255,.16); }
.btn:not(.primary):not(.danger), .iconbtn { background: var(--glass); border-color: var(--line); box-shadow: inset 0 1px 0 var(--glass-edge); }
.iconbtn { width: 46px; height: 46px; }
.iconbtn.sm { min-height: 40px; width: 40px; height: 40px; }
.iconbtn.sm svg.i { width: 18px; height: 18px; }
.btn:active, .iconbtn:active, .seg button:active, .sidebar nav a:active, .tabbar a:active { transform: scale(.96); }
.btn[disabled] { cursor: wait; }
.input, .form-in { border: 1px solid transparent; background: var(--panel-2); font-size: 16px; line-height: 1.4; min-width: 0; max-width: 100%; min-height: 50px; border-radius: 15px; }
.input { padding-top: 12px; padding-bottom: 12px; border-radius: 999px; }
.form-in { display: block; padding: 13px 15px; }
.form-in::placeholder, .input::placeholder { color: var(--muted); opacity: .85; }
.input:focus-visible, .form-in:focus-visible { border-color: var(--accent-2); box-shadow: 0 0 0 4px var(--accent-soft); }
form label.l { margin-top: 18px; font-size: 13px; font-weight: 500; line-height: 1.4; }
form .two { margin-top: 18px; }
form .two > label.l { margin-top: 0; }
form .two .form-in { min-height: 50px; }
textarea.form-in { min-height: 112px; }
.statuses { padding: 4px; background: var(--panel-2); border-radius: 19px; gap: 4px; }
.statuses label { border: 0; border-radius: 15px; font-size: 13px; padding: 11px 2px; position: relative; }
.statuses input { display: block; position: absolute; opacity: 0; width: 1px; height: 1px; }
.statuses label:has(input:checked) { background: var(--accent); color: var(--on-accent); box-shadow: 0 3px 10px -5px rgba(122,24,37,.4); }
.statuses label:focus-within { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.checks { gap: 8px; }
.checks label { border: 0; border-radius: 999px; padding: 11px 16px; font-size: 14px; }
.checks label:has(input:checked) { background: var(--accent-soft); color: var(--accent-2); }
.checks input { width: 16px; height: 16px; margin: 0; }
.avatar, :root[data-theme="dark"] .avatar, .prod .pi, .drow .dd, .kpi .t .ic, .blank .bi { border-radius: 14px; box-shadow: none; }
.avatar { font-size: 14px; }
.badge, .chip, .cnt { border-radius: 999px; }
.chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.task, .drow, .recent a, .stab .sr { padding-top: 12px; padding-bottom: 12px; border-radius: 16px; }
.task .ta { gap: 6px; }
.task .tx { gap: 12px; }
.task .nm, .drow .nm { font-size: 14px; }
.task .sb, .drow .sb { font-size: 12px; }
.task.late .when { color: var(--danger); }
.next { border-radius: 19px; padding: 16px; }
.next .ic { border-radius: 14px; }
.detail { gap: 18px; }
.hero-card h2 { line-height: 1.2; }
.hero-card .avatar { border-radius: 20px; }
.quick .btn { min-height: 44px; }
.rows { border-radius: 24px; }
.rowc { border-radius: 20px; padding: 16px; }
.rowc .badge { grid-column: 3; grid-row: 1; }
.rowc .chips { min-width: 0; }
.toolbar { gap: 14px; }
.seg { background: var(--panel-2); border-color: transparent; padding: 4px; }
.seg button, .seg a { padding: 7px 13px; font-size: 12px; font-weight: 550; }
.seg .on { background: var(--accent); color: var(--on-accent); box-shadow: 0 3px 8px -5px rgba(122,24,37,.5); }
.donut-wrap { flex-wrap: wrap; gap: 18px; }
.legend { min-width: 150px; }
.chart .ax { font-family: var(--font); font-size: 11px; }
.tip { border-radius: 15px; padding: 10px 14px; box-shadow: var(--shadow); }
.bar .track, .bar .fill { border-radius: 99px; height: 7px; }
.bar .lbl { align-items: baseline; gap: 16px; }
.bar .lbl b { white-space: nowrap; }
.prod { gap: 8px; }
.month .big { margin: 8px 0; }
.month .sb { line-height: 1.5; }
.itm { grid-template-columns: 70px minmax(0,1fr) minmax(0,1fr); gap: 10px; }
.itm label { min-width: 0; }
.itm label span { font-size: 11px; }
.items { gap: 14px; }
.toast { background: var(--glass); color: var(--text); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid var(--glass-edge); box-shadow: var(--shadow); border-radius: 20px; padding: 14px 20px; max-width: calc(100% - 32px); text-align: center; }
.login { margin-top: 14vh; max-width: 410px; }
.login .panel { padding: 28px; }
.login .logo { width: 160px; padding-bottom: 30px; }
.blank { padding: 38px 22px; }
.blank b { line-height: 1.3; }
.blank .bi { border-radius: 20px; background: var(--accent-soft); color: var(--accent-2); }
.tabbar {
  left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right));
  padding: 7px; border-radius: 30px; background: var(--glass);
  border: 1px solid var(--glass-edge); backdrop-filter: blur(26px) saturate(125%);
  -webkit-backdrop-filter: blur(26px) saturate(125%);
  box-shadow: 0 12px 36px -18px rgba(48,34,36,.22), inset 0 1px 0 rgba(255,255,255,.3);
}
.tabbar a { padding: 8px 0; gap: 4px; border-radius: 22px; font-size: 10px; min-width: 0; }
.tabbar a.on { background: var(--accent-soft); color: var(--accent-2); }
.tabbar .add { width: 52px; height: 52px; margin: 0 5px; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 6px 16px -8px rgba(122,24,37,.45); }
.tabbar .dotn { left: calc(50% + 5px); top: 4px; }

@media (min-width: 900px) {
  .shell { padding: 20px; gap: 30px; }
  .sidebar { width: 232px; top: 20px; height: calc(100dvh - 40px); padding: 28px 12px 16px; border-radius: 28px;
    background: var(--glass); border: 1px solid var(--glass-edge);
    backdrop-filter: blur(28px) saturate(125%); -webkit-backdrop-filter: blur(28px) saturate(125%);
    box-shadow: 0 18px 48px -26px rgba(61,41,42,.22), inset 0 1px 0 rgba(255,255,255,.3); }
  .logo { width: 138px; padding: 0 16px 30px; }
  .nav-title { padding: 0 16px 12px; font-size: 11px; opacity: .85; }
  .sidebar nav a { padding: 15px 16px; min-height: 52px; border-radius: 19px; margin-bottom: 5px; font-size: 14px; gap: 12px; }
  .sidebar nav a.on { background: var(--accent-soft); color: var(--accent-2); box-shadow: inset 0 1px 0 rgba(255,255,255,.22); font-weight: 650; }
  .sidebar nav a.on svg.i, .sidebar nav a.on .n { color: var(--accent-2); }
  .sidebar nav a .n.hot, .sidebar nav a.on .n.hot { color: white; }
  .sidebar .theme { padding: 14px 16px; border: 1px solid var(--glass-edge); border-radius: 20px; background: var(--glass); font-size: 14px; }
  .main { padding: 0 0 40px; max-width: 1480px; }
  .topbar { padding: 12px 0 24px; }
  .topbar h1 { font-size: 42px; }
  .topbar .search { width: clamp(200px, 20vw, 290px); }
  .topbar .input { font-size: 14px; min-height: 46px; background: var(--glass); }
  .kpis { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .row-2 { grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); }
  .rows { background: var(--panel); border: 0; box-shadow: var(--shadow), var(--edge); }
  .thead, .rowc { grid-template-columns: 40px minmax(140px,1.3fr) minmax(90px,.8fr) minmax(100px,1fr) 88px; gap: 12px; }
  .thead { padding: 18px 22px; font-size: 12px; }
  .rowc { padding: 16px 22px; border-radius: 0; box-shadow: none; background: transparent; }
  .rowc .badge { grid-column: auto; grid-row: auto; }
  .rowc .ph { font-size: 12px; overflow-wrap: anywhere; }
  .stab .sh, .stab .sr { grid-template-columns: 40px minmax(120px,1.5fr) repeat(4,minmax(36px,.7fr)) minmax(100px,1fr); gap: 12px; font-size: 13px; }
  .stab .sr { border-radius: 0; }
}
@media (min-width: 900px) and (max-width: 1179px) {
  .shell { gap: 20px; padding: 16px; }
  .sidebar { width: 204px; top: 16px; height: calc(100dvh - 32px); }
  .sidebar nav a { padding-left: 12px; gap: 10px; font-size: 13px; }
  .kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .row-2 { grid-template-columns: minmax(0,1fr); }
  .topbar { flex-wrap: wrap; }
  .topbar .search { order: 10; width: 100%; flex-basis: 100%; }
  .thead, .rowc { grid-template-columns: 36px minmax(110px,1.1fr) minmax(82px,.8fr) minmax(90px,1fr) 78px; gap: 10px; padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 600px) {
  .panel { padding: 19px; }
  .grid { gap: 16px; }
  .kpis { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
  .kpi { padding: 14px 12px; }
  .kpi.hero { grid-column: 1 / -1; padding: 22px; }
  .kpi.hero .v { font-size: 38px; white-space: nowrap; }
  .kpi .t { font-size: 11px; min-height: 30px; }
  .kpi:not(.hero) .t .ic { display: none; }
  .kpi .v { font-size: 27px; margin-top: 10px; }
  .kpi .d { font-size: 10px; }
  .kpis:not(:has(.hero)) .kpi:last-child { grid-column: 1 / -1; padding: 20px; }
  .kpis:not(:has(.hero)) .kpi:last-child .v { font-size: 34px; }
  .topbar { gap: 8px; }
  .topbar h1 { font-size: clamp(21px,6vw,26px); }
  .topbar .iconbtn { width: 40px; height: 40px; min-height: 40px; }
  .panel .head h2 { font-size: 16px; }
  .task { align-items: flex-start; gap: 8px; flex-wrap: wrap; }
  .task .tx { flex-basis: 100%; }
  .task .ta { padding-left: 52px; }
  .task .nm { font-size: 14px; }
  .task .sb { font-size: 12px; }
  .task .ta .iconbtn { width: 40px; height: 40px; min-height: 40px; }
  .bar .lbl { flex-wrap: wrap; gap: 4px; }
  .bar .lbl span { flex: 1 1 160px; }
  .month .big { font-size: 30px; overflow-wrap: anywhere; }
  .month { gap: 8px; }
  .month .iconbtn { width: 38px; height: 38px; min-height: 38px; }
  .donut-wrap { justify-content: center; }
  .legend { font-size: 13px; }
  .legend .li { gap: 8px; font-size: 13px; }
  .legend .li em { font-size: 12px; width: 30px; }
  .statuses label { font-size: 12px; }
  .checks label { padding: 11px 13px; font-size: 13px; }
  .two { grid-template-columns: minmax(0,1fr); }
  .ptable > div { font-size: 12px; grid-template-columns: minmax(64px,1fr) .65fr .8fr minmax(92px,1.2fr); }
  .ptable span:nth-child(3), .ptable span:nth-child(5) { display: none; }
  .hero-card { gap: 12px; }
  .hero-card h2 { font-size: 21px; }
  .hero-card .avatar { width: 48px; height: 48px; }
}
@media (hover: hover) and (pointer: fine) {
  .btn:not([disabled]):hover, .iconbtn:not([disabled]):hover { transform: translateY(-1px); }
  .sidebar nav a:not(.on):hover { background: var(--glass); }
  .rowc:hover, .task:hover, .drow:hover, .recent a:hover, .stab .sr:hover { background: var(--accent-soft); }
}
.enter .grid > *, .enter .detail > *, .enter form.panel, .enter .toolbar, .enter .rows { animation: soft-appear .34s var(--ease) both; }
.enter .grid > *:nth-child(2), .enter .detail > *:nth-child(2) { animation-delay: .025s; }
.enter .grid > *:nth-child(3), .enter .detail > *:nth-child(3) { animation-delay: .05s; }
.enter .grid > *:nth-child(n+4), .enter .detail > *:nth-child(n+4) { animation-delay: .075s; }
@keyframes soft-appear { from { opacity: 0; transform: translateY(6px) scale(.997); } to { opacity: 1; transform: none; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sidebar, .tabbar, .toast { background: #f8f7f5; }
  [data-theme="dark"] .sidebar, [data-theme="dark"] .tabbar, [data-theme="dark"] .toast { background: #29272c; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .btn:hover, .iconbtn:hover, .btn:active, .iconbtn:active, .seg button:active, .sidebar nav a:active, .tabbar a:active { transform: none; }
}