:root {
    --ink: #17302a;
    --muted: #65756f;
    --paper: #f5f2e9;
    --surface: #fffdf7;
    --forest: #143d33;
    --sage: #c9d8c7;
    --lime: #d9ef8b;
    --orange: #e9773d;
    --danger: #a83434;
    --border: #dfe3d9;
    --shadow: 0 18px 50px rgba(31, 55, 47, 0.09);
    font-family: "Segoe UI", "Yu Gothic UI", sans-serif;
    color: var(--ink);
    background: var(--paper);
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 10% 0%, #e6ebd8 0, transparent 28rem), var(--paper); }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button, .button { cursor: pointer; }
h1, h2 { margin-top: 0; letter-spacing: -0.035em; }
h1 { font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.05; margin-bottom: .5rem; }
h2 { font-size: 1.35rem; }
p { line-height: 1.65; }

.app-header {
    height: 74px;
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 0 max(24px, calc((100vw - 1440px) / 2));
    background: rgba(255, 253, 247, .94);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 20;
    backdrop-filter: blur(12px);
}
.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; font-weight: 800; font-size: 1.25rem; white-space: nowrap; }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--forest); color: var(--lime); }
.main-nav { display: flex; align-self: stretch; gap: .2rem; }
.main-nav a { display: flex; align-items: center; padding: 0 .8rem; text-decoration: none; color: var(--muted); border-bottom: 3px solid transparent; font-size: .92rem; }
.main-nav a:hover, .main-nav a.active { color: var(--forest); border-color: var(--orange); }
.account { margin-left: auto; display: flex; gap: 1rem; align-items: center; font-size: .85rem; }
.account form { margin: 0; }
.link-button { border: 0; background: none; padding: 0; text-decoration: underline; color: var(--muted); }
.menu-toggle { display: none; margin-left: auto; border: 0; background: none; font-size: 1.5rem; }
.app-main { max-width: 1440px; margin: 0 auto; padding: clamp(28px, 5vw, 64px) 24px 80px; }
.auth-main { min-height: 100vh; display: grid; place-items: center; padding: 24px; }

.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.eyebrow { color: var(--orange); font-size: .75rem; letter-spacing: .18em; font-weight: 800; }
.muted { color: var(--muted); margin-top: .3rem; }
.panel { background: rgba(255, 253, 247, .96); border: 1px solid var(--border); border-radius: 20px; padding: clamp(20px, 3vw, 32px); box-shadow: var(--shadow); margin-bottom: 24px; }
.button, button.primary, button.secondary { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; border-radius: 12px; padding: .7rem 1.15rem; text-decoration: none; font-weight: 700; border: 1px solid transparent; }
.primary { background: var(--forest); color: white; border-color: var(--forest); }
.primary:hover { background: #205648; }
.danger { background: #9a3030; color: white; border-color: #9a3030 !important; }
.danger:hover { background: #7c2323; }
.secondary { background: transparent; color: var(--forest); border-color: #9fb2aa !important; }
.button-row, .form-actions, .filter-actions, .row-actions { display: flex; gap: .7rem; align-items: center; }
.form-actions { justify-content: flex-end; padding-top: 1rem; }

.auth-card { max-width: 980px; width: 100%; min-height: 600px; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border-radius: 28px; background: var(--surface); box-shadow: 0 24px 80px rgba(20, 61, 51, .17); }
.auth-card.single { max-width: 560px; min-height: auto; grid-template-columns: 1fr; }
.auth-intro { padding: clamp(36px, 7vw, 72px); color: white; background: linear-gradient(145deg, rgba(20,61,51,.98), rgba(30,86,72,.9)), repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(255,255,255,.04) 20px, rgba(255,255,255,.04) 21px); display: flex; flex-direction: column; justify-content: flex-end; }
.auth-intro h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); }
.auth-card .stack-form { padding: clamp(32px, 6vw, 64px); justify-content: center; }
.stack-form { display: flex; flex-direction: column; gap: 1.2rem; }
label { display: flex; flex-direction: column; gap: .45rem; font-size: .9rem; font-weight: 700; }
input, select, textarea { width: 100%; border: 1px solid #bdc8c1; border-radius: 11px; padding: .78rem .9rem; background: white; color: var(--ink); outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--forest); box-shadow: 0 0 0 3px rgba(20,61,51,.11); }
small { color: var(--muted); font-weight: 400; line-height: 1.45; }
.text-link { color: var(--forest); text-align: center; font-weight: 700; }
.registration-link { display: grid; gap: .5rem; padding: 1rem; border-radius: 12px; background: #eef4df; overflow-wrap: anywhere; }

.flash { padding: 1rem 1.2rem; margin-bottom: 1.4rem; border-radius: 13px; border-left: 5px solid; }
.flash.success { background: #e6f2e5; border-color: #3d8059; }
.flash.error { background: #fbe9e5; border-color: var(--danger); color: #74272a; }
.flash ul { margin-bottom: 0; }
.entry-form { max-width: 900px; }
.field-group { margin-bottom: 1.8rem; }
.field-label { display: flex; flex-direction: row; align-items: center; margin-bottom: .6rem; font-size: 1rem; }
.required { margin-left: .5rem; font-size: .65rem; padding: .15rem .4rem; color: #7a2424; background: #fee3db; border-radius: 5px; }
.invalid input, .invalid textarea, .invalid select { border-color: var(--danger); }
.field-error { color: var(--danger); display: block; margin-top: .4rem; }
.choice-grid { display: flex; flex-wrap: wrap; gap: .6rem; }
.choice { position: relative; display: block; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span { display: block; padding: .72rem 1rem; min-width: 90px; text-align: center; border: 1px solid #bac6bd; background: white; border-radius: 10px; }
.choice input:checked + span { background: var(--forest); color: white; border-color: var(--forest); }
.detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; padding: 0; overflow: hidden; background: var(--border); }
.detail-grid > div { background: var(--surface); padding: 24px; }
.detail-grid .wide { grid-column: 1 / -1; }
dt { color: var(--muted); font-size: .8rem; margin-bottom: .5rem; }
dd { margin: 0; white-space: pre-wrap; line-height: 1.65; }

.filter-panel summary { font-weight: 800; cursor: pointer; }
.filter-panel[open] summary { margin-bottom: 1.5rem; }
.filter-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; align-items: end; }
.wide-filter { grid-column: span 2; }
.filter-actions { justify-content: flex-end; }
.comparator { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.table-panel { padding: 0; overflow: hidden; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th { text-align: left; color: var(--muted); background: #eef0e8; font-size: .75rem; letter-spacing: .04em; }
th, td { padding: 1rem; border-bottom: 1px solid var(--border); vertical-align: top; }
tbody tr:hover { background: #f9f8f1; }
.truncate { max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-actions a { color: var(--forest); font-weight: 700; }
.row-actions form, .button-row form { margin: 0; }
.danger-link { color: var(--danger); font-weight: 700; }
.clickable-row { cursor: pointer; }
.clickable-row:focus { outline: 3px solid rgba(233, 119, 61, .45); outline-offset: -3px; }
.clickable-row:hover { background: #f3f5e9; }
.empty-inline, .empty-state { padding: 4rem 2rem; text-align: center; }
.status-code { color: var(--orange); font-size: 6rem; line-height: 1; }

.split-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.step { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--lime); font-size: .8rem; font-weight: 900; margin-bottom: 1rem; }
.file-drop { padding: 1.5rem; border: 2px dashed #9fb2aa; border-radius: 14px; background: #f6f8ef; }
.code-preview { display: grid; gap: .35rem; margin: 1rem 0; padding: 1rem; border-radius: 12px; background: #edf1e8; overflow-x: auto; }
.code-preview code { white-space: nowrap; user-select: all; }
.stats { display: flex; gap: 2rem; margin: 1rem 0; }
.stats > div { display: flex; flex-direction: column; min-width: 140px; padding: 1.3rem; border-radius: 14px; background: #edf1e8; }
.stats strong { font-size: 2rem; }
.field-admin-list { display: grid; gap: .75rem; }
.field-admin-row { display: grid; grid-template-columns: 130px 90px minmax(160px,1fr) 90px repeat(3,70px) 70px; align-items: end; gap: .6rem; padding: 1rem; border-radius: 12px; background: #f2f3ec; }
.field-admin-row code { align-self: center; overflow-wrap: anywhere; }
.type-badge { align-self: center; font-size: .7rem; font-weight: 800; color: var(--orange); }
.check { flex-direction: row; align-items: center; align-self: center; gap: .3rem; }
.check input { width: auto; }
.overview { display: grid; grid-template-columns: repeat(3,1fr); margin-bottom: 24px; }
.overview > div { padding: 1rem 2rem; border-right: 1px solid var(--border); }
.overview > div:last-child { border: 0; }
.overview strong { display: block; font-size: 2rem; }
.overview span { color: var(--muted); font-size: .8rem; }
.chart-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.chart-wrap { height: 320px; }
.ticket-list { display: grid; gap: 16px; }
.ticket-card { margin-bottom: 0; }
.ticket-card summary { display: grid; grid-template-columns: 180px 1fr auto; gap: 1rem; align-items: center; cursor: pointer; }
.ticket-code { font: 700 .78rem Consolas, monospace; color: var(--muted); }
.ticket-status { padding: .3rem .65rem; border-radius: 999px; font-size: .72rem; font-weight: 800; }
.status-open { background: #fee3db; color: #872e27; }
.status-in_progress { background: #fff0c7; color: #77560a; }
.status-resolved { background: #e1f1df; color: #28633d; }
.status-closed { background: #e5e9e7; color: #58645f; }
.ticket-body { display: grid; gap: 1.5rem; padding-top: 1.5rem; }
.ticket-metadata { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; }
.ticket-description { padding: 1rem; border-radius: 12px; background: #f2f3ec; }
.ticket-description p { white-space: pre-wrap; }

@media (max-width: 960px) {
    .menu-toggle { display: block; }
    .main-nav { display: none; position: absolute; top: 73px; left: 0; right: 0; height: auto; padding: 1rem; background: var(--surface); box-shadow: var(--shadow); flex-direction: column; }
    .main-nav.open { display: flex; }
    .main-nav a { padding: .8rem; }
    .account > span { display: none; }
    .auth-card { grid-template-columns: 1fr; }
    .auth-intro { min-height: 250px; }
    .filter-grid { grid-template-columns: repeat(2, 1fr); }
    .field-admin-row { grid-template-columns: repeat(2, 1fr); }
    .chart-grid { grid-template-columns: 1fr; }
    .ticket-card summary { grid-template-columns: 1fr; }
    .ticket-metadata { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}

@media (max-width: 640px) {
    .app-header { padding: 0 16px; }
    .app-main { padding: 28px 14px 60px; }
    .page-header { align-items: flex-start; flex-direction: column; }
    .page-header .button { width: 100%; }
    .filter-grid, .split-panels, .detail-grid { grid-template-columns: 1fr; }
    .wide-filter { grid-column: auto; }
    .detail-grid .wide { grid-column: auto; }
    .overview { grid-template-columns: 1fr; }
    .overview > div { border-right: 0; border-bottom: 1px solid var(--border); }
    table, thead, tbody, tr, th, td { display: block; }
    thead { display: none; }
    tr { padding: .7rem 0; border-bottom: 1px solid var(--border); }
    td { border: 0; display: grid; grid-template-columns: 100px 1fr; padding: .45rem 1rem; }
    td::before { content: attr(data-label); color: var(--muted); font-size: .75rem; }
    .truncate { max-width: none; white-space: normal; }
    .auth-main { padding: 0; }
    .auth-card { min-height: 100vh; border-radius: 0; }
}