/* Космос — единая дизайн-система болванки. Тёмная + светлая тема через [data-theme] на . */ :root, :root[data-theme="dark"]{ --bg-0:#15110E; --bg-1:#1B1612; --surface:#221C17; --surface-2:#2A231D; --surface-hi:#322A22; --terra:#D2723F; --terra-soft:#E08A57; --terra-glow:rgba(210,114,63,.18); --moss:#8C9B5F; --moss-soft:#A7B47C; --gold:#E0B15A; --ink:#F2EAE0; --ink-2:#C9BCAD; --ink-3:#8E8074; --ink-4:#6A5E54; --line:rgba(242,234,224,.08); --line-2:rgba(242,234,224,.14); --pos:#8C9B5F; --neg:#C96A5C; --grid:rgba(242,234,224,.06); --tag-bg:rgba(34,28,23,.86); --shadow:0 18px 40px -28px rgba(0,0,0,.7); --shadow-lg:0 28px 60px -30px rgba(0,0,0,.8); --glow-1:rgba(210,114,63,.13); --glow-2:rgba(140,155,95,.10); --noise-op:.035; --noise-blend:overlay; } :root[data-theme="light"]{ --bg-0:#F1E8DC; --bg-1:#EDE3D5; --surface:#FBF6EF; --surface-2:#F4EBDF; --surface-hi:#EBE0D0; --terra:#C25E2C; --terra-soft:#B85327; --terra-glow:rgba(194,94,44,.18); --moss:#6E7D45; --moss-soft:#5E6C3A; --gold:#B98826; --ink:#2A2018; --ink-2:#5A4E43; --ink-3:#897A6B; --ink-4:#AC9D8D; --line:rgba(42,32,24,.10); --line-2:rgba(42,32,24,.17); --pos:#6E7D45; --neg:#BB5849; --grid:rgba(42,32,24,.07); --tag-bg:rgba(251,246,239,.9); --shadow:0 16px 36px -26px rgba(90,60,35,.45); --shadow-lg:0 26px 54px -28px rgba(90,60,35,.5); --glow-1:rgba(194,94,44,.12); --glow-2:rgba(140,155,95,.12); --noise-op:.022; --noise-blend:multiply; } :root{ --radius:18px; --radius-sm:12px; --font-display:"Fraunces",Georgia,serif; --font-ui:"Hanken Grotesk",-apple-system,sans-serif; } *{margin:0;padding:0;box-sizing:border-box} html{font-size:15px} body{ font-family:var(--font-ui); background:var(--bg-0); color:var(--ink); -webkit-font-smoothing:antialiased; overflow-x:hidden; min-height:100vh; transition:background .4s ease,color .4s ease; } a{color:inherit;text-decoration:none} body::before{ content:"";position:fixed;inset:0;z-index:0;pointer-events:none; background: radial-gradient(900px 600px at 78% -8%, var(--glow-1), transparent 60%), radial-gradient(800px 700px at 6% 105%, var(--glow-2), transparent 55%); } body::after{ content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:var(--noise-op); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode:var(--noise-blend); } .app{position:relative;z-index:1;display:grid;grid-template-columns:264px 1fr;min-height:100vh} /* ───────── SIDEBAR ───────── */ .sidebar{ border-right:1px solid var(--line); background:linear-gradient(180deg,var(--bg-1),var(--bg-0)); display:flex;flex-direction:column; padding:26px 18px;position:sticky;top:0;height:100vh; } .brand{display:flex;align-items:center;gap:12px;padding:0 8px 4px} .brand .mark{ width:42px;height:42px;border-radius:13px;flex:none; background:linear-gradient(150deg,var(--terra),#a8512a); display:grid;place-items:center; box-shadow:0 8px 24px -8px var(--terra-glow),inset 0 1px 0 rgba(255,255,255,.25); } .brand .mark svg{width:22px;height:22px} .brand .name{font-family:var(--font-display);font-size:1.32rem;font-weight:600;letter-spacing:.06em} .brand .sub{font-size:.66rem;color:var(--ink-3);letter-spacing:.22em;text-transform:uppercase;margin-top:1px} .nav-label{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-4);padding:0 12px;margin:26px 0 8px} nav{display:flex;flex-direction:column;gap:2px} .nav-item{ display:flex;align-items:center;gap:12px; padding:10px 12px;border-radius:11px;color:var(--ink-3); font-size:.92rem;font-weight:500;cursor:pointer; transition:.18s;position:relative; } .nav-item svg{width:18px;height:18px;flex:none;opacity:.85} .nav-item:hover{background:var(--surface);color:var(--ink-2)} .nav-item.active{background:var(--surface-2);color:var(--ink);box-shadow:inset 3px 0 0 var(--terra)} .nav-item .badge{ margin-left:auto;font-size:.66rem;font-weight:700; background:var(--terra);color:#fff;border-radius:20px;padding:2px 8px; } :root[data-theme="light"] .nav-item .badge{color:#fff} .sidebar .spacer{flex:1} .sb-scroll{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column} .sb-scroll::-webkit-scrollbar{width:6px} .sb-scroll::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:6px} .sb-scroll::-webkit-scrollbar-track{background:transparent} .sb-scroll .nav-label:first-child{margin-top:14px} .sb-scroll nav:last-child{margin-bottom:6px} .view-switch{ display:flex;align-items:center;gap:10px;justify-content:center; margin:6px 0 14px;padding:11px;border-radius:13px; border:1px dashed var(--line-2);color:var(--ink-2); font-size:.84rem;font-weight:600;cursor:pointer;transition:.18s; } .view-switch:hover{border-color:var(--terra);color:var(--terra-soft);background:var(--surface)} .view-switch svg{width:17px;height:17px} .user-card{ display:flex;align-items:center;gap:11px;padding:10px;border-radius:13px; border:1px solid var(--line);background:var(--surface);cursor:pointer;transition:.18s; } .user-card:hover{border-color:var(--line-2)} .ava{width:36px;height:36px;border-radius:50%;flex:none;background:linear-gradient(140deg,var(--moss),#5f6e3c);display:grid;place-items:center;font-weight:700;color:#fff;font-size:.9rem} .user-card .u-name{font-size:.84rem;font-weight:600} .user-card .u-role{font-size:.7rem;color:var(--ink-3)} /* ───────── MAIN / TOPBAR ───────── */ .main{padding:26px 34px 46px;min-width:0} .topbar{display:flex;align-items:center;gap:16px;margin-bottom:30px} .topbar h1{font-family:var(--font-display);font-weight:500;font-size:1.85rem;line-height:1.1} .topbar h1 em{font-style:italic;color:var(--terra-soft)} .topbar .date{font-size:.82rem;color:var(--ink-3);margin-top:3px} .search{ margin-left:auto;display:flex;align-items:center;gap:9px; background:var(--surface);border:1px solid var(--line);border-radius:12px; padding:9px 14px;color:var(--ink-3);width:240px; } .search svg{width:16px;height:16px;flex:none} .search input{background:none;border:none;outline:none;color:var(--ink);font-family:inherit;font-size:.88rem;width:100%} .search input::placeholder{color:var(--ink-4)} .icon-btn{ width:42px;height:42px;border-radius:12px;border:1px solid var(--line); background:var(--surface);display:grid;place-items:center;cursor:pointer; color:var(--ink-2);position:relative;transition:.18s;flex:none; } .icon-btn:hover{border-color:var(--line-2);color:var(--ink)} .icon-btn svg{width:18px;height:18px} .icon-btn .dot{position:absolute;top:9px;right:10px;width:7px;height:7px;border-radius:50%;background:var(--terra);box-shadow:0 0 0 2px var(--surface)} /* переключатель темы */ .theme-toggle .ico-sun,.theme-toggle .ico-moon{position:absolute;transition:opacity .3s,transform .3s} :root[data-theme="dark"] .theme-toggle .ico-sun{opacity:1;transform:rotate(0)} :root[data-theme="dark"] .theme-toggle .ico-moon{opacity:0;transform:rotate(-90deg)} :root[data-theme="light"] .theme-toggle .ico-sun{opacity:0;transform:rotate(90deg)} :root[data-theme="light"] .theme-toggle .ico-moon{opacity:1;transform:rotate(0)} /* ───────── CARD ───────── */ .card{ background:linear-gradient(165deg,var(--surface),var(--bg-1)); border:1px solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow); position:relative;overflow:hidden; } .card-head{display:flex;align-items:flex-start;justify-content:space-between;padding:20px 22px 6px} .card-head .c-title{font-family:var(--font-display);font-size:1.15rem;font-weight:500} .card-head .c-sub{font-size:.76rem;color:var(--ink-3);margin-top:2px} .seg{display:flex;gap:2px;background:var(--bg-0);border:1px solid var(--line);border-radius:10px;padding:3px} .seg button{background:none;border:none;color:var(--ink-3);font-family:inherit;font-size:.76rem;font-weight:600;padding:5px 11px;border-radius:7px;cursor:pointer;transition:.15s} .seg button.on{background:var(--surface-hi);color:var(--ink)} .chip{display:inline-flex;align-items:center;gap:4px;font-size:.74rem;font-weight:700;padding:2px 8px;border-radius:20px} .chip.up{color:var(--pos);background:rgba(140,155,95,.14)} .chip.down{color:var(--neg);background:rgba(201,106,92,.14)} .chip svg{width:11px;height:11px} /* кнопки */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:inherit;font-size:.9rem;font-weight:600;cursor:pointer; border-radius:12px;padding:12px 20px;border:1px solid transparent;transition:.18s; } .btn svg{width:17px;height:17px} .btn-primary{background:linear-gradient(150deg,var(--terra),#a8512a);color:#fff;box-shadow:0 12px 28px -12px var(--terra-glow)} .btn-primary:hover{filter:brightness(1.07);transform:translateY(-1px)} .btn-ghost{background:var(--surface);border-color:var(--line-2);color:var(--ink-2)} .btn-ghost:hover{color:var(--ink);border-color:var(--terra)} /* ───────── KPI ───────── */ .kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:18px} .kpi{padding:18px 20px 16px} .kpi .k-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} .kpi .k-label{font-size:.78rem;color:var(--ink-3);font-weight:500} .k-ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--surface-hi)} .k-ico svg{width:17px;height:17px;color:var(--terra-soft)} .kpi .k-val{font-family:var(--font-display);font-size:1.92rem;font-weight:500;letter-spacing:-.01em;line-height:1} .kpi .k-val small{font-size:1.05rem;color:var(--ink-3);font-family:var(--font-ui);font-weight:600} .kpi .k-foot{display:flex;align-items:center;gap:7px;margin-top:11px} .kpi .k-foot span{font-size:.74rem;color:var(--ink-4)} .spark{position:absolute;right:0;bottom:0;width:118px;height:46px;opacity:.9} /* графики — общая сетка */ .chart-wrap{padding:6px 14px 18px} .chart-wrap svg{width:100%;height:230px;display:block} .chart-grid line{stroke:var(--grid);stroke-width:1} .legend{display:flex;gap:22px;padding:0 22px 18px;flex-wrap:wrap} .legend .li{display:flex;align-items:center;gap:7px;font-size:.78rem;color:var(--ink-2)} .legend .sw{width:11px;height:11px;border-radius:3px} /* ───────── ВОРОНКА ───────── */ .funnel{padding:8px 22px 20px;display:flex;flex-direction:column;gap:11px} .f-stage .f-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px} .f-stage .f-name{font-size:.83rem;color:var(--ink-2);font-weight:500} .f-stage .f-num{font-family:var(--font-display);font-size:1rem;font-weight:600} .f-stage .f-num b{color:var(--ink-4);font-weight:500;font-size:.76rem;margin-left:6px;font-family:var(--font-ui)} .f-bar{height:13px;border-radius:7px;background:var(--bg-0);overflow:hidden;position:relative} .f-fill{height:100%;border-radius:7px;background:linear-gradient(90deg,var(--terra),var(--terra-soft));transition:width 1.1s cubic-bezier(.2,.8,.2,1)} .f-stage:nth-child(2) .f-fill{background:linear-gradient(90deg,#c2783f,#d99a5e)} .f-stage:nth-child(3) .f-fill{background:linear-gradient(90deg,#b0824a,#cda766)} .f-stage:nth-child(4) .f-fill{background:linear-gradient(90deg,#9a8c52,#bcab6d)} .f-stage:nth-child(5) .f-fill{background:linear-gradient(90deg,var(--moss),var(--moss-soft))} /* ───────── AI-ПРОДАВЕЦ ───────── */ .pulse{width:8px;height:8px;border-radius:50%;background:var(--moss);position:relative;flex:none} .pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--moss);animation:pulse 1.8s ease-out infinite} @keyframes pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(3.4);opacity:0}} /* ───────── ИСТОЧНИКИ ───────── */ .src{display:flex;align-items:center;gap:12px} .src .s-name{font-size:.84rem;color:var(--ink-2);width:84px;flex:none} .src .s-track{flex:1;height:9px;border-radius:6px;background:var(--bg-0);overflow:hidden} .src .s-track i{display:block;height:100%;border-radius:6px} .src .s-pct{font-size:.8rem;font-weight:700;color:var(--ink);width:38px;text-align:right} /* ───────── ОПЛАТЫ (лента) ───────── */ .pay{display:flex;align-items:center;gap:13px;padding:11px 10px;border-radius:12px;transition:.15s} .pay:hover{background:var(--surface-2)} .pay .p-ava{width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;font-weight:700;color:#fff;font-size:.82rem} .pay .p-mid{flex:1;min-width:0} .pay .p-name{font-size:.86rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pay .p-course{font-size:.74rem;color:var(--ink-3)} .pay .p-sum{font-family:var(--font-display);font-weight:600;font-size:.96rem;color:var(--moss-soft)} .pay .p-time{font-size:.68rem;color:var(--ink-4);text-align:right;margin-top:2px} /* ───────── ПОЯВЛЕНИЕ ───────── */ .reveal{opacity:0;transform:translateY(14px);animation:rise .7s cubic-bezier(.2,.8,.2,1) forwards} @keyframes rise{to{opacity:1;transform:none}} /* ───────── ДЕМО-ПЛАШКА ───────── */ .demo-tag{ position:fixed;z-index:20;right:18px;bottom:16px; background:var(--tag-bg);backdrop-filter:blur(10px); border:1px solid var(--line-2);border-radius:30px; padding:8px 16px;font-size:.74rem;color:var(--ink-3); display:flex;align-items:center;gap:8px; } .demo-tag b{color:var(--terra-soft);font-weight:600} /* ───────── АДАПТИВ ───────── */ @media(max-width:1180px){ .kpi-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:820px){ .app{grid-template-columns:1fr}.sidebar{display:none} }