/* Royalty Music — Cabinet (matches real service) */
:root {
/* Surfaces — dark refined */
--bg: #0c0e16;
--bg-elev: #131623;
--bg-card: #181b2a;
--bg-card-2: #1f2236;
--bg-hover: #252944;
--line: rgba(255, 255, 255, 0.06);
--line-strong: rgba(255, 255, 255, 0.10);
--fg: #eef0f8;
--fg-2: #a8aec5;
--fg-3: #6c7290;
--fg-4: #4a4e6a;
/* Brand — purple/indigo from screenshots */
--brand: #6b5ced;
--brand-2: #8676ff;
--brand-3: #5a4ddb;
--brand-glow: rgba(107, 92, 237, 0.35);
--teal: #36d6c3;
--amber: #f5b544;
--rose: #ff6b8a;
--green: #34d39a;
--red: #ff5d6c;
--radius-sm: 8px;
--radius: 14px;
--radius-lg: 18px;
--radius-xl: 24px;
--shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.32);
/* Sidebar palette — defaults match dark theme */
--sb-bg: linear-gradient(180deg, #1a1640 0%, #15132e 60%, #11102a 100%);
--sb-card: rgba(255,255,255,0.04);
--sb-card-line: rgba(255,255,255,0.08);
--sb-text: #c5c2e0;
--sb-text-strong: #ffffff;
--sb-text-soft: #b6b3d6;
--sb-account-bg: rgba(255,255,255,0.06);
--sb-active-bg: linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.06));
--sb-hover-bg: rgba(255,255,255,0.05);
/* Tile palette tweaks per theme */
--plat-name: #ffffff;
--plat-share: rgba(255,255,255,0.7);
}
[data-theme="light"] {
--bg: #f5f6fb;
--bg-elev: #ffffff;
--bg-card: #ffffff;
--bg-card-2: #f8f9fc;
--bg-hover: #eef0f7;
--line: rgba(20, 22, 40, 0.07);
--line-strong: rgba(20, 22, 40, 0.12);
--fg: #16182a;
--fg-2: #4d5170;
--fg-3: #7a7f9b;
--fg-4: #aab0c5;
--brand: #6b5ced;
--brand-2: #6b5ced;
--brand-3: #5a4ddb;
--brand-glow: rgba(107, 92, 237, 0.22);
--shadow-card: 0 1px 2px rgba(20,22,40,0.04), 0 6px 20px rgba(20,22,40,0.06);
--sb-bg: linear-gradient(180deg, #f1eefe 0%, #ebe6fc 60%, #e6e0fa 100%);
--sb-card: rgba(255,255,255,0.7);
--sb-card-line: rgba(107,92,237,0.14);
--sb-text: #4a4866;
--sb-text-strong: #1a1640;
--sb-text-soft: #6f6a8e;
--sb-account-bg: rgba(255,255,255,0.85);
--sb-active-bg: linear-gradient(180deg, #ffffff, #f5f1ff);
--sb-hover-bg: rgba(255,255,255,0.6);
}
* { box-sizing: border-box; }
html, body {
margin: 0; padding: 0;
background: var(--bg);
color: var(--fg);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 14px;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body {
background:
radial-gradient(1200px 700px at 100% -10%, rgba(107, 92, 237, 0.10), transparent 60%),
radial-gradient(900px 500px at -10% 110%, rgba(54, 214, 195, 0.04), transparent 60%),
var(--bg);
min-height: 100vh;
}
[data-theme="light"] body {
background:
radial-gradient(1100px 600px at 100% -10%, rgba(107, 92, 237, 0.10), transparent 60%),
radial-gradient(800px 500px at -10% 110%, rgba(54, 214, 195, 0.06), transparent 60%),
var(--bg);
}
.mono { font-family: 'JetBrains Mono', monospace; font-feature-settings: 'tnum'; }
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
.display { font-family: 'Inter Tight', 'Inter', sans-serif; letter-spacing: -0.02em; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; }
/* App shell */
.app {
display: grid;
grid-template-columns: 248px 1fr;
min-height: 100vh;
}
/* Sidebar — purple gradient like real service but dark-tinted */
.sidebar {
border-right: 1px solid var(--line);
padding: 18px 12px;
display: flex; flex-direction: column;
background: var(--sb-bg);
position: sticky; top: 0;
height: 100vh;
overflow-y: auto;
}
.sb-card {
background: var(--sb-card);
border: 1px solid var(--sb-card-line);
border-radius: 14px;
padding: 12px;
margin-bottom: 14px;
display: flex;
align-items: center;
gap: 10px;
}
.sb-avatar {
width: 36px; height: 36px; border-radius: 50%;
background: linear-gradient(135deg, #b8aaff, #8676ff);
display: grid; place-items: center;
font-weight: 600; font-size: 13px; color: #1a1640;
flex-shrink: 0;
}
.sb-user-name { font-weight: 600; font-size: 13.5px; color: var(--sb-text-strong); }
.sb-user-role { font-size: 11px; color: var(--sb-text-soft); margin-top: 1px; }
.sb-logout {
margin-left: auto;
font-size: 12px;
padding: 5px 10px;
border-radius: 8px;
background: var(--sb-account-bg);
color: var(--sb-text-strong);
border: 1px solid var(--sb-card-line);
}
.sb-logout:hover { filter: brightness(1.06); }
.sb-account-label {
font-size: 11px;
color: var(--sb-text-soft);
padding: 0 4px 6px;
letter-spacing: 0.04em;
}
.sb-account-select {
display: flex; align-items: center;
background: var(--sb-account-bg);
border: 1px solid var(--sb-card-line);
border-radius: 10px;
padding: 9px 12px;
font-size: 13px; font-weight: 500; color: var(--sb-text-strong);
margin-bottom: 14px;
}
.sb-account-select svg { margin-left: auto; opacity: 0.6; }
.sb-item {
display: flex; align-items: center; gap: 11px;
padding: 9px 12px;
border-radius: 9px;
color: var(--sb-text);
font-size: 13.5px;
font-weight: 500;
cursor: pointer;
position: relative;
transition: background 0.15s, color 0.15s;
margin-bottom: 1px;
}
.sb-item:hover { background: var(--sb-hover-bg); color: var(--sb-text-strong); }
.sb-item .ico { width: 17px; height: 17px; opacity: 0.85; flex-shrink: 0; }
.sb-item .badge {
margin-left: auto;
font-size: 11px;
background: var(--brand);
color: #fff;
padding: 1px 7px;
border-radius: 999px;
font-weight: 600;
font-feature-settings: 'tnum';
}
.sb-item.active {
background: var(--sb-active-bg);
color: var(--sb-text-strong);
box-shadow: inset 0 0 0 1px var(--sb-card-line);
}
.sb-item.active .ico { opacity: 1; }
.sb-item .lead-emoji { font-size: 14px; width: 17px; text-align: center; }
/* Main */
.main { padding: 24px 32px 80px; min-width: 0; }
/* Page header */
.page-head {
display: flex; align-items: flex-start; gap: 16px;
margin-bottom: 22px;
}
.page-h1 {
font-family: 'Inter Tight', 'Inter', sans-serif;
font-size: 28px;
font-weight: 600;
letter-spacing: -0.025em;
margin: 0;
display: flex; align-items: center; gap: 10px;
}
.page-h1 .ic { font-size: 26px; }
.page-h1 .sub-name { color: var(--fg-3); font-weight: 500; font-size: 22px; }
.page-h1 small { font-size: 13px; color: var(--fg-3); font-weight: 500; margin-left: 8px; }
.page-sub { color: var(--fg-3); font-size: 13px; margin-top: 6px; max-width: 720px; }
.page-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
/* Buttons */
.btn {
display: inline-flex; align-items: center; gap: 8px;
height: 38px; padding: 0 16px;
border-radius: 10px;
font-size: 13px; font-weight: 500;
border: 1px solid var(--line);
background: var(--bg-card);
color: var(--fg);
white-space: nowrap;
transition: background 0.15s, border-color 0.15s;
}
.btn:hover { background: var(--bg-hover); }
.btn-primary {
background: linear-gradient(180deg, #7d6dff, #6451e0);
border-color: rgba(255,255,255,0.10);
color: #fff;
box-shadow: 0 8px 20px var(--brand-glow), inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { background: transparent; }
.btn-pill { border-radius: 999px; padding: 0 18px; }
/* Cards */
.card {
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
}
.card-pad { padding: 22px; }
.card-head {
display: flex; align-items: center; gap: 12px;
padding: 18px 22px;
border-bottom: 1px solid var(--line);
}
.card-head h3 {
margin: 0;
font-family: 'Inter Tight', 'Inter', sans-serif;
font-size: 16px;
font-weight: 600;
letter-spacing: -0.01em;
}
.card-head .sub { color: var(--fg-3); font-size: 12px; margin-top: 2px; }
.card-head .right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.dash-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; } .col-12 { grid-column: span 12; }
/* HERO total — matches "Итого за квартал" */
.hero-total {
position: relative;
padding: 28px 32px;
border-radius: var(--radius-lg);
background:
radial-gradient(600px 300px at 90% -20%, rgba(107,92,237,0.35), transparent 60%),
linear-gradient(135deg, #1a1d36 0%, #15172a 100%);
border: 1px solid rgba(107,92,237,0.18);
overflow: hidden;
}
.hero-total::after {
content: '';
position: absolute;
right: -100px; top: -100px;
width: 360px; height: 360px;
background: radial-gradient(circle, rgba(107,92,237,0.22), transparent 60%);
pointer-events: none;
}
.hero-total .row1 { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; position: relative; }
.hero-total .pill {
font-size: 11.5px; font-weight: 500;
padding: 4px 10px;
border-radius: 999px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.10);
color: var(--fg-2);
}
.hero-total .right-pill {
margin-left: auto;
font-size: 11.5px;
color: var(--fg-3);
}
.hero-total h2 {
margin: 0;
font-family: 'Inter Tight', 'Inter', sans-serif;
font-size: 14px;
color: var(--fg-2);
font-weight: 500;
}
.hero-total .amount {
font-family: 'Inter Tight', 'Inter', sans-serif;
font-weight: 600;
font-size: 56px;
letter-spacing: -0.03em;
line-height: 1;
margin: 14px 0 8px;
display: flex; align-items: baseline; gap: 8px;
position: relative;
}
.hero-total .amount .cur { color: var(--fg-3); font-size: 36px; font-weight: 500; }
.hero-total .caption { color: var(--fg-3); font-size: 12.5px; }
.coin-icon {
width: 56px; height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, #f5b544, #e88a30);
display: grid; place-items: center;
font-size: 26px;
flex-shrink: 0;
box-shadow: 0 8px 20px rgba(245, 181, 68, 0.25), inset 0 1px 0 rgba(255,255,255,0.3);
}
/* Platform tile (matches the colored squares) */
.plat-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.plat-tile {
position: relative;
padding: 18px;
border-radius: var(--radius);
border: 1px solid rgba(255,255,255,0.06);
overflow: hidden;
min-height: 138px;
}
.plat-tile.dark { background: linear-gradient(160deg, #2c2545, #1f1b34); }
.plat-tile.violet { background: linear-gradient(160deg, #5246ce, #3d34a3); }
.plat-tile.teal { background: linear-gradient(160deg, #2f8884, #1f5f5b); }
.plat-tile.cyan { background: linear-gradient(160deg, #0099bd, #006d8a); }
.plat-tile.gray { background: linear-gradient(160deg, #4b5067, #353849); }
.plat-tile.coral { background: linear-gradient(160deg, #d4583e, #a3402a); }
.plat-tile.green { background: linear-gradient(160deg, #2e9e6c, #1e6e4b); }
.plat-tile.amber { background: linear-gradient(160deg, #d49236, #a06a20); }
.plat-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.plat-name { font-size: 13.5px; font-weight: 600; color: #fff; letter-spacing: -0.005em; }
.plat-share { font-size: 12px; color: rgba(255,255,255,0.7); font-weight: 500; }
.plat-amount {
display: flex; align-items: flex-end; gap: 4px;
font-family: 'Inter Tight', 'Inter', sans-serif;
font-weight: 600;
font-size: 26px;
letter-spacing: -0.02em;
color: #fff;
line-height: 1;
}
.plat-amount .cur { font-size: 18px; opacity: 0.75; font-weight: 500; }
.plat-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 11.5px; color: rgba(255,255,255,0.65); }
.plat-globe {
width: 26px; height: 26px;
border-radius: 50%;
background: rgba(255,255,255,0.10);
display: grid; place-items: center;
}
.plat-delta {
margin-left: auto;
font-size: 11.5px; font-weight: 500;
background: rgba(0,0,0,0.25);
border: 1px solid rgba(255,255,255,0.08);
padding: 3px 8px;
border-radius: 6px;
color: #b8efb8;
}
.plat-period {
font-size: 11px;
color: rgba(255,255,255,0.55);
margin-top: 6px;
}
/* Track row in "top tracks" */
.toplist-card { padding: 20px 22px; }
.toplist-card h3 { margin: 0 0 4px; font-family: 'Inter Tight'; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.toplist-card .sub { color: var(--fg-3); font-size: 12px; margin-bottom: 18px; }
.toplist-hero {
text-align: center;
padding: 8px 0 16px;
border-bottom: 1px dashed var(--line);
margin-bottom: 14px;
}
.toplist-hero .label { color: var(--fg-3); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
.toplist-hero .name {
font-size: 13.5px; color: var(--fg-2); margin-top: 6px;
}
.toplist-hero .amount {
font-family: 'Inter Tight';
font-size: 34px; font-weight: 600; letter-spacing: -0.025em;
margin-top: 10px;
}
.toplist-hero .caption { color: var(--fg-3); font-size: 11.5px; margin-top: 4px; }
.tlist-row {
display: flex; align-items: center; justify-content: space-between;
padding: 9px 0;
font-size: 13px;
}
.tlist-row .name { font-weight: 500; }
.tlist-row .amt {
background: rgba(107,92,237,0.10);
border: 1px solid rgba(107,92,237,0.18);
color: #b8aeff;
padding: 3px 10px;
border-radius: 999px;
font-feature-settings: 'tnum';
font-size: 12px;
font-weight: 500;
}
/* Table */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td {
text-align: left; padding: 13px 16px;
font-size: 13px; border-bottom: 1px solid var(--line);
}
.tbl th {
font-weight: 500;
color: var(--fg-3);
font-size: 11.5px;
text-transform: uppercase;
letter-spacing: 0.05em;
background: rgba(255,255,255,0.012);
}
.tbl tbody tr:hover { background: rgba(255,255,255,0.02); }
.tbl td.num, .tbl th.num { text-align: right; font-feature-settings: 'tnum'; }
/* Wide tables get a horizontal-scroll envelope so they stay inside the
card on narrow viewports instead of pushing the whole layout sideways. */
.tbl-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Denser modifier for tables with many columns (e.g. /history). */
.tbl-compact th,
.tbl-compact td { padding: 9px 10px; font-size: 12.5px; white-space: nowrap; }
.tbl-compact th { font-size: 10.5px; }
.tbl-compact .btn { height: 26px; padding: 0 8px; font-size: 11.5px; gap: 4px; }
.tbl-compact .row-acts { display: inline-flex; gap: 4px; align-items: center; }
/* Slim KPI card variant — same look, less padding/font, for pages that
put 4 metrics in a row without much breathing room. */
.kpi-slim .card-pad { padding: 14px 16px; }
.kpi-slim .kpi-label { font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; }
.kpi-slim .kpi-value { font-family: 'Inter Tight', 'Inter', sans-serif;
font-size: 19px; font-weight: 600; letter-spacing: -0.025em; }
.kpi-slim .kpi-row { display: flex; align-items: flex-end; justify-content: space-between;
gap: 8px; margin-top: 10px; min-width: 0; }
.kpi-slim .kpi-row > svg { flex-shrink: 0; }
.kpi-slim .kpi-sub { font-size: 10.5px; margin-top: 6px; line-height: 1.3; color: var(--fg-3); }
.cell-project { display: flex; align-items: center; gap: 12px; }
.cell-project .av {
width: 32px; height: 32px;
border-radius: 9px;
display: grid; place-items: center;
font-weight: 600; font-size: 12px;
color: #0c0e16;
flex-shrink: 0;
}
.cell-project .name { font-weight: 500; font-size: 13.5px; }
.cell-project .meta { font-size: 11.5px; color: var(--fg-3); }
.tag {
display: inline-flex; align-items: center; gap: 5px;
font-size: 11.5px; font-weight: 500;
padding: 3px 9px;
border-radius: 6px;
border: 1px solid var(--line);
background: var(--bg-card-2);
color: var(--fg-2);
}
.tag.active { color: #66e6a8; background: rgba(54,214,130,0.08); border-color: rgba(54,214,130,0.18); }
.tag.pending { color: #f5cc7a; background: rgba(245,181,68,0.08); border-color: rgba(245,181,68,0.18); }
.tag.paid { color: #a8c2ff; background: rgba(107,92,237,0.10); border-color: rgba(107,92,237,0.20); }
.tag.hold { color: #ff9aa9; background: rgba(255,93,108,0.08); border-color: rgba(255,93,108,0.20); }
.tag.neg { color: #ff8aa1; background: rgba(255,93,108,0.10); border-color: rgba(255,93,108,0.18); }
.chip {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11.5px; padding: 4px 9px;
border-radius: 999px;
background: var(--bg-card-2);
border: 1px solid var(--line);
color: var(--fg-2);
font-weight: 500;
}
/* Project card on /Проекты page */
.project-card {
display: grid;
grid-template-columns: 1fr 130px 100px auto;
gap: 22px;
align-items: center;
padding: 18px 22px;
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
margin-bottom: 12px;
box-shadow: var(--shadow-card);
transition: transform 0.15s, border-color 0.15s;
}
.project-card:hover { border-color: var(--line-strong); }
.pc-info .row1 { display: flex; align-items: center; gap: 12px; }
.pc-info .av {
width: 44px; height: 44px;
border-radius: 11px;
display: grid; place-items: center;
font-weight: 600; font-size: 14px;
color: #0c0e16;
}
.pc-info .name { font-family: 'Inter Tight'; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.pc-info .meta { color: var(--fg-3); font-size: 12.5px; line-height: 1.55; margin-top: 6px; }
.pc-info .meta b { color: var(--fg-2); font-weight: 500; }
.pc-info .meta a { color: #b8aeff; }
.pc-stat {
text-align: center;
padding: 14px 8px;
background: var(--bg-card-2);
border: 1px solid var(--line);
border-radius: 12px;
}
.pc-stat .lbl { font-size: 11px; letter-spacing: 0.05em; color: var(--fg-3); text-transform: uppercase; }
.pc-stat .val { margin-top: 6px; font-family: 'Inter Tight'; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.pc-stat .val .cur { color: var(--fg-3); font-weight: 500; }
.pc-stat .val .neg { color: var(--red); }
.pc-stat .val .pos { color: var(--green); }
.pc-stat .foot { margin-top: 6px; font-size: 11px; color: var(--fg-3); }
/* tabs (in project detail) */
.tabbar {
display: flex;
gap: 22px;
border-bottom: 1px solid var(--line);
margin-bottom: 22px;
padding: 0 4px;
}
.tabbar .tab {
padding: 10px 4px;
font-size: 13.5px;
font-weight: 500;
color: var(--fg-3);
border-bottom: 2px solid transparent;
cursor: pointer;
display: inline-flex; align-items: center; gap: 6px;
}
.tabbar .tab:hover { color: var(--fg-2); }
.tabbar .tab.active {
color: var(--fg);
border-bottom-color: var(--brand-2);
}
/* form */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 12px; color: var(--fg-2); font-weight: 500; }
.field-label .req { color: var(--rose); margin-left: 2px; }
.input, .select, .textarea {
height: 40px;
background: var(--bg-card-2);
border: 1px solid var(--line);
border-radius: 10px;
padding: 0 14px;
color: var(--fg);
font-size: 13.5px;
outline: none;
transition: border-color 0.15s;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--brand); }
.input::placeholder { color: var(--fg-4); }
.textarea { height: auto; padding: 12px 14px; }
.helper { font-size: 11.5px; color: var(--fg-3); }
/* search input big */
.search-big {
width: 100%;
display: flex; align-items: center; gap: 10px;
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: 12px;
padding: 0 16px;
height: 46px;
}
.search-big input { background: none; border: none; outline: none; color: var(--fg); width: 100%; font-size: 14px; }
.search-big kbd {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
padding: 2px 6px;
border-radius: 4px;
background: var(--bg-elev);
border: 1px solid var(--line);
color: var(--fg-3);
}
/* upload zone */
.upload-zone {
border: 1.5px dashed var(--line-strong);
border-radius: 14px;
padding: 30px;
background: var(--bg-card-2);
text-align: center;
}
.upload-zone .mainbtn {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 16px;
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: 10px;
font-size: 13px; font-weight: 500;
}
.upload-zone .hint { font-size: 12px; color: var(--fg-3); margin-top: 12px; }
/* info banner */
.banner {
background: rgba(107,92,237,0.10);
border: 1px solid rgba(107,92,237,0.22);
color: #c8c0ff;
padding: 14px 18px;
border-radius: 12px;
font-size: 13px;
display: flex; align-items: center; gap: 12px;
}
.banner.info { background: rgba(74, 139, 255, 0.08); border-color: rgba(74, 139, 255, 0.20); color: #b6d2ff; }
.banner.warn { background: rgba(245, 181, 68, 0.08); border-color: rgba(245, 181, 68, 0.20); color: #ffd793; }
/* approval card */
.approval {
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 20px 22px;
margin-bottom: 14px;
}
.approval-head {
display: grid;
grid-template-columns: 1fr 130px 150px 130px;
gap: 22px;
align-items: center;
}
.approval-title { display: flex; align-items: center; gap: 14px; }
.approval-title .name { font-family: 'Inter Tight'; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.approval-title .meta { color: var(--fg-3); font-size: 12px; margin-top: 4px; line-height: 1.55; }
.approval-stat .lbl { font-size: 10.5px; color: var(--fg-3); letter-spacing: 0.05em; text-transform: uppercase; }
.approval-stat .val { margin-top: 6px; font-family: 'Inter Tight'; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; font-feature-settings: 'tnum'; }
.expand-row {
margin-top: 14px;
display: flex; align-items: center; gap: 10px;
padding: 11px 14px;
background: var(--bg-card-2);
border: 1px solid var(--line);
border-radius: 10px;
font-size: 13px;
cursor: pointer;
}
.expand-row .arr { transition: transform 0.2s; color: var(--fg-3); }
.expand-row.open .arr { transform: rotate(90deg); }
.expand-row + .expand-row { margin-top: 8px; }
.approval-foot {
display: flex; align-items: center; gap: 10px;
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var(--line);
}
.approval-foot select {
background: var(--bg-card-2);
border: 1px solid var(--line);
height: 36px;
border-radius: 8px;
padding: 0 12px;
color: var(--fg);
font-size: 13px;
}
/* progress */
.progress { height: 6px; background: var(--bg-elev); border-radius: 999px; overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: 999px; }
.divider { height: 1px; background: var(--line); margin: 14px 0; }
.row { display: flex; align-items: center; gap: 10px; }
.between { display: flex; justify-content: space-between; align-items: center; }
.muted { color: var(--fg-3); }
.fg2 { color: var(--fg-2); }
.page { animation: fadeUp .28s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #2a2e44; border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: #d4d8e6; }
.legend {
display: inline-flex; gap: 12px; align-items: center;
flex-wrap: wrap; max-width: 720px;
row-gap: 6px;
}
.legend-item { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--fg-2); white-space: nowrap; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.chart-toolbar {
display: inline-flex;
background: var(--bg-card-2);
border: 1px solid var(--line);
border-radius: 10px;
padding: 3px;
font-size: 12px;
}
.chart-toolbar button {
padding: 5px 11px;
border-radius: 7px;
color: var(--fg-3);
font-weight: 500;
}
.chart-toolbar button.active {
background: var(--bg-hover);
color: var(--fg);
}
.kbd-shortcut {
font-family: 'JetBrains Mono', monospace;
font-size: 11px; padding: 2px 6px;
border-radius: 4px;
background: var(--bg-elev);
border: 1px solid var(--line);
color: var(--fg-3);
}
/* ==============================================================
Strip default underline EVERYWHERE inside the cabinet shell.
Sidebar nav items, in-table action links, banner links — all
should look like UI affordances, not inline document hyperlinks.
Real document text never has in this app, so this is safe.
============================================================== */
.sidebar a,
.sidebar a:hover,
.sidebar a:visited,
.sidebar a:active,
.main a,
.main a:visited {
text-decoration: none;
}
.main a:hover { text-decoration: none; }
/* Plain text-links (anything that's not a button/sb-item) inside main
content default to the foreground color so they're readable on the
dark card background; the browser's default purple/blue is unreadable.
Hover lifts to the brand color for affordance. !important guards
against the user-agent stylesheet's :visited rule, which otherwise
wins on color due to UA-style specificity quirks for visited links. */
.main a:not(.btn):not(.sb-item):not(.sb-account-select):not(.sb-logout),
.main a:not(.btn):not(.sb-item):not(.sb-account-select):not(.sb-logout):visited {
color: var(--fg) !important;
border-bottom: 1px dashed var(--line-strong);
}
.main a:not(.btn):not(.sb-item):not(.sb-account-select):not(.sb-logout):hover {
color: var(--brand-2) !important;
border-bottom-color: var(--brand-2);
}
.sb-item, .sb-item:hover, .sb-item:visited, .sb-item:active {
text-decoration: none;
}
.sb-account-select, .sb-account-select:hover, .sb-account-select:visited {
text-decoration: none;
}
.btn, .btn:hover, .btn:visited { text-decoration: none; }
/* ==============================================================
Chart filter pills (12М / 6М / 3М) — clickable when JS hooks them.
.chart-toolbar already styles the wrapper; this just makes hover
/ active states visible in both themes.
============================================================== */
.chart-toolbar button {
background: transparent;
border: 0;
cursor: pointer;
font: inherit;
transition: background 0.15s, color 0.15s;
}
.chart-toolbar button:hover {
background: var(--bg-hover);
color: var(--fg);
}
/* ==============================================================
LIGHT-THEME refinements.
The default palette was tuned for dark mode; without these
overrides several blocks drop below the AA contrast bar in
the light theme (info banners, hover states, chips, tags,
ghost buttons).
============================================================== */
[data-theme="light"] .btn {
background: var(--bg-card);
color: var(--fg);
border-color: var(--line);
}
[data-theme="light"] .btn:hover {
background: #eef0f7;
color: var(--fg);
border-color: var(--line-strong);
}
[data-theme="light"] .btn-primary {
background: linear-gradient(180deg, #7d6dff, #6451e0);
color: #fff !important;
border-color: rgba(255,255,255,0.18);
}
/* Don't use `filter: brightness(>1)` for hover in light mode — on a
solid-purple gradient it whitens the button so far that the white
label text becomes unreadable. Replace with an explicit *darker*
gradient + slight shadow so the hover state stays clearly readable. */
[data-theme="light"] .btn-primary:hover {
background: linear-gradient(180deg, #6655e8, #5141c8);
color: #fff !important;
filter: none;
box-shadow: 0 6px 16px rgba(107,92,237,0.35);
}
/* Same logic for .sb-item.active (active sidebar pill becomes near-white
in the light theme due to the white gradient — when you hover, the
default `:hover { background: var(--sb-hover-bg); color: var(--sb-text-strong); }`
keeps the dark text but the background becomes nearly-white-on-white).
Make sure hover background stays distinguishable from the page. */
[data-theme="light"] .sb-item.active:hover {
background: linear-gradient(180deg, #f5f1ff, #ebe4ff);
color: #1a1640;
}
[data-theme="light"] .banner {
background: rgba(107,92,237,0.07);
border-color: rgba(107,92,237,0.22);
color: #2c2570;
}
[data-theme="light"] .banner.info {
background: rgba(74, 139, 255, 0.07);
border-color: rgba(74, 139, 255, 0.28);
color: #1c3d80;
}
[data-theme="light"] .banner.warn {
background: rgba(245, 138, 30, 0.10);
border-color: rgba(245, 138, 30, 0.30);
color: #804a00;
}
[data-theme="light"] .upload-zone {
background: #fafbff;
border-color: var(--line-strong);
}
[data-theme="light"] .upload-zone .hint,
[data-theme="light"] .helper {
color: #4d5170;
}
[data-theme="light"] .field-label {
color: #303554;
}
[data-theme="light"] .chart-toolbar {
background: #f0f2f8;
border-color: var(--line);
}
[data-theme="light"] .chart-toolbar button {
color: #4d5170;
}
[data-theme="light"] .chart-toolbar button.active {
background: #ffffff;
color: #16182a;
box-shadow: 0 1px 2px rgba(20,22,40,0.08);
}
[data-theme="light"] .chart-toolbar button:hover:not(.active) {
background: rgba(20,22,40,0.04);
color: #16182a;
}
[data-theme="light"] .chip {
background: #eef0f7;
color: #303554;
border-color: var(--line);
}
[data-theme="light"] .tag {
background: #eef0f7;
color: #303554;
}
[data-theme="light"] .tag.active {
background: rgba(16,185,129,0.12);
color: #0f7a55;
}
[data-theme="light"] .tag.pending {
background: rgba(245,181,68,0.16);
color: #855200;
}
[data-theme="light"] .muted,
[data-theme="light"] .fg2,
[data-theme="light"] .fg3 {
color: #4d5170;
}
[data-theme="light"] .legend-item { color: #4d5170; }
[data-theme="light"] .page-sub { color: #4d5170; }
[data-theme="light"] table.tbl thead th {
color: #4d5170;
background: #f5f6fb;
}
[data-theme="light"] .input,
[data-theme="light"] .select,
[data-theme="light"] .textarea {
background: #ffffff;
color: #16182a;
border-color: var(--line);
}
[data-theme="light"] .input::placeholder,
[data-theme="light"] .textarea::placeholder { color: #9ca0bb; }
/* ==================================================================
Mobile / tablet adaptation
==================================================================
The desktop layout assumes a 248px sidebar + wide canvas. On phones
this collapses into a top hamburger bar; the sidebar slides over the
page as a drawer; grids stack vertically; tables scroll horizontally.
Backdrop-overlay closes the drawer on tap.
================================================================== */
/* Hamburger bar: hidden by default (desktop), shown via media query. */
.mobile-bar {
display: none;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: var(--bg-elev);
border-bottom: 1px solid var(--line);
position: sticky;
top: 0;
z-index: 50;
}
.mobile-bar .ham {
width: 38px; height: 38px;
display: grid; place-items: center;
border: 1px solid var(--line);
border-radius: 9px;
cursor: pointer;
background: var(--bg-card);
}
.mobile-bar .ham svg { width: 18px; height: 18px; stroke: var(--fg); }
.mobile-bar .title {
font-family: 'Inter Tight', sans-serif;
font-weight: 600; font-size: 15px;
flex: 1;
}
.mobile-bar .pill {
font-size: 11px;
padding: 4px 10px;
border-radius: 999px;
background: var(--bg-card-2);
border: 1px solid var(--line);
color: var(--fg-2);
}
/* Backdrop behind the drawer when sidebar is open on mobile. */
.sb-backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
z-index: 90;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
body.sb-open .sb-backdrop { display: block; }
@media (max-width: 900px) {
/* Global overflow guard. Important: do NOT put overflow-x:hidden on
html — that breaks `position: sticky` for the mobile-bar in Chrome.
Apply containment to the .main scroll-context only; tables keep
their own local overflow-x:auto for horizontal scroll. */
html, body { max-width: 100vw; }
body { width: 100%; overflow-x: clip; } /* Chrome 90+, Safari 15.4+ */
.app { max-width: 100vw; overflow-x: clip; }
.main { max-width: 100%; min-width: 0; overflow-x: clip; }
/* Every block must respect the parent width. Kills 200px-fixed
filter inputs and other inline-styled elements from pushing the
viewport sideways. */
.page > *, .card, .card-pad, .approval, .banner { max-width: 100%; }
/* Long unbreakable strings (URLs, mono ISRCs) wrap inside cells. */
.approval, .card .meta, .field-error { overflow-wrap: anywhere; }
/* Layout: stack everything */
.app {
grid-template-columns: 1fr;
}
/* Sidebar: off-canvas drawer */
.sidebar {
position: fixed;
top: 0; left: 0; bottom: 0;
width: min(86vw, 340px);
z-index: 100;
transform: translateX(-100%);
transition: transform 0.22s ease-out;
overflow-y: auto;
padding: 18px 14px 24px;
}
body.sb-open .sidebar {
transform: translateX(0);
box-shadow: 18px 0 40px rgba(0, 0, 0, 0.45);
}
/* Hamburger bar visible on phones */
.mobile-bar { display: flex; }
/* Main content padding */
.main { padding: 14px 12px 80px; }
/* Page header stacks */
.page-head {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.page-actions {
margin-left: 0 !important;
justify-content: flex-start;
flex-wrap: wrap;
}
.page-h1 { font-size: 22px; }
.page-h1 small { display: block; margin-left: 0; margin-top: 2px; }
.page-sub { max-width: 100%; }
/* All grid columns become full-width */
.dash-grid { grid-template-columns: 1fr; gap: 12px; width: 100%; }
.col-3, .col-4, .col-5, .col-6,
.col-7, .col-8, .col-9, .col-12 {
grid-column: 1 / -1;
min-width: 0; /* CSS default is `auto`; without this a
long word inside a card pushes the
column wider than its grid track. */
}
/* Same trick for any inline grid that we converted to repeat(2,…). */
.main [style*="grid-template-columns"]:not(.form-grid) > * { min-width: 0; }
/* SVG charts must scale down with the container, not push it out. */
.rs-area, .rs-donut { max-width: 100%; }
.rs-area svg, .rs-donut svg { max-width: 100%; height: auto; }
/* Hero total: long amounts (e.g. «1 234 567 ₽») used to overflow the
32px font on a 320-wide phone. Use clamp() so the digits scale
with the screen but never get bigger than 38px. */
.hero-total .amount { font-size: clamp(22px, 8vw, 38px) !important; }
.hero-total .amount .cur { font-size: clamp(15px, 5vw, 26px) !important; }
/* KPI cards: the big number can be 5-7 digits + ₽ sign; cap at 22-24
so it fits a half-card width on a phone. */
.card-pad .tnum,
.card-pad [style*="font-size:24px"],
.card-pad [style*="font-size:26px"],
.card-pad [style*="font-size:28px"],
.card-pad [style*="font-size:30px"],
.card-pad [style*="font-size: 24px"],
.card-pad [style*="font-size: 26px"],
.card-pad [style*="font-size: 28px"],
.card-pad [style*="font-size: 30px"] {
font-size: clamp(18px, 5.5vw, 24px) !important;
min-width: 0;
overflow-wrap: anywhere;
}
/* Approval-card stats and any other inline-styled big numbers must
also keep within their column on a phone. */
.approval-stat .val { font-size: clamp(15px, 4.5vw, 18px) !important; min-width: 0; }
.approval-title .name { font-size: clamp(14px, 4vw, 17px); overflow-wrap: anywhere; }
.form-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
.form-grid .field[style*="grid-column"] { grid-column: 1 / -1 !important; }
/* === Kill fixed widths from inline styles ===
Filter rows on /payments, /journal etc. use `style="width:160px"` /
`width:200px` directly on .field wrappers. On phones force every
such field to 100% so they stack neatly under each other. */
.field[style*="width:"], .field[style*="min-width:"] {
width: 100% !important;
min-width: 0 !important;
flex: 1 1 100% !important;
}
/* Inline `style="width:200px"` on raw inputs / selects (e.g. the
payment-reference field on /approve). */
.input[style*="width:"], .select[style*="width:"], select[style*="width:"] {
width: 100% !important;
max-width: 100%;
}
/* Progress-bar columns in TOP TRACKS (`| `).
Inside an overflow-x table this keeps the column compact instead of
forcing 200px even when the screen is 320. */
td[style*="width:"] { width: auto !important; }
/* Inline filter forms: ` |