@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Newsreader:opsz,wght@6..72,500;6..72,600&display=swap");

:root {
    --ink: #242321;
    --muted: #77736d;
    --canvas: #f7f6f3;
    --surface: #fff;
    --line: #e8e5df;
    --black: #1e1d1b;
    --green-bg: #edf3ec;
    --green: #346538;
    --yellow-bg: #fbf3db;
    --yellow: #8b6208;
    --red-bg: #fdebec;
    --red: #9f2f2d;
    --blue-bg: #e7f1f6;
    --blue: #386779;
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body {
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font-family: "DM Sans", "Helvetica Neue", sans-serif;
    font-size: 15px;
    line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.site-header {
    position: sticky; top: 0; z-index: 20;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    background: rgba(247, 246, 243, .93);
    backdrop-filter: blur(14px);
}
.header-inner {
    width: min(1400px, calc(100% - 64px)); height: 76px; margin: auto;
    display: flex; align-items: center; justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 18px; font-size: 13px; color: var(--muted); }
.brand img { display: block; width: 67px; height: auto; }
.brand span { border-left: 1px solid var(--line); padding-left: 18px; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.header-user {
    min-height: 38px; padding: 0 11px; border-right: 1px solid var(--line);
    display: inline-flex; align-items: center; gap: 8px; color: var(--muted);
    font-size: 11px; font-weight: 600;
}
.header-user i { font-size: 10px; }
.export-button { background: transparent; }
.logout-form { display: flex; }
.logout-button {
    width: 42px; height: 42px; padding: 0; border: 1px solid var(--line);
    border-radius: 6px; display: grid; place-items: center; background: transparent;
    color: var(--muted); transition: background .2s, color .2s;
}
.logout-button:hover { background: #fff; color: var(--ink); }
.page-shell { width: min(1400px, calc(100% - 64px)); margin: 0 auto; padding: 68px 0 90px; }
.primary-button, .secondary-button, .filter-button {
    min-height: 42px; padding: 0 17px; border: 1px solid var(--black); border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    font-weight: 600; font-size: 13px; transition: background .2s, transform .2s;
}
.primary-button, .filter-button { background: var(--black); color: #fff; }
.primary-button:hover, .filter-button:hover { background: #383633; }
.primary-button:active, .filter-button:active { transform: scale(.98); }
.secondary-button { background: #fff; border-color: var(--line); }

.messages { position: fixed; top: 92px; right: 32px; z-index: 40; display: grid; gap: 8px; }
.message {
    display: flex; align-items: center; gap: 10px; padding: 13px 16px;
    border: 1px solid #dce7da; border-radius: 8px; background: #f7fbf6; color: var(--green);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .04);
}
.message.error { border-color: #f0d7d8; background: #fff8f8; color: var(--red); }

.intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 46px; }
.eyebrow { margin: 0 0 11px; color: #99948c; font-size: 10px; font-weight: 700; letter-spacing: .16em; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: "DM Sans", "Helvetica Neue", sans-serif; letter-spacing: -.045em; }
h1 { margin-bottom: 10px; max-width: 760px; font-size: clamp(40px, 5vw, 62px); line-height: 1.02; font-weight: 600; }
h2 { margin-bottom: 0; font-size: 28px; line-height: 1.12; font-weight: 600; }
.intro-copy { margin: 0; color: var(--muted); }
.today { margin: 0; color: var(--muted); font-size: 13px; text-transform: capitalize; }

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); }
.stat-card {
    min-height: 176px; padding: 26px 28px; border-right: 1px solid var(--line);
    display: flex; flex-direction: column; transition: background .2s;
}
.stat-card:last-child { border-right: 0; }
a.stat-card:hover { background: #fbfaf8; }
.stat-card.is-active { box-shadow: inset 0 -2px 0 var(--ink); background: #fbfaf8; }
.stat-label { color: var(--muted); font-size: 12px; font-weight: 600; }
.stat-card strong { margin: 22px 0 auto; font-family: "Newsreader", Georgia, serif; font-size: 48px; line-height: 1; font-weight: 500; }
.stat-meta { margin-top: 17px; color: #99948c; font-size: 11px; }
.stat-warning strong { color: var(--yellow); }
.stat-danger strong { color: var(--red); }
.stat-calm strong { color: var(--blue); }

.list-panel { margin-top: 54px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.list-heading { padding: 27px 30px 23px; display: flex; align-items: flex-end; justify-content: space-between; }
.list-heading .eyebrow { margin-bottom: 7px; }
.result-count { color: var(--muted); font-size: 12px; }
.filters { padding: 16px 30px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; gap: 9px; }
.filters select, .search-field {
    height: 42px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink);
}
.filters select { min-width: 166px; padding: 0 34px 0 13px; }
.search-field { min-width: 290px; display: flex; align-items: center; gap: 10px; padding: 0 13px; }
.search-field i { color: #aaa59d; font-size: 12px; }
.search-field input { width: 100%; border: 0; outline: 0; background: transparent; }
.filter-button { min-height: 42px; }
.filters.is-ajax .filter-button { display: none; }
.clear-button { width: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; }
.clear-button.is-hidden { display: none; }
#ajax-results { min-height: 160px; transition: opacity .16s ease; }
#ajax-results.is-loading { opacity: .42; pointer-events: none; }

.table-wrap { overflow: visible; }
table { width: 100%; border-collapse: collapse; }
th {
    padding: 12px 18px; background: #faf9f7; color: #8d8880;
    font-size: 10px; font-weight: 700; letter-spacing: .08em; text-align: left; text-transform: uppercase;
}
th:first-child, td:first-child { padding-left: 30px; }
th:last-child, td:last-child { padding-right: 25px; }
td { padding: 19px 18px; border-top: 1px solid var(--line); vertical-align: middle; }
tbody tr:first-child td { border-top: 0; }
tbody tr { animation: rowIn .45s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--index) * 45ms); }
tbody tr:has(.row-menu[open]) { position: relative; z-index: 30; }
.service-name { display: block; font-weight: 600; }
.service-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.service-owner, .note-preview { display: block; color: var(--muted); font-size: 11px; }
.service-owner { margin-top: 2px; }
.note-preview { margin-top: 5px; max-width: 290px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.type-badge, .status {
    display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px;
    border-radius: 9999px; font-size: 10px; font-weight: 700; letter-spacing: .03em;
}
.type-badge { background: #f1efeb; color: #625e58; }
.type-domain { background: var(--blue-bg); color: var(--blue); }
.type-hosting { background: var(--green-bg); color: var(--green); }
.type-both { background: #f0ebf6; color: #695180; }
.type-vps { background: #f4eee8; color: #7b5a3d; }
.date-list { display: flex; gap: 18px; font-variant-numeric: tabular-nums; }
.date-list span { display: grid; gap: 1px; font-size: 12px; font-weight: 600; }
.date-list small { color: #99948c; font-size: 9px; font-weight: 600; text-transform: uppercase; }
.call-button {
    max-width: 190px; min-height: 34px; padding: 0 10px; border: 1px solid #dce7da;
    border-radius: 6px; display: inline-flex; align-items: center; gap: 8px;
    background: #f7fbf6; color: var(--green); font-size: 11px; font-weight: 700;
}
.call-button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-button:hover { border-color: #c8dac5; background: var(--green-bg); }
.muted { color: #aaa59d; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-iyi { background: var(--green-bg); color: var(--green); }
.status-yaklasiyor { background: var(--yellow-bg); color: var(--yellow); }
.status-gecikmis { background: var(--red-bg); color: var(--red); }
.status-belirsiz { background: #f0efed; color: var(--muted); }
.actions-cell { width: 54px; text-align: right; }
.row-menu { position: relative; }
.row-menu[open] { z-index: 40; }
.row-menu summary { width: 32px; height: 32px; margin-left: auto; display: grid; place-items: center; border-radius: 5px; cursor: pointer; list-style: none; }
.row-menu summary::-webkit-details-marker { display: none; }
.row-menu summary:hover, .row-menu[open] summary { background: #f2f0ed; }
.menu-popover {
    position: absolute; right: 0; top: 38px; z-index: 10; width: 210px; padding: 6px;
    border: 1px solid var(--line); border-radius: 8px; background: #fff;
    box-shadow: 0 12px 32px rgba(28, 26, 23, .08); text-align: left;
}
.menu-popover a, .menu-popover button {
    width: 100%; min-height: 36px; padding: 0 10px; border: 0; border-radius: 5px;
    display: flex; align-items: center; gap: 10px; background: transparent; color: var(--ink); font-size: 12px; text-align: left;
}
.menu-popover a:hover, .menu-popover button:hover { background: #f7f6f3; }
.menu-popover i { width: 14px; color: #8e8982; }
.menu-popover .danger-action { color: var(--red); }
.mobile-actions { display: none; }

.renew-dialog {
    width: min(440px, calc(100% - 32px)); padding: 0; border: 1px solid var(--line);
    border-radius: 10px; background: #fff; color: var(--ink);
    box-shadow: 0 24px 70px rgba(28, 26, 23, .14);
}
.renew-dialog::backdrop { background: rgba(30, 29, 27, .28); backdrop-filter: blur(3px); }
.renew-dialog form { position: relative; padding: 34px; }
.dialog-close {
    position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; border: 0;
    border-radius: 5px; display: grid; place-items: center; background: #f4f2ef; color: var(--muted);
}
.dialog-icon {
    width: 42px; height: 42px; margin-bottom: 23px; border-radius: 8px;
    display: grid; place-items: center; background: var(--green-bg); color: var(--green);
}
.renew-dialog h2 { margin-bottom: 7px; }
.dialog-service { margin-bottom: 25px; color: var(--muted); font-size: 13px; }
.target-field, .year-field { display: block; }
.target-field { margin-bottom: 16px; }
.target-field > span, .year-field > span:first-child { display: block; margin-bottom: 7px; font-size: 11px; font-weight: 700; }
.target-field select {
    width: 100%; height: 48px; padding: 0 12px; border: 1px solid #ddd9d2;
    border-radius: 6px; background: #fff; color: var(--ink); outline: none;
}
.target-field select:focus { border-color: #837d74; box-shadow: 0 0 0 3px rgba(50, 46, 40, .05); }
.year-input {
    height: 48px; padding: 0 13px; border: 1px solid #ddd9d2; border-radius: 6px;
    display: flex; align-items: center; background: #fff;
}
.year-input input { width: 100%; border: 0; outline: 0; color: var(--ink); font-size: 16px; font-weight: 600; }
.year-input small { color: var(--muted); }
.dialog-note { margin: 9px 0 26px; color: #99948c; font-size: 11px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; }
.note-dialog-inner { position: relative; padding: 34px; }
.note-icon { background: var(--yellow-bg); color: var(--yellow); }
.note-dialog h2 { margin-bottom: 20px; }
.note-content {
    max-height: min(45vh, 360px); margin-bottom: 26px; padding: 16px;
    border: 1px solid var(--line); border-radius: 7px; overflow-y: auto;
    background: #faf9f7; color: #514e49; line-height: 1.7; white-space: pre-wrap;
}

.empty-state { padding: 72px 24px 80px; border-top: 1px solid var(--line); text-align: center; }
.empty-icon { width: 54px; height: 54px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; background: #f0efeb; color: #8f8a82; }
.empty-state h3 { margin-bottom: 6px; font-family: "Newsreader", Georgia, serif; font-size: 24px; }
.empty-state p { margin-bottom: 22px; color: var(--muted); }

.form-layout { display: grid; grid-template-columns: minmax(260px, .75fr) minmax(550px, 1.25fr); gap: 9vw; align-items: start; }
.form-intro { position: sticky; top: 135px; }
.back-link { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 62px; color: var(--muted); font-size: 12px; }
.form-intro h1 { font-size: clamp(40px, 4.5vw, 62px); }
.form-intro h1 {
    max-width: 100%; overflow-wrap: anywhere; word-break: break-word;
    font-size: clamp(34px, 4.2vw, 58px);
}
.form-intro > p:last-child { max-width: 460px; color: var(--muted); }
.history-inline-link {
    margin-top: 18px; display: inline-flex; align-items: center; gap: 8px;
    color: var(--blue); font-size: 12px; font-weight: 700;
}
.history-inline-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.service-form { border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.form-section { padding: 33px; border-bottom: 1px solid var(--line); }
.section-heading { display: flex; gap: 18px; margin-bottom: 28px; }
.section-heading > span { color: #aaa59d; font-family: "Newsreader", Georgia, serif; font-size: 14px; }
.section-heading h2 { margin-bottom: 3px; font-family: "DM Sans", sans-serif; font-size: 15px; letter-spacing: -.01em; }
.section-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 21px; }
.field-wide { grid-column: 1 / -1; }
.field label { display: block; margin-bottom: 7px; font-size: 11px; font-weight: 700; }
.field input, .field select, .field textarea {
    width: 100%; border: 1px solid #ddd9d2; border-radius: 6px; background: #fff;
    color: var(--ink); outline: none; transition: border .2s, box-shadow .2s;
}
.field input, .field select { height: 44px; padding: 0 12px; }
.field textarea { resize: vertical; padding: 11px 12px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #837d74; box-shadow: 0 0 0 3px rgba(50, 46, 40, .05); }
.field[hidden] { display: none; }
.errorlist { margin: 6px 0 0; padding: 0; color: var(--red); font-size: 11px; list-style: none; }
.check-field { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.check-field input { margin-top: 4px; accent-color: var(--black); }
.check-field span { display: grid; }
.check-field strong { font-size: 12px; }
.check-field small { color: var(--muted); font-size: 11px; }
.form-actions { padding: 22px 33px; display: flex; justify-content: flex-end; gap: 9px; }

.export-intro {
    margin-bottom: 45px; display: flex; align-items: flex-end;
    justify-content: space-between; gap: 40px;
}
.export-intro > div:first-child { max-width: 780px; }
.export-intro h1 { margin-bottom: 14px; }
.export-intro p:last-child { max-width: 680px; margin-bottom: 0; color: var(--muted); }
.export-back { margin-bottom: 48px; }
.export-total {
    min-width: 130px; padding-left: 27px; border-left: 1px solid var(--line);
    display: grid; justify-items: start;
}
.export-total strong { font-family: "Newsreader", Georgia, serif; font-size: 46px; line-height: 1; font-weight: 500; }
.export-total span { margin-top: 6px; color: var(--muted); font-size: 11px; }
.export-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: 18px; align-items: stretch; animation-delay: .08s; }
.export-card {
    padding: 31px; border: 1px solid var(--line); border-radius: 10px;
    display: flex; flex-direction: column; background: #fff;
}
.export-card-heading { display: flex; align-items: center; gap: 15px; }
.export-card-heading .eyebrow { margin-bottom: 4px; }
.export-card-heading h2 { font-size: 25px; }
.export-card-icon {
    width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center;
}
.excel-icon { background: var(--green-bg); color: var(--green); }
.pdf-icon { background: var(--red-bg); color: var(--red); }
.export-description { margin: 20px 0 25px; color: var(--muted); font-size: 13px; }
.export-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.export-field { display: grid; gap: 7px; }
.export-field > span { font-size: 11px; font-weight: 700; }
.export-field select {
    width: 100%; height: 44px; padding: 0 12px; border: 1px solid #ddd9d2;
    border-radius: 6px; background: #fff; color: var(--ink); outline: none;
}
.export-field select:focus { border-color: #837d74; box-shadow: 0 0 0 3px rgba(50, 46, 40, .05); }
.export-check {
    padding: 13px; border: 1px solid var(--line); border-radius: 7px;
    display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
}
.export-check input { margin-top: 4px; accent-color: var(--black); }
.export-check span { display: grid; }
.export-check strong { font-size: 12px; }
.export-check small { color: var(--muted); font-size: 11px; }
.hosting-callout {
    margin-top: 18px; padding: 13px 14px; border-radius: 7px;
    display: flex; align-items: flex-start; gap: 11px;
    background: var(--blue-bg); color: var(--blue); font-size: 11px;
}
.hosting-callout i { margin-top: 3px; }
.export-submit { width: 100%; margin-top: 24px; }
.pdf-card .export-submit { margin-top: auto; }
.pdf-preview {
    margin: 12px 0 31px; padding: 24px; border: 1px solid var(--line); border-radius: 8px;
    display: flex; align-items: center; justify-content: center; gap: 19px; background: #faf9f7;
}
.pdf-preview > div:last-child { display: grid; gap: 3px; }
.pdf-preview strong { font-size: 13px; }
.pdf-preview small { color: var(--muted); font-size: 10px; }
.pdf-paper {
    width: 76px; height: 54px; padding: 10px; border: 1px solid #dedad4; border-radius: 3px;
    display: grid; align-content: start; gap: 4px; background: #fff;
}
.pdf-paper span { display: block; height: 2px; background: #dedad4; }
.pdf-paper span:first-child { width: 65%; height: 4px; background: #817b73; }

.history-intro {
    margin-bottom: 42px; display: flex; align-items: flex-end;
    justify-content: space-between; gap: 32px;
}
.history-intro > div { min-width: 0; }
.history-intro h1 { overflow-wrap: anywhere; }
.history-intro p:last-child { margin-bottom: 0; color: var(--muted); }
.history-back { margin-bottom: 52px; }
.history-panel {
    border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
    background: var(--surface); animation-delay: .08s;
}
.history-heading {
    padding: 25px 30px; display: flex; align-items: center;
    justify-content: space-between; gap: 24px;
}
.history-heading .eyebrow { margin-bottom: 6px; }
.history-heading h2 { font-size: 24px; }
.history-list { margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.history-item {
    position: relative; padding: 25px 30px; display: grid;
    grid-template-columns: 38px minmax(0, 1fr); gap: 17px;
}
.history-item + .history-item { border-top: 1px solid var(--line); }
.history-icon {
    width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
    background: #f1efeb; color: #68635d; font-size: 12px;
}
.history-icon-renew { background: var(--green-bg); color: var(--green); }
.history-icon-restore { background: var(--green-bg); color: var(--green); }
.history-icon-archive { background: var(--red-bg); color: var(--red); }
.history-icon-create, .history-icon-import { background: var(--blue-bg); color: var(--blue); }
.history-content { min-width: 0; }
.history-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.history-meta > div { display: grid; gap: 3px; }
.history-meta strong { font-size: 14px; }
.history-meta span, .history-meta time { color: var(--muted); font-size: 11px; }
.history-meta time { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.history-actor {
    margin-top: 10px; display: inline-flex; align-items: center; gap: 7px;
    color: #625e58; font-size: 11px; font-weight: 700;
}
.history-actor i { color: #aaa59d; font-size: 9px; }
.change-list {
    margin: 18px 0 0; border: 1px solid var(--line); border-radius: 7px;
    overflow: hidden; background: #faf9f7;
}
.change-list > div {
    padding: 10px 12px; display: grid; grid-template-columns: minmax(130px, .45fr) 1fr;
    gap: 18px; align-items: start;
}
.change-list > div + div { border-top: 1px solid var(--line); }
.change-list dt { color: var(--muted); font-size: 10px; font-weight: 700; }
.change-list dd {
    min-width: 0; margin: 0; display: grid;
    grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr); gap: 8px;
    align-items: center; font-size: 11px; overflow-wrap: anywhere;
}
.change-list dd span { color: #99948c; text-decoration: line-through; }
.change-list dd i { color: #bbb6af; font-size: 8px; }
.change-list dd strong { font-weight: 600; }
.history-empty { border-top: 1px solid var(--line); }

.archive-intro {
    margin-bottom: 42px; display: flex; align-items: flex-end;
    justify-content: space-between; gap: 36px;
}
.archive-intro > div:first-child { min-width: 0; }
.archive-intro h1 { overflow-wrap: anywhere; }
.archive-intro p:last-child { margin-bottom: 0; color: var(--muted); }
.archive-back { margin-bottom: 52px; }
.archive-total {
    min-width: 145px; padding-left: 27px; border-left: 1px solid var(--line);
    display: grid;
}
.archive-total strong {
    font-family: "Newsreader", Georgia, serif; font-size: 46px;
    line-height: 1; font-weight: 500;
}
.archive-total span { margin-top: 7px; color: var(--muted); font-size: 11px; }
.archive-panel {
    border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
    background: var(--surface); animation-delay: .08s;
}
.archive-search {
    padding: 18px 30px; display: flex; gap: 9px; border-bottom: 1px solid var(--line);
}
.archive-search .search-field { flex: 1; min-width: 0; }
.archive-list { display: grid; }
.archive-item {
    padding: 24px 30px; display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px; align-items: center;
}
.archive-item + .archive-item { border-top: 1px solid var(--line); }
.archive-item-main { min-width: 0; display: grid; gap: 10px; }
.archive-item-main > div { min-width: 0; }
.archive-item h2 {
    margin-top: 9px; overflow-wrap: anywhere; font-family: "DM Sans", sans-serif;
    font-size: 17px; letter-spacing: -.02em;
}
.archive-item p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.archive-item time { color: #99948c; font-size: 10px; }
.archive-actions { display: flex; align-items: center; gap: 8px; }
.archive-actions form { display: flex; }

.login-page {
    min-height: 100vh; display: grid; place-items: center;
    background: var(--canvas);
}
.login-shell { width: min(430px, calc(100% - 32px)); padding: 52px 0; }
.login-card {
    padding: 42px; border: 1px solid var(--line); border-radius: 12px;
    background: var(--surface); box-shadow: 0 18px 50px rgba(28, 26, 23, .06);
}
.login-logo { width: 72px; height: auto; margin-bottom: 46px; display: block; }
.login-card h1 { margin-bottom: 12px; font-size: 38px; }
.login-copy { margin-bottom: 30px; color: var(--muted); font-size: 13px; }
.login-error {
    margin-bottom: 20px; padding: 11px 13px; border: 1px solid #f0d7d8;
    border-radius: 7px; display: flex; align-items: center; gap: 9px;
    background: #fff8f8; color: var(--red); font-size: 12px;
}
.login-form { display: grid; gap: 18px; }
.login-form label { display: grid; gap: 7px; font-size: 11px; font-weight: 700; }
.login-input {
    height: 46px; padding: 0 13px; border: 1px solid #ddd9d2; border-radius: 6px;
    display: flex; align-items: center; gap: 10px; background: #fff;
}
.login-input:focus-within { border-color: #837d74; box-shadow: 0 0 0 3px rgba(50, 46, 40, .05); }
.login-input i { width: 13px; color: #aaa59d; font-size: 11px; text-align: center; }
.login-input input { width: 100%; border: 0; outline: 0; background: transparent; }
.login-submit { width: 100%; margin-top: 5px; min-height: 46px; }
.login-security {
    margin: 18px 0 0; display: flex; align-items: center; justify-content: center;
    gap: 8px; color: #918c85; font-size: 10px;
}

.reveal { animation: reveal .6s cubic-bezier(.16, 1, .3, 1) both; }
.stats-grid { animation-delay: .08s; }
.list-panel { animation-delay: .16s; }
@keyframes reveal { from { opacity: 0; transform: translateY(12px); } }
@keyframes rowIn { from { opacity: 0; transform: translateY(7px); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}
@media (max-width: 1050px) {
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .stat-card:nth-child(2) { border-right: 0; }
    .stat-card:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
    .form-layout { grid-template-columns: 1fr; gap: 36px; }
    .form-intro { position: static; }
    .back-link { margin-bottom: 36px; }
    .form-intro h1 { max-width: 700px; }
    .table-wrap { overflow-x: auto; }
    table { min-width: 940px; }
    .export-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .header-inner, .page-shell { width: min(100% - 32px, 1400px); }
    .header-inner { height: 66px; }
    .brand span { display: none; }
    .header-user { display: none; }
    .export-button { width: 40px; padding: 0; }
    .export-button i { margin: 0; font-size: 14px; }
    .export-button { font-size: 0; }
    .archive-button { width: 40px; padding: 0; font-size: 0; }
    .archive-button i { margin: 0; font-size: 14px; }
    .header-action { min-height: 38px; }
    .page-shell { padding-top: 42px; }
    .intro { align-items: flex-start; flex-direction: column; margin-bottom: 32px; }
    .today { display: none; }
    h1 { font-size: 42px; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .stat-card { min-height: 145px; padding: 20px; }
    .stat-card strong { font-size: 39px; }
    .stat-meta { line-height: 1.3; }
    .list-panel { margin-top: 34px; }
    .list-heading { padding: 22px 20px; }
    .result-count { display: none; }
    .filters { padding: 14px 20px; flex-wrap: wrap; }
    .search-field { width: 100%; min-width: 0; }
    .filters label:not(.search-field) { flex: 1; }
    .filters select { width: 100%; min-width: 0; }
    .table-wrap { overflow: visible; }
    table { min-width: 0; display: block; }
    thead { display: none; }
    tbody { display: grid; }
    tbody tr {
        min-width: 0; padding: 19px 20px; border-bottom: 1px solid var(--line);
        display: grid; grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto auto auto; gap: 13px 12px;
    }
    tbody tr:last-child { border-bottom: 0; }
    td, th:first-child, td:first-child, th:last-child, td:last-child {
        min-width: 0; padding: 0; border: 0;
    }
    td:nth-child(1) { grid-column: 1; grid-row: 1; align-self: center; }
    td:nth-child(2) { grid-column: 2; grid-row: 1; align-self: center; }
    td:nth-child(3) { grid-column: 1 / -1; grid-row: 2; }
    td:nth-child(4) { grid-column: 1 / -1; grid-row: 3; }
    td:nth-child(5) { grid-column: 1; grid-row: 4; align-self: center; }
    td:nth-child(6) { grid-column: 1 / -1; grid-row: 5; align-self: center; width: auto; }
    .service-name { overflow-wrap: anywhere; line-height: 1.35; }
    .service-owner { margin-top: 4px; }
    .note-preview { max-width: 100%; }
    .type-badge { max-width: none; white-space: nowrap; }
    .date-list {
        padding: 11px 12px; border-radius: 6px; display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
        background: #faf9f7;
    }
    .date-list span:only-child { grid-column: 1 / -1; }
    .call-button {
        width: 100%; max-width: none; min-height: 40px; padding: 0 12px;
        justify-content: center; font-size: 12px;
    }
    .row-menu { display: none; }
    .mobile-actions {
        display: flex; align-items: center; justify-content: flex-end; gap: 7px;
        padding-top: 12px; border-top: 1px solid var(--line);
    }
    .mobile-actions a, .mobile-actions button {
        width: 38px; height: 38px; padding: 0; border: 1px solid var(--line);
        border-radius: 6px; display: grid; place-items: center;
        background: #fff; color: #69645d;
    }
    .mobile-actions a:active, .mobile-actions button:active { background: #f2f0ed; transform: scale(.96); }
    .mobile-actions form { display: contents; }
    .mobile-actions .danger-action { color: var(--red); }
    .form-section, .form-actions { padding: 24px 20px; }
    .field-grid { grid-template-columns: 1fr; }
    .field-wide { grid-column: auto; }
    .form-actions .primary-button { flex: 1; }
    .messages { left: 16px; right: 16px; top: 78px; }
    .export-intro { align-items: flex-start; flex-direction: column; margin-bottom: 30px; }
    .export-total { display: none; }
    .export-back { margin-bottom: 35px; }
    .export-card { padding: 23px 20px; }
    .export-fields { grid-template-columns: 1fr; }
    .export-fields .field-wide { grid-column: auto; }
    .pdf-preview { padding: 20px 14px; }
    .history-intro { align-items: flex-start; flex-direction: column; margin-bottom: 30px; }
    .history-back { margin-bottom: 35px; }
    .history-heading, .history-item { padding-left: 20px; padding-right: 20px; }
    .history-item { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; }
    .history-icon { width: 32px; height: 32px; }
    .history-meta { display: grid; gap: 7px; }
    .change-list > div { grid-template-columns: 1fr; gap: 5px; }
    .login-card { padding: 32px 24px; }
    .login-logo { margin-bottom: 38px; }
    .login-card h1 { font-size: 34px; }
    .archive-intro { align-items: flex-start; flex-direction: column; margin-bottom: 30px; }
    .archive-back { margin-bottom: 35px; }
    .archive-total { display: none; }
    .archive-search { padding: 14px 20px; flex-wrap: wrap; }
    .archive-search .search-field { width: 100%; flex-basis: 100%; }
    .archive-item { padding: 21px 20px; grid-template-columns: 1fr; gap: 17px; }
    .archive-actions { display: grid; grid-template-columns: repeat(3, 1fr); }
    .archive-actions a, .archive-actions button { width: 100%; padding: 0 10px; }
    .archive-actions form { display: contents; }
}