:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #09090d; color: #f5f4f7; }
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 1120px; min-height: 100%; background: #09090d; }
body { overflow-x: auto; }
button, input { font: inherit; }
button { color: inherit; }
.rias-app { min-height: 100vh; display: grid; grid-template-columns: 228px minmax(0, 1fr); background: radial-gradient(circle at 78% -10%, rgba(182, 16, 66, .16), transparent 31rem), radial-gradient(circle at 38% 0%, rgba(85, 34, 63, .18), transparent 29rem), #09090d; }
.sidebar { min-height: 100vh; position: sticky; top: 0; height: 100vh; padding: 28px 16px 18px; display: flex; flex-direction: column; border-right: 1px solid rgba(255, 255, 255, .075); background: rgba(13, 13, 18, .76); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 10px 26px; color: #f5f4f7; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .075); }
.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(145deg, #ff496f, #a71238); box-shadow: 0 0 0 5px rgba(255, 73, 111, .1), 0 8px 22px rgba(210, 19, 70, .24); font-size: 15px; font-weight: 800; }
.brand b { display: block; font-size: 15px; letter-spacing: .03em; }
.brand small { display: block; margin-top: 2px; color: #9998a4; font-size: 10px; }
.nav-list { display: grid; gap: 4px; margin-top: 22px; }
.nav-item { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; border-radius: 10px; padding: 10px 12px; color: #a8a6b0; background: transparent; cursor: pointer; font-size: 13px; text-align: left; }
.nav-item span { width: 16px; color: #777583; font-size: 16px; text-align: center; }
.nav-item:hover { background: rgba(255,255,255,.045); color: #e9e8ec; }
.nav-item.is-active { color: #fff8fa; background: linear-gradient(90deg, rgba(207, 21, 70, .24), rgba(207, 21, 70, .06)); box-shadow: inset 2px 0 #ff406d; }
.nav-item.is-active span { color: #ff7192; }
.sidebar-bottom { margin-top: auto; padding: 18px 10px 0; border-top: 1px solid rgba(255, 255, 255, .075); color: #a2a1ab; font-size: 11px; line-height: 1.45; }
.side-label, .eyebrow { display: block; color: #ff5f86; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.sidebar-bottom strong { display: flex; align-items: center; gap: 6px; margin: 8px 0 5px; color: #d7d5dc; font-size: 12px; }
.sidebar-bottom p { margin: 0; }
.workspace { width: 100%; max-width: 1660px; padding: 32px 40px 46px; margin: 0 auto; }
.topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 24px; }
.breadcrumbs { margin: 0 0 8px; color: #898793; font-size: 12px; }
.breadcrumbs span { margin: 0 7px; color: #4b4a53; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 34px; line-height: 1; letter-spacing: -.045em; }
h2 { margin: 4px 0 0; font-size: 18px; letter-spacing: -.025em; }
.topbar-actions { display: flex; align-items: center; gap: 14px; }
.freshness { display: inline-flex; align-items: center; gap: 7px; color: #bab8c0; font-size: 12px; }
.dot { display: inline-block; width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #9d9ba6; }
.dot-amber { background: #f7ba58; box-shadow: 0 0 0 4px rgba(247, 186, 88, .1); }
.dot-red { background: #ff496e; box-shadow: 0 0 0 4px rgba(255, 73, 110, .11); }
.dot-green { background: #51d68a; box-shadow: 0 0 0 4px rgba(81, 214, 138, .11); }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border: 1px solid transparent; border-radius: 10px; cursor: pointer; font-size: 12px; font-weight: 700; transition: .18s ease; }
.button:hover { transform: translateY(-1px); }
.button-primary { border-color: rgba(255, 95, 134, .64); color: #fff9fb; background: linear-gradient(135deg, #e91f58, #b60d39); box-shadow: 0 9px 22px rgba(210, 17, 63, .18); }
.button-primary:hover { box-shadow: 0 12px 28px rgba(210, 17, 63, .30); }
.button-secondary { color: #dedce3; border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.045); }
.button-secondary:hover { background: rgba(255,255,255,.075); }
.notice { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 12px 15px; border: 1px solid rgba(254, 177, 70, .25); border-radius: 14px; background: linear-gradient(90deg, rgba(110, 73, 27, .18), rgba(110, 73, 27, .05)); }
.notice-icon { display: grid; place-items: center; width: 23px; height: 23px; flex: 0 0 auto; border: 1px solid rgba(254, 177, 70, .52); border-radius: 50%; color: #ffd78b; font: 800 13px Georgia, serif; }
.notice strong { display: block; color: #f0dfc3; font-size: 12px; }
.notice p { margin: 3px 0 0; color: #b8ad9d; font-size: 11px; line-height: 1.4; }
.notice-tag { margin-left: auto; color: #ecc276; font-size: 10px; white-space: nowrap; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 18px 0; }
.metric-card { min-height: 119px; padding: 18px; border: 1px solid rgba(255,255,255,.085); border-radius: 14px; background: linear-gradient(130deg, rgba(24, 24, 31, .92), rgba(15,15,20,.80)); }
.metric-card span { display: block; color: #a8a6b0; font-size: 11px; }
.metric-card strong { display: block; margin: 12px 0 5px; font-size: 30px; letter-spacing: -.05em; }
.metric-card small { color: #777582; font-size: 10px; }
.metric-warn strong { color: #ffc36a; }
.metric-danger strong { color: #ff6384; }
.dashboard-grid { display: grid; grid-template-columns: minmax(720px, 1fr) 310px; gap: 14px; }
.panel { border: 1px solid rgba(255,255,255,.095); border-radius: 15px; background: linear-gradient(145deg, rgba(20,20,27,.93), rgba(13,13,18,.86)); box-shadow: 0 16px 42px rgba(0,0,0,.15); overflow: hidden; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 19px 20px 17px; border-bottom: 1px solid rgba(255,255,255,.075); }
.panel-heading .eyebrow { margin-bottom: 5px; }
.segmented { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid rgba(255,255,255,.10); border-radius: 9px; background: rgba(7,7,10,.52); }
.segmented button, .choice-row button { border: 0; border-radius: 6px; padding: 6px 9px; color: #9b99a4; background: transparent; cursor: pointer; font-size: 10px; }
.segmented button:hover, .choice-row button:hover { color: #f3f1f5; }
.segmented button[aria-pressed="true"], .choice-row button[aria-pressed="true"] { color: #ffeef2; background: rgba(220, 24, 75, .76); box-shadow: 0 2px 9px rgba(188, 10, 54, .23); }
.table-head { display: grid; align-items: center; gap: 14px; padding: 11px 20px; color: #72707c; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.grid-head, .grid-row { grid-template-columns: minmax(160px,1.55fr) .65fr minmax(135px,1fr) .62fr .92fr .55fr; }
.grid-row { width: 100%; display: grid; align-items: center; gap: 14px; min-height: 64px; padding: 10px 20px; border: 0; border-bottom: 1px solid rgba(255,255,255,.055); color: #e8e7eb; background: transparent; cursor: pointer; text-align: left; transition: .16s ease; }
.grid-row:last-child { border-bottom: 0; }
.grid-row:hover, .grid-row.is-selected { background: linear-gradient(90deg, rgba(234, 31, 82, .13), rgba(234,31,82,.018)); }
.grid-row.is-selected { box-shadow: inset 2px 0 #ff4a75; }
.grid-name b { display: block; font-size: 12px; }
.grid-name small { display: block; margin-top: 3px; color: #85838d; font-size: 10px; }
.cell-number { color: #cbc9d1; font-size: 11px; font-weight: 700; }
.stock { color: #c6c5cd; font-size: 11px; }
.meter { display: block; width: 100%; height: 5px; margin-top: 6px; overflow: hidden; border-radius: 8px; background: rgba(255,255,255,.09); }
.meter i { display: block; height: 100%; border-radius: inherit; background: #ff4f7b; }
.meter.is-ready i { background: #55d78c; }
.meter.is-no_data i { background: #70707d; }
.deficit { font-size: 11px; font-weight: 800; }
.deficit.is-ready { color: #6ce3a0; }
.deficit.is-warning { color: #ffca73; }
.deficit.is-critical { color: #ff6181; }
.deficit.is-no-data { color: #898792; }
.state { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: #aaa8b2; font-size: 10px; }
.state .dot { width: 6px; height: 6px; box-shadow: none; }
.state-ready { color: #83eab1; }.state-ready .dot { background: #51d68a; }.state-warning { color: #ffcd78; }.state-warning .dot { background: #f7ba58; }.state-critical { color: #ff7b97; }.state-critical .dot { background: #ff496e; }.state-no_data { color: #aaa8b2; }.state-no_data .dot { background: #82818b; }
.recalculated { color: #86848f; font-size: 10px; }
.panel-footer { display: flex; justify-content: space-between; align-items: center; min-height: 47px; padding: 0 20px; border-top: 1px solid rgba(255,255,255,.06); color: #93919c; font-size: 10px; }
.text-button { border: 0; padding: 0; color: #f59bb1; background: transparent; cursor: pointer; font-size: 10px; }
.guide-panel { padding: 20px; }.guide-panel h2 { margin-top: 7px; }.guide-panel > p:not(.eyebrow) { margin: 12px 0 19px; color: #aaa8b2; font-size: 11px; line-height: 1.52; }
.guide-list { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }.guide-list li { display: flex; align-items: center; gap: 10px; }.guide-index { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: #ff8ba6; background: rgba(223, 25, 77, .13); font-size: 9px; font-weight: 800; }.guide-list b, .guide-list small { display: block; }.guide-list b { font-size: 11px; }.guide-list small { margin-top: 3px; color: #888691; font-size: 10px; }
.guide-status { display: flex; gap: 9px; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.075); }.guide-status b, .guide-status small { display: block; }.guide-status b { color: #ff8aa4; font-size: 11px; }.guide-status small { margin-top: 3px; color: #898792; font-size: 10px; line-height: 1.35; }
.channels-panel { margin-top: 14px; }.channels-heading { align-items: center; }.panel-caption { margin: 5px 0 0; color: #9997a1; font-size: 11px; }.channels-controls { display: flex; align-items: center; gap: 10px; }.search { display: flex; align-items: center; width: 162px; gap: 6px; padding: 0 10px; border: 1px solid rgba(255,255,255,.10); border-radius: 9px; color: #777581; background: rgba(7,7,10,.52); }.search input { width: 100%; height: 29px; outline: 0; border: 0; color: #e8e6eb; background: transparent; font-size: 11px; }.search input::placeholder { color: #777581; }
.selection-toolbar { display: flex; align-items: center; gap: 13px; min-height: 52px; padding: 8px 20px; color: #d6d4da; border-bottom: 1px solid rgba(255,255,255,.065); background: rgba(167, 19, 58, .055); font-size: 11px; }.selection-toolbar b { color: #ff7896; }.selection-hint { color: #918f99; font-size: 10px; }.selection-toolbar .button { margin-left: auto; min-height: 31px; font-size: 10px; }
.channel-head, .channel-row { grid-template-columns: 26px minmax(160px,1.35fr) .9fr .78fr .85fr .9fr 120px; }.channel-row { display: grid; align-items: center; gap: 14px; min-height: 67px; padding: 10px 20px; border-bottom: 1px solid rgba(255,255,255,.055); }.channel-row:last-child { border-bottom: 0; }.channel-row:hover { background: rgba(255,255,255,.018); }.channel-row b { font-size: 12px; }.channel-row small { display: block; margin-top: 4px; }.channel-row > span { color: #bbb9c2; font-size: 11px; }.channel-row .state { font-size: 9px; }.check { appearance: none; display: grid; place-items: center; width: 15px; height: 15px; margin: 0; border: 1px solid rgba(255,255,255,.24); border-radius: 4px; background: #101016; cursor: pointer; }.check:checked { border-color: #ed2c60; background: #df1b50; }.check:checked::after { content: "✓"; color: #fff; font-size: 10px; font-weight: 900; }.coverage { font-weight: 800; }.coverage.ready { color: #74dda2; }.coverage.warning { color: #ffd07e; }.coverage.critical { color: #ff7894; }.coverage.no_data { color: #a3a1ab; }.berserk { min-height: 31px; padding: 0 10px; border: 1px solid rgba(255, 91, 131, .4); border-radius: 8px; color: #ffc4d1; background: rgba(222, 26, 77, .12); cursor: pointer; font-size: 10px; font-weight: 800; }.berserk:hover { border-color: #ff6387; background: rgba(222, 26, 77, .22); }.muted-action { color: #7e7c87; font-size: 10px; }
.empty-row { padding: 24px 20px; color: #908e99; font-size: 12px; }
.button:disabled { cursor: not-allowed; filter: saturate(.35); opacity: .48; }
.modal { width: min(540px, calc(100vw - 32px)); padding: 0; color: #f4f2f6; border: 1px solid rgba(255,255,255,.14); border-radius: 17px; background: #16161e; box-shadow: 0 24px 90px rgba(0,0,0,.62); }.modal::backdrop { background: rgba(3,3,6,.72); backdrop-filter: blur(7px); }.modal-content { padding: 22px; }.modal-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }.modal-title-row h2 { font-size: 21px; }.icon-button { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid rgba(255,255,255,.13); border-radius: 8px; color: #a5a3ad; background: rgba(255,255,255,.035); cursor: pointer; font-size: 20px; line-height: 1; }.modal-intro { margin: 14px 0 20px; color: #aaa8b2; font-size: 12px; line-height: 1.5; }.modal fieldset { margin: 14px 0; padding: 0; border: 0; }.modal legend { margin-bottom: 8px; color: #c8c6ce; font-size: 11px; font-weight: 700; }.choice-row { display: flex; gap: 5px; }.choice-row button { flex: 1; padding: 9px; border: 1px solid rgba(255,255,255,.11); border-radius: 8px; background: rgba(255,255,255,.035); }.choice-row-wide button { font-size: 10px; }.preflight { margin: 19px 0; padding: 14px; border: 1px solid rgba(255, 189, 100, .20); border-radius: 11px; background: rgba(126, 84, 28, .12); color: #cfc1a5; font-size: 11px; line-height: 1.55; }.preflight strong { color: #f8e2b6; }.preflight .ok { color: #72d9a0; }.preflight .skip { color: #f7c272; }.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }.berserk-steps { display: grid; grid-template-columns: 25px 1fr; gap: 8px 11px; align-items: center; padding: 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; background: rgba(255,255,255,.025); }.berserk-steps span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #ff91aa; background: rgba(237, 38, 89, .15); font-size: 10px; font-weight: 800; }.berserk-steps p { margin: 0; color: #c0bec6; font-size: 11px; line-height: 1.35; }.demo-block { display: flex; gap: 10px; margin-top: 16px; padding: 12px; border-radius: 10px; background: rgba(246, 179, 77, .08); }.demo-block b, .demo-block small { display: block; }.demo-block b { color: #edcf96; font-size: 11px; }.demo-block small { margin-top: 3px; color: #a99e8b; font-size: 10px; line-height: 1.4; }.toast { position: fixed; z-index: 10; left: 50%; bottom: 25px; max-width: 460px; padding: 11px 15px; border: 1px solid rgba(255,255,255,.15); border-radius: 10px; color: #efedf1; background: rgba(25,25,33,.96); box-shadow: 0 15px 40px rgba(0,0,0,.35); font-size: 12px; pointer-events: none; opacity: 0; transform: translate(-50%, 12px); transition: .2s ease; }.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 1250px) { .workspace { padding: 28px 28px 40px; }.dashboard-grid { grid-template-columns: minmax(660px, 1fr) 280px; }.grid-head, .grid-row { grid-template-columns: minmax(140px,1.4fr) .6fr minmax(120px,.95fr) .55fr .86fr .48fr; }.channel-head, .channel-row { grid-template-columns: 24px minmax(136px,1.2fr) .76fr .66fr .74fr .76fr 108px; gap: 9px; }.channel-row, .table-head { padding-left: 16px; padding-right: 16px; } }