:root {
    --bg: #080808;
    --panel: #111111;
    --panel-2: #171717;
    --panel-3: #202020;
    --text: #f7f7f7;
    --muted: #969696;
    --muted-2: #6d6d6d;
    --line: #2b2b2b;
    --red: #d71920;
    --red-dark: #8f1015;
    --white: #ffffff;
    --radius: 16px;
    --radius-sm: 11px;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
    margin: 0;
    min-width: 320px;
    background:
        radial-gradient(circle at 20% 0%, rgba(255,255,255,.035), transparent 34rem),
        var(--bg);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.shell {
    width: min(1120px, calc(100% - 34px));
    margin: 0 auto;
    padding: 26px 0 60px;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 58px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.brand-name {
    font-weight: 700;
    font-size: 1.14rem;
    letter-spacing: -.02em;
    white-space: nowrap;
}

.logo-mark {
    width: 35px;
    height: 35px;
    border: 1px solid #444;
    border-radius: 50%;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 9px 7px;
    background: #0d0d0d;
}
.logo-mark span {
    display: block;
    height: 2px;
    border-radius: 99px;
    background: var(--white);
}
.logo-mark span:nth-child(2) { margin-left: 5px; background: var(--red); }
.logo-mark span:nth-child(3) { margin-right: 4px; }

.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.icon-btn, .text-btn, .small-add, .secondary-btn, .primary-btn, .danger-text-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
}

.icon-btn {
    width: 44px;
    border: 1px solid #3b3b3b;
    background: #121212;
    color: white;
    position: relative;
}
.icon-btn:hover { border-color: #666; background: #171717; }
.big-symbol { font-size: 1.8rem; font-weight: 300; margin-top: -3px; }
.bolt { font-size: 1.8rem; line-height: 1; color: var(--red); }

.file-plus .file-icon {
    width: 17px; height: 20px;
    border: 1.7px solid white;
    border-radius: 2px;
    display: inline-block;
}
.tiny-plus {
    position: absolute;
    right: 7px;
    bottom: 6px;
    width: 14px;
    height: 14px;
    display: grid;
    place-items: center;
    background: var(--red);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800;
}

.text-btn {
    padding: 0 14px;
    color: var(--muted);
    border: 1px solid transparent;
}
.text-btn:hover { color: white; }

.baltic-rule {
    height: 4px;
    margin: 16px 0 34px;
    display: grid;
    grid-template-columns: 1fr 38px;
    gap: 5px;
}
.baltic-rule span:first-child { background: #efefef; }
.baltic-rule span:last-child { background: var(--red); }

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}
.section-heading h2, .project-hero h1, .editor-wrap h1 {
    margin: 0;
    letter-spacing: -.035em;
}
.section-heading h2 { font-size: 1.35rem; }
.eyebrow {
    margin: 0 0 5px;
    color: var(--red);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
}
.collapse-btn {
    color: var(--muted);
    background: transparent;
    border: 0;
    min-height: 44px;
    padding: 0 4px 0 12px;
    cursor: pointer;
}
.chevron { margin-left: 7px; color: var(--muted); }

.quick-section { margin-bottom: 38px; }
.quick-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.quick-card, .empty-card {
    min-height: 92px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(145deg, #141414, #0e0e0e);
}
.quick-card {
    display: flex;
    position: relative;
    min-width: 0;
}
.quick-edit-link {
    flex: 1;
    min-width: 0;
    padding: 17px 40px 17px 17px;
}
.quick-card p {
    margin: 0;
    color: #e9e9e9;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.delete-form {
    position: absolute;
    top: 7px;
    right: 7px;
}
.delete-btn {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #777;
    font-size: 1.35rem;
    cursor: pointer;
}
.delete-btn:hover { background: #251214; color: #ff7478; }

.empty-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 17px;
    color: var(--muted);
}
.empty-plus {
    width: 30px; height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid #444;
    color: white;
}

.projects-section { margin-top: 8px; }
.projects-heading { margin-bottom: 8px; }
.project-list {
    border-top: 1px solid var(--line);
}
.project-row {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 18px 6px;
    border-bottom: 1px solid var(--line);
}
.project-row:hover { background: #0d0d0d; }
.project-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--red);
}
.project-main { min-width: 0; }
.project-main h3 { margin: 0 0 4px; font-size: 1.02rem; }
.project-main p { margin: 0; color: var(--muted); font-size: .84rem; }
.project-meta {
    display: flex;
    align-items: center;
    gap: 18px;
    color: var(--muted);
    font-size: .8rem;
}
.row-arrow { color: white; font-size: 1.25rem; }
.empty-project .project-dot { background: #666; }

.project-hero { margin: 0 0 28px; }
.project-hero .back-link {
    display: inline-block;
    color: var(--muted);
    font-size: .86rem;
    margin-bottom: 24px;
}
.project-hero h1 { font-size: clamp(2rem, 5vw, 3.1rem); }

.project-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 32px;
    align-items: start;
}
.count-badge {
    min-width: 30px;
    height: 25px;
    padding: 0 8px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: #1c1c1c;
    color: var(--muted);
    font-size: .77rem;
}
.items-list { display: grid; gap: 9px; }
.item-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: #101010;
}
.item-summary {
    width: 100%;
    min-height: 58px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: white;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.item-summary:hover { background: #151515; }
.item-title { font-weight: 650; }
.item-summary-right { display: flex; align-items: center; white-space: nowrap; }
.attachment-count {
    font-size: .75rem;
    color: var(--muted);
    padding: 4px 8px;
    border-radius: 999px;
    background: #1b1b1b;
}
.item-body {
    padding: 0 16px 16px;
    border-top: 1px solid #202020;
}
.rich-content {
    padding: 18px 0 4px;
    color: #dedede;
    line-height: 1.62;
    overflow-wrap: anywhere;
}
.rich-content h1, .rich-content h2, .rich-content h3 { color: white; }
.rich-content a { color: #ff686d; text-decoration: underline; }
.linked-files {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #262626;
}
.mini-label {
    color: var(--muted-2);
    font-weight: 800;
    font-size: .68rem;
    letter-spacing: .12em;
}
.linked-file-list { display: flex; gap: 8px; flex-wrap: wrap; }
.linked-file {
    padding: 8px 11px;
    border-radius: 999px;
    background: #1b1b1b;
    color: #ddd;
    font-size: .8rem;
}
.item-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    align-items: center;
    padding-top: 18px;
}
.item-actions form { margin: 0; }

.files-column {
    border-left: 1px solid var(--line);
    padding-left: 24px;
}
.files-heading { align-items: center; }
.small-add {
    color: white;
    min-height: 36px;
    padding: 0 11px;
    background: #171717;
    font-size: .8rem;
}
.files-list { display: grid; gap: 5px; }
.file-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) 34px;
    align-items: center;
    gap: 5px;
    min-width: 0;
}
.file-link {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 5px;
}
.file-glyph { color: var(--red); font-size: 1.1rem; }
.file-copy { min-width: 0; display: flex; flex-direction: column; }
.file-copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .84rem;
}
.file-copy small { color: var(--muted); margin-top: 3px; }
.muted { color: var(--muted); font-size: .86rem; }
.item-empty { min-height: 74px; }

.login-wrap {
    min-height: calc(100vh - 86px);
    display: grid;
    place-items: center;
}
.login-panel { width: min(420px, 100%); }
.login-brand { text-align: center; margin-bottom: 32px; }
.logo-large { width: 54px; height: 54px; margin-bottom: 14px; padding: 15px 11px; }
.login-brand h1 { margin: 0; font-size: 2rem; }
.login-brand p { color: var(--muted); line-height: 1.45; margin: 8px auto 0; max-width: 340px; }

.form-stack { display: grid; gap: 17px; }
.form-stack p, .form-stack label { margin: 0; }
.form-stack label > span, .form-stack p > label, .field-label, .file-picker legend {
    display: block;
    margin-bottom: 7px;
    color: #c8c8c8;
    font-size: .82rem;
    font-weight: 650;
}
input[type="text"], input[type="password"], input[type="file"], textarea {
    width: 100%;
    min-height: 46px;
    padding: 11px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid #393939;
    background: #121212;
    color: white;
    outline: none;
    font-size: 16px;
}
textarea { resize: vertical; line-height: 1.5; }
input:focus, textarea:focus { border-color: #777; box-shadow: 0 0 0 3px rgba(255,255,255,.05); }
.remember-row {
    display: flex !important;
    align-items: center;
    gap: 9px;
    color: #ccc;
}
.remember-row input { width: 18px; height: 18px; accent-color: var(--red); }

.primary-btn {
    border: 1px solid var(--red);
    background: var(--red);
    color: white;
    padding: 0 18px;
    font-weight: 700;
    cursor: pointer;
}
.primary-btn:hover { background: #ed1e25; }
.secondary-btn {
    border: 1px solid #3a3a3a;
    background: #171717;
    color: #ddd;
    padding: 0 16px;
}
.danger-text-btn {
    border: 0;
    background: transparent;
    color: #e56a6e;
    padding: 0 12px;
    cursor: pointer;
}
.form-error, .errorlist {
    color: #ff7e82;
    font-size: .84rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.modal-page {
    min-height: calc(100vh - 86px);
    display: grid;
    place-items: start center;
    padding-top: 8vh;
}
.modal-card {
    width: min(620px, 100%);
    background: #101010;
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 24px;
}
.modal-compact { width: min(500px, 100%); }
.modal-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}
.modal-head h1 { margin: 0; font-size: 1.65rem; }
.modal-close {
    width: 42px; height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--muted);
    font-size: 1.4rem;
}
.modal-close:hover { background: #1a1a1a; color: white; }
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
}

.editor-wrap { width: min(780px, 100%); margin: 24px auto 0; }
.editor-wrap h1 { font-size: 2.2rem; margin-bottom: 28px; }
.item-edit-form { gap: 22px; }
.rich-field { min-width: 0; }
.rich-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 7px;
    border: 1px solid #393939;
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    background: #151515;
}
.rich-toolbar button {
    min-height: 36px;
    min-width: 38px;
    padding: 0 9px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #ddd;
    cursor: pointer;
}
.rich-toolbar button:hover { background: #252525; }
.rich-editor {
    min-height: 260px;
    padding: 15px;
    border: 1px solid #393939;
    border-radius: 0 0 12px 12px;
    background: #111;
    color: white;
    line-height: 1.6;
    outline: none;
}
.rich-editor:focus { border-color: #777; }
.file-picker {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 15px;
}
.field-help { margin: 0 0 12px; color: var(--muted); font-size: .82rem; }
.checkbox-file-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}
.checkbox-file-list label {
    display: flex !important;
    align-items: center;
    gap: 9px;
    padding: 8px;
    border-radius: 9px;
}
.checkbox-file-list input { width: 18px; height: 18px; accent-color: var(--red); }
.no-files-callout {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: .84rem;
}
.no-files-callout a { color: white; }

@media (max-width: 800px) {
    .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .project-layout { grid-template-columns: 1fr; }
    .files-column {
        border-left: 0;
        border-top: 1px solid var(--line);
        padding: 24px 0 0;
    }
}

@media (max-width: 560px) {
    .shell { width: min(100% - 24px, 1120px); padding-top: 13px; }
    .brand-name { font-size: 1rem; }
    .header-actions { gap: 4px; }
    .text-btn { padding: 0 8px; font-size: .82rem; }
    .baltic-rule { margin: 10px 0 26px; }
    .quick-grid { grid-template-columns: 1fr; }
    .quick-card, .empty-card { min-height: 76px; }
    .project-row { padding: 16px 3px; grid-template-columns: 10px minmax(0,1fr) auto; gap: 10px; }
    .project-meta > span:first-child { display: none; }
    .project-main p { font-size: .78rem; }
    .project-hero .back-link { margin-bottom: 18px; }
    .project-layout { gap: 26px; }
    .modal-page { padding-top: 20px; }
    .modal-card { padding: 18px; border-radius: 18px; }
    .form-actions { flex-direction: column-reverse; }
    .form-actions > * { width: 100%; }
    .login-wrap { min-height: calc(100vh - 40px); }
}

/* V1.1 */
.quick-grid[hidden], .picker-backdrop[hidden] { display: none !important; }

.picker-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(0,0,0,.72);
}
.picker-card {
    width: min(560px, 100%);
    max-height: min(70vh, 620px);
    overflow: auto;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #101010;
}
.picker-card h2 { margin: 0; }
.picker-list { display: grid; gap: 7px; }
.picker-file {
    width: 100%;
    min-height: 50px;
    display: grid;
    grid-template-columns: 24px minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #151515;
    color: white;
    text-align: left;
    cursor: pointer;
}
.picker-file:hover { background: #1b1b1b; border-color: #444; }