/* =========================================================================
   Nikaten AI — Apple-style design system
   Redesigned per the apple-design skill: system typography with size-specific
   tracking, translucent materials (backdrop-filter), soft layered depth,
   instant press feedback, spring-like easing, light/dark + a11y adaptation.
   All original class + CSS-variable names are preserved so every page adapts
   automatically just by changing the token *values*.
   ========================================================================= */

:root {
    /* ---- Apple LIGHT (default, the signature look) ---- */
    --bg: #f5f5f7;              /* page ground — Apple system gray 6 */
    --surface: #ffffff;         /* cards / raised surfaces */
    --surface-2: #f5f5f7;       /* insets, inputs, subtle fills */
    --surface-3: #e8e8ed;       /* hover / pressed fills */
    --border: rgba(0,0,0,.11);  /* hairline separators */
    --border-soft: rgba(0,0,0,.07);
    --text: #1d1d1f;            /* Apple near-black */
    --muted: #6e6e73;           /* secondary label */
    --muted-2: #a1a1a6;         /* tertiary label */

    --accent: #0071e3;          /* Apple system blue */
    --accent-2: #0077ed;        /* hover (a touch brighter) */
    --accent-dark: #006edb;     /* focus base */
    --accent-rgb: 0, 113, 227;
    --btn-text: #ffffff;

    /* semantic (positive / negative) — used by tables & reports */
    --pos: #1a7f37;             /* green */
    --neg: #d70015;             /* red   */
    --pos-bg: rgba(52,199,89,.12);
    --neg-bg: rgba(255,59,48,.11);
    /* legacy price-move tokens: up = red, down = green */
    --up: var(--neg);
    --down: var(--pos);

    /* translucent material (nav / chrome) */
    --material: rgba(255,255,255,.72);
    --material-edge: rgba(255,255,255,.5);
    --material-blur: saturate(180%) blur(20px);

    --radius: 12px;
    --radius-sm: 9px;
    --radius-lg: 18px;
    --radius-pill: 980px;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04);
    --shadow-md: 0 10px 34px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
    --shadow-lg: 0 24px 60px rgba(0,0,0,.16), 0 6px 16px rgba(0,0,0,.08);

    /* Apple-ish spring-emulating easing (interruptible-feeling ease-out) */
    --ease: cubic-bezier(.32, .72, 0, 1);
    --ease-out: cubic-bezier(.22, 1, .36, 1);

    --sidebar-w: 240px;

    color-scheme: light dark;
}

/* Apple DARK tokens.
   Applied when: the OS is dark AND the user hasn't forced light, OR the user
   explicitly picked dark via the theme switch. Kept in a single custom-property
   block referenced by both selectors below. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --nk-dark: 1; }
}
:root[data-theme="dark"] { --nk-dark: 1; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #000000;
        --surface: #1c1c1e;
        --surface-2: #2c2c2e;
        --surface-3: #3a3a3c;
        --border: rgba(255,255,255,.13);
        --border-soft: rgba(255,255,255,.08);
        --text: #f5f5f7;
        --muted: #98989d;
        --muted-2: #6e6e73;
        --accent: #0a84ff;
        --accent-2: #409cff;
        --accent-dark: #0a84ff;
        --accent-rgb: 10, 132, 255;
        --btn-text: #ffffff;
        --pos: #30d158;
        --neg: #ff453a;
        --pos-bg: rgba(48,209,88,.16);
        --neg-bg: rgba(255,69,58,.16);
        --material: rgba(28,28,30,.68);
        --material-edge: rgba(255,255,255,.08);
        --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
        --shadow-md: 0 12px 36px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.4);
        --shadow-lg: 0 28px 64px rgba(0,0,0,.6);
    }
}
:root[data-theme="dark"] {
    --bg: #000000;
    --surface: #1c1c1e;
    --surface-2: #2c2c2e;
    --surface-3: #3a3a3c;
    --border: rgba(255,255,255,.13);
    --border-soft: rgba(255,255,255,.08);
    --text: #f5f5f7;
    --muted: #98989d;
    --muted-2: #6e6e73;
    --accent: #0a84ff;
    --accent-2: #409cff;
    --accent-dark: #0a84ff;
    --accent-rgb: 10, 132, 255;
    --btn-text: #ffffff;
    --pos: #30d158;
    --neg: #ff453a;
    --pos-bg: rgba(48,209,88,.16);
    --neg-bg: rgba(255,69,58,.16);
    --material: rgba(28,28,30,.68);
    --material-edge: rgba(255,255,255,.08);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
    --shadow-md: 0 12px 36px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.4);
    --shadow-lg: 0 28px 64px rgba(0,0,0,.6);
}
:root[data-theme="dark"]  { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

* { box-sizing: border-box; }

html { background: var(--bg); min-height: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
        system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.006em;      /* body barely tightened */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-optical-sizing: auto;
    text-rendering: optimizeLegibility;
}

a { color: inherit; }
::selection { background: rgba(var(--accent-rgb), .22); }

/* ============ App shell: translucent sidebar + content ============ */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: var(--material);
    -webkit-backdrop-filter: var(--material-blur);
    backdrop-filter: var(--material-blur);
    border-right: 1px solid var(--border-soft);
    display: flex;
    flex-direction: column;
    padding: 16px 12px;
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    overflow-y: auto;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    padding: 8px 8px 20px;
}

.brand-mark {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: linear-gradient(160deg, var(--accent-2), var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(var(--accent-rgb), .35);
}

.brand-name { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
.brand-name span { color: var(--accent); }

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    color: var(--muted);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
    transition: background .18s var(--ease), color .18s var(--ease), transform .12s var(--ease);
    white-space: nowrap;
}
.sidebar-link svg { flex-shrink: 0; width: 17px; height: 17px; opacity: .7; }
.sidebar-link:hover { background: var(--surface-3); color: var(--text); }
.sidebar-link:active { transform: scale(.98); }
.sidebar-link.active { background: rgba(var(--accent-rgb), .12); color: var(--accent); font-weight: 600; }
.sidebar-link.active svg { opacity: 1; color: var(--accent); }

.sidebar-footer { border-top: 1px solid var(--border-soft); padding-top: 8px; margin-top: 8px; }

/* Theme switch (Auto / Light / Dark) — segmented control */
.theme-switch {
    display: flex;
    gap: 2px;
    padding: 3px;
    margin: 0 2px 6px;
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-pill);
}
.theme-switch button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 0;
    border: none;
    background: none;
    color: var(--muted);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background .18s var(--ease), color .18s var(--ease), transform .12s var(--ease);
}
.theme-switch button svg { width: 15px; height: 15px; }
.theme-switch button:hover { color: var(--text); }
.theme-switch button:active { transform: scale(.94); }
.theme-switch button.active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm); }
@media (max-width: 760px) {
    .theme-switch { margin: 0 6px 0 0; padding: 2px; }
    .theme-switch button { padding: 7px; }
}

.main { flex: 1; min-width: 0; }

.container { max-width: 1080px; margin: 0 auto; padding: 34px 40px 72px; }
.container.narrow { max-width: 640px; }

@media (max-width: 760px) {
    .app-shell { flex-direction: column; }
    .sidebar {
        width: 100%; height: auto; position: sticky; top: 0; z-index: 20;
        flex-direction: row; align-items: center; gap: 4px;
        padding: 8px 12px; overflow-x: auto;
        border-right: none; border-bottom: 1px solid var(--border-soft);
    }
    .sidebar-brand { padding: 6px 10px 6px 4px; flex-shrink: 0; }
    .sidebar-nav { flex-direction: row; flex: 0 0 auto; gap: 2px; }
    .sidebar-link span.label { display: none; }
    .sidebar-link { padding: 9px; }
    .sidebar-footer { border-top: none; margin: 0 0 0 4px; padding: 0; flex-shrink: 0; }
    .container { padding: 22px 18px 48px; }
}

/* legacy hooks */
.topbar { display: none; }
.back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    margin-bottom: 18px;
    transition: opacity .15s var(--ease);
}
.back:hover { opacity: .65; }

/* ============ Tabs ============ */
.tabs {
    display: flex;
    gap: 2px;
    margin: 20px 0 28px;
    border-bottom: 1px solid var(--border-soft);
}
.tab-btn {
    background: none;
    border: none;
    color: var(--muted);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .18s var(--ease);
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-panel[hidden] { display: none; }

/* ---- Grouped tabs (Маркетплейсы): wide group blocks holding small pills,
   plus stand-alone pills sitting on the same baseline ---- */
.tab-groups {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin: 20px 0 28px;
}
.tab-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 8px 8px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.tab-group.active { border-color: rgba(var(--accent-rgb), .35); }
.tab-group-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    padding: 0 6px;
}
.tab-group.active .tab-group-label { color: var(--accent); }
.tab-group-items, .tab-solo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
}
.tab-group-items { padding: 3px; background: var(--surface-2); border-radius: var(--radius-sm); }
.tab-groups .tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    margin: 0;
    transition: color .18s var(--ease), background-color .18s var(--ease), transform .12s var(--ease);
}
.tab-groups .tab-btn:hover { color: var(--text); background: var(--surface-3); }
.tab-groups .tab-btn:active { transform: scale(.97); }
.tab-groups .tab-btn.active { color: var(--accent); background: var(--surface); box-shadow: var(--shadow-sm); }
/* stand-alone pills: framed like a group so they read at the same weight */
.tab-solo .tab-btn {
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.tab-solo .tab-btn:hover { background: var(--surface-3); }
.tab-solo .tab-btn.active { background: rgba(var(--accent-rgb), .12); border-color: rgba(var(--accent-rgb), .35); box-shadow: none; }
.tab-badge {
    display: inline-block; min-width: 16px; padding: 0 5px;
    font-size: 11px; font-weight: 700; line-height: 16px; text-align: center;
    color: #fff; background: var(--accent); border-radius: var(--radius-pill); vertical-align: middle;
}

.link-muted {
    color: var(--muted);
    text-decoration: none;
    font-size: 14px;
    transition: color .15s var(--ease);
}
.link-muted:hover { color: var(--text); }

/* ============ Typography — size-specific tracking & leading ============ */
h1 {
    font-size: 27px;
    font-weight: 600;
    letter-spacing: -0.028em;   /* large text: negative tracking */
    line-height: 1.12;
    margin: 0 0 6px;
    color: var(--text);
}
h2 {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 30px 0 12px;
}
h2.section-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;      /* small caps: positive tracking for legibility */
    font-weight: 600;
    color: var(--muted);
    margin: 40px 0 6px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    gap: 8px;
}
h2.page-sub { margin: -8px 0 0; font-size: 21px; }
p.muted, .muted { color: var(--muted); }
.note { color: var(--muted); font-size: 12.5px; margin-top: 6px; line-height: 1.55; }

/* ============ Cards grid ============ */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); gap: 14px; margin-top: 24px; }

.card {
    display: block;
    padding: 22px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--text);
    box-shadow: var(--shadow-sm);
    transition: transform .32s var(--ease), box-shadow .32s var(--ease), border-color .2s var(--ease);
}
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border); }
a.card:active { transform: translateY(-1px) scale(.995); transition-duration: .12s; }
.card .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-bottom: 15px;
    border-radius: 10px;
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--accent);
}
.card .icon svg { width: 18px; height: 18px; }
.card h3 { margin: 0 0 3px; font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }
.card p { margin: 0; color: var(--muted); font-size: 13px; }

/* ============ Buttons ============ */
.btn {
    display: inline-block;
    padding: 9px 18px;
    background: var(--accent);
    color: var(--btn-text);
    text-decoration: none;
    border: none;
    border-radius: var(--radius-pill);
    font-weight: 500;
    font-size: 13.5px;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background .18s var(--ease), transform .12s var(--ease), box-shadow .18s var(--ease);
}
.btn:hover { background: var(--accent-2); }
.btn:active { transform: scale(.96); }              /* instant press feedback */
.btn-sm {
    display: inline-block;
    padding: 6px 13px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
    border-radius: var(--radius-pill);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background .18s var(--ease), border-color .18s var(--ease), transform .12s var(--ease);
}
.btn-sm:hover { background: var(--surface-3); border-color: var(--border); }
.btn-sm:active { transform: scale(.96); }
.btn.secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.btn.secondary:hover { background: var(--surface-3); }
.btn.danger { background: var(--neg-bg); color: var(--neg); border: 1px solid transparent; }
.btn.danger:hover { background: var(--neg-bg); filter: brightness(.97); }

/* ============ Tables ============ */
table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 13.5px; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--border-soft); }
th {
    color: var(--muted);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
tbody tr { transition: background .12s var(--ease); }
tbody tr:hover { background: var(--surface-2); }
td a.title-link { color: var(--text); text-decoration: none; }
td a.title-link:hover { color: var(--accent); }

.up { color: var(--up); font-weight: 600; }
.down { color: var(--down); font-weight: 600; }

/* ============ Forms ============ */
input, select, textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 13px;
    margin-bottom: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 14px;
    font: inherit;
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .18);
}
select[multiple] { min-height: 180px; }
textarea { min-height: 110px; resize: vertical; }
input[type="file"] { color: var(--muted); background: var(--surface-2); border: 1px dashed var(--border); }
label { color: var(--muted); font-size: 12.5px; display: block; margin-bottom: 5px; }
button.btn { width: 100%; padding: 12px; font-size: 14px; }
.error { color: var(--neg); margin-bottom: 12px; font-size: 13.5px; }

/* ============ Login ============ */
.login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 22px;
    padding: 36px 32px;
    width: 100%;
    max-width: 350px;
    box-shadow: var(--shadow-lg);
}
.login-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 28px; }
.login-brand .brand-mark { width: 46px; height: 46px; border-radius: 13px; font-size: 21px; }
.login-brand .brand-name { font-size: 18px; }

/* ============ Boxes ============ */
.card, .empty-box, .error-box, .filter-box, .form-box, .box {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
    box-shadow: var(--shadow-sm);
}
.error-box, .box.error { border-color: transparent; background: var(--neg-bg); color: var(--neg); box-shadow: none; }
.box.success, .okbox { border-color: transparent; background: var(--pos-bg); color: var(--pos); box-shadow: none; }
.errbox { background: var(--neg-bg); color: var(--neg); border-radius: var(--radius); padding: 12px 16px; }
.okbox { border-radius: var(--radius); padding: 12px 16px; }
.filter-box, .form-box { margin-bottom: 16px; }

/* ============ Misc content patterns (calls / meetings) ============ */
.meeting-title { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 8px; line-height: 1.3; word-break: break-word; }
.meeting-date { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.meeting-type { color: var(--text); font-size: 13px; margin-bottom: 8px; }
.meeting-participants { color: var(--text); font-size: 13px; margin-bottom: 12px; }

.meta { display: grid; grid-template-columns: 170px 1fr; gap: 9px 16px; align-items: start; font-size: 14px; margin-top: 2px; }
.meta-label { color: var(--muted); font-weight: 600; font-size: 12.5px; }
.meta-value { word-break: break-word; }
@media (max-width: 700px) { .meta { grid-template-columns: 1fr; gap: 4px; } }

.section-text { white-space: pre-wrap; word-break: break-word; line-height: 1.6; font-size: 14px; }

.item { border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 15px; margin-top: 10px; background: var(--surface); box-shadow: var(--shadow-sm); }
.item-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; align-items: center; }
.item-head-left { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.item-author { font-weight: 600; font-size: 13.5px; letter-spacing: -0.01em; }
.item-date { color: var(--muted); font-size: 12.5px; }

.message { margin-bottom: 12px; color: var(--neg); }

.toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.inline-form { margin: 0; }

/* ============ Accessibility: motion, transparency, contrast ============ */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
    a.card:hover, .btn:active, .btn-sm:active, .sidebar-link:active { transform: none !important; }
    * { transition-duration: .12s !important; }   /* keep gentle cross-fades, drop movement */
}
@media (prefers-reduced-transparency: reduce) {
    .sidebar { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
    :root { --border: rgba(0,0,0,.4); --border-soft: rgba(0,0,0,.25); --muted: #48484a; }
    .btn { outline: 1px solid rgba(0,0,0,.2); }
}