:root {
    --black: #090806;
    --charcoal: #15130f;
    --charcoal-2: #211e18;
    --gold: #cda45e;
    --gold-dark: #a77a31;
    --cream: #f7f3eb;
    --white: #ffffff;
    --ink: #181714;
    --muted: #746f66;
    --line: #e5ded1;
    --success: #19734a;
    --danger: #a93d35;
    --warning: #a36d12;
    --shadow: 0 22px 60px rgba(15, 12, 8, .12);
    --radius: 18px;
    --sidebar: 270px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background: #f2efe9;
    line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }
code { font-family: "SFMono-Regular", Consolas, monospace; }

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    letter-spacing: .06em;
}
.brand-logo {
    display: block;
    width: 190px;
    height: auto;
    max-height: 64px;
    object-fit: contain;
    object-position: left center;
}
.brand-logo-sidebar { width: 178px; }
.brand-logo-landing { width: 188px; }
.brand-logo-login { width: 205px; }
.brand-logo-footer { width: 164px; }
.brand-logo-install { width: 205px; }
.brand-mark {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(205, 164, 94, .8);
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    color: var(--gold);
    font-family: Georgia, serif;
    font-size: 23px;
    font-weight: 700;
    box-shadow: inset 0 0 0 4px rgba(205, 164, 94, .08);
}
.brand strong { display: block; font-family: Georgia, serif; font-size: 16px; line-height: 1; }
.brand small { display: block; font-size: 8px; letter-spacing: .22em; margin-top: 4px; }
.eyebrow,
.hero-kicker {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold-dark);
}

.btn {
    min-height: 44px;
    padding: 0 20px;
    border-radius: 2px;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: .2s ease;
    background: transparent;
}
.btn:hover { transform: translateY(-1px); }
.btn-gold { background: var(--gold); color: #17120a; border-color: var(--gold); }
.btn-gold:hover { background: #d9b675; border-color: #d9b675; }
.btn-outline { border-color: #cfc5b3; color: #433d34; background: #fff; }
.btn-outline:hover { border-color: var(--gold-dark); color: var(--gold-dark); }
.btn-light { background: #fff; color: #17120a; }
.btn-outline-light { border-color: rgba(255,255,255,.45); color: #fff; }
.btn-large { min-height: 52px; padding: 0 28px; }
.btn-block { width: 100%; }
.text-link { font-size: 12px; letter-spacing: .12em; font-weight: 800; color: #fff; }
.text-link.dark { color: #342e25; }
.back-link { display: inline-block; margin-top: 22px; font-size: 13px; color: var(--muted); }

/* Landing */
.landing-body { background: var(--black); color: #fff; }
.landing-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 30;
    height: 84px;
    padding: 0 clamp(24px, 6vw, 110px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(to bottom, rgba(0,0,0,.75), transparent);
}
.landing-nav { display: flex; gap: 28px; align-items: center; }
.landing-nav a { font-size: 11px; font-weight: 800; letter-spacing: .22em; }
.landing-nav .login-link { color: var(--gold); }
.hero {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    background:
        radial-gradient(circle at 70% 30%, rgba(149, 113, 58, .22), transparent 32%),
        linear-gradient(90deg, rgba(3,3,3,.97) 0%, rgba(4,4,4,.70) 45%, rgba(4,4,4,.90) 100%),
        url('../img/hero-placeholder.svg') center/cover no-repeat,
        linear-gradient(135deg, #15130f, #262119 45%, #080706);
}
.hero::before {
    content: "";
    position: absolute;
    inset: 9% 7% 0 30%;
    opacity: .45;
    background:
        linear-gradient(90deg, transparent 0 10%, rgba(255,255,255,.05) 10% 11%, transparent 11% 30%, rgba(255,255,255,.05) 30% 31%, transparent 31%),
        linear-gradient(0deg, transparent 0 30%, rgba(205,164,94,.06) 30% 31%, transparent 31% 62%, rgba(255,255,255,.04) 62% 63%, transparent 63%),
        radial-gradient(ellipse at 40% 50%, rgba(255,255,255,.08), transparent 28%);
    border: 1px solid rgba(255,255,255,.04);
    transform: perspective(1000px) rotateY(-7deg);
}
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.55), transparent 38%), linear-gradient(90deg, rgba(0,0,0,.25), transparent 30% 70%, rgba(0,0,0,.4));
}
.hero-grid-lines {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 120px 120px;
    mask-image: linear-gradient(to right, transparent, black 30%, black 70%, transparent);
}
.hero-content {
    position: relative;
    z-index: 3;
    width: min(850px, 68vw);
    margin-left: clamp(70px, 21vw, 360px);
    padding-top: 70px;
}
.hero-kicker { color: rgba(255,255,255,.68); margin-bottom: 18px; }
.hero h1 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(43px, 5vw, 78px);
    line-height: 1.04;
    letter-spacing: .055em;
    font-weight: 600;
    color: var(--gold);
    text-transform: uppercase;
}
.hero h1 em { color: #fff; font-style: normal; }
.hero p { max-width: 610px; margin: 24px 0 28px; color: rgba(255,255,255,.78); font-size: 16px; }
.hero-actions { display: flex; align-items: center; gap: 28px; }
.hero-side {
    position: absolute;
    z-index: 4;
    top: 50%;
    font-size: 9px;
    letter-spacing: .28em;
    font-weight: 800;
    color: rgba(255,255,255,.75);
}
.hero-side-left { left: 6.5vw; transform: rotate(-90deg) translateY(-50%); transform-origin: left top; display: flex; align-items: center; gap: 14px; }
.hero-side-left i { width: 120px; height: 1px; background: rgba(255,255,255,.3); display: block; }
.hero-side-right { right: 5.8vw; writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); }
.hero-index { position: absolute; z-index: 4; bottom: 7vh; left: clamp(70px, 31vw, 540px); display: flex; align-items: center; gap: 10px; font-size: 12px; }
.hero-index span { width: 70px; height: 1px; background: rgba(255,255,255,.35); }
.section-dark, .section-light { padding: 110px clamp(24px, 8vw, 150px); }
.section-dark { background: #11100d; }
.section-light { background: var(--cream); color: var(--ink); display: grid; grid-template-columns: 1.15fr .85fr; gap: 90px; align-items: center; }
.section-heading h2, .security-copy h2 { font-family: Georgia, serif; font-size: clamp(38px, 4vw, 62px); line-height: 1.1; margin: 14px 0 0; font-weight: 500; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 60px; }
.feature-grid article { padding: 34px; border: 1px solid rgba(255,255,255,.12); min-height: 250px; background: linear-gradient(135deg, rgba(255,255,255,.025), transparent); }
.feature-grid article > span { font-family: Georgia, serif; color: var(--gold); font-size: 31px; }
.feature-grid h3 { font-size: 22px; margin: 28px 0 10px; }
.feature-grid p { color: rgba(255,255,255,.62); }
.security-copy p { max-width: 680px; color: #686157; }
.security-card { background: #181510; color: #fff; padding: 16px 32px; box-shadow: var(--shadow); }
.security-card div { padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.security-card div:last-child { border-bottom: 0; }
.security-card strong, .security-card small { display: block; }
.security-card strong { color: var(--gold); font-family: Georgia, serif; font-size: 21px; }
.security-card small { margin-top: 5px; color: rgba(255,255,255,.6); }
.landing-footer { padding: 42px clamp(24px, 8vw, 150px); display: flex; align-items: center; justify-content: space-between; background: #050504; color: rgba(255,255,255,.6); border-top: 1px solid rgba(255,255,255,.08); }
.landing-footer a { color: var(--gold); font-size: 11px; letter-spacing: .18em; font-weight: 800; }

/* Login */
.login-body { min-height: 100vh; background: #0b0a08; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: 1.15fr .85fr; }
.login-visual {
    padding: 55px clamp(30px, 6vw, 90px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
    background:
        linear-gradient(90deg, rgba(0,0,0,.88), rgba(0,0,0,.45)),
        radial-gradient(circle at 70% 40%, rgba(205,164,94,.23), transparent 28%),
        linear-gradient(145deg, #0a0907, #2a241a 60%, #0b0906);
    position: relative;
    overflow: hidden;
}
.login-visual::after { content: ""; position: absolute; inset: 13% -4% -10% 32%; border: 1px solid rgba(255,255,255,.08); transform: rotate(-8deg); box-shadow: 0 0 0 80px rgba(255,255,255,.015), 0 0 0 160px rgba(255,255,255,.01); }
.login-visual > * { position: relative; z-index: 2; }
.login-visual h1 { max-width: 700px; font-family: Georgia, serif; color: var(--gold); font-size: clamp(44px, 5vw, 76px); line-height: 1.06; font-weight: 500; margin: 16px 0; }
.login-visual p { max-width: 570px; color: rgba(255,255,255,.7); }
.login-panel { background: var(--cream); display: grid; place-items: center; padding: 38px; }
.login-card { width: min(430px, 100%); }
.login-card h2 { font-family: Georgia, serif; font-size: 44px; margin: 8px 0; font-weight: 500; }
.login-card > p { color: var(--muted); margin-bottom: 28px; }

/* Forms */
.stack-form, .document-form { display: grid; gap: 20px; }
.form-group { display: grid; gap: 8px; }
.form-group label { font-size: 12px; font-weight: 800; letter-spacing: .04em; color: #4f493f; }
.form-group input,
.form-group textarea,
.form-group select,
.search-form input,
.filter-form select {
    width: 100%;
    border: 1px solid #d7cfc0;
    background: #fff;
    color: var(--ink);
    min-height: 48px;
    padding: 12px 14px;
    border-radius: 5px;
    outline: none;
    transition: .2s ease;
}
.form-group textarea { resize: vertical; min-height: 110px; }
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus,
.search-form input:focus,
.filter-form select:focus { border-color: var(--gold-dark); box-shadow: 0 0 0 3px rgba(167,122,49,.12); }
.form-group small { color: #837b70; font-size: 11px; }
.form-group code { background: #eee8dd; padding: 2px 5px; border-radius: 3px; }
.required { color: var(--danger); }
.form-grid { display: grid; gap: 18px; }
.two-columns { grid-template-columns: repeat(2, minmax(0,1fr)); }
.document-form h3 { margin: 20px 0 0; font-family: Georgia, serif; font-size: 25px; }
.form-actions { display: flex; justify-content: flex-end; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); margin-top: 6px; }
.checkbox-group { align-content: end; }
.checkbox-group label { min-height: 48px; display: flex; align-items: center; gap: 8px; border: 1px solid #d7cfc0; padding: 0 12px; border-radius: 5px; background: #fff; }
.checkbox-group input[type=checkbox] { width: 18px; min-height: 18px; }

/* App shell */
.app-body { background: #efede7; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar) 1fr; }
.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar);
    background: #0b0a08;
    color: #fff;
    padding: 28px 20px 22px;
    display: flex;
    flex-direction: column;
    z-index: 50;
    border-right: 1px solid rgba(205,164,94,.16);
}
.brand-sidebar { padding: 0 8px 24px; border-bottom: 1px solid rgba(255,255,255,.1); }
.sidebar-nav { display: grid; gap: 5px; margin-top: 24px; }
.sidebar-nav a { padding: 12px 14px; color: rgba(255,255,255,.68); font-size: 13px; border-left: 2px solid transparent; }
.sidebar-nav a:hover, .sidebar-nav a.active { color: #fff; background: rgba(255,255,255,.05); border-left-color: var(--gold); }
.nav-section { margin: 24px 14px 7px; font-size: 9px; letter-spacing: .2em; color: var(--gold); font-weight: 800; }
.sidebar-footer { margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); }
.user-chip { display: flex; align-items: center; gap: 10px; }
.avatar { width: 37px; height: 37px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #1b150c; font-weight: 900; }
.user-chip strong, .user-chip small { display: block; }
.user-chip strong { font-size: 12px; }
.user-chip small { font-size: 10px; color: rgba(255,255,255,.55); }
.logout-link { display: block; margin-top: 14px; font-size: 11px; color: rgba(255,255,255,.55); }
.app-main { grid-column: 2; min-width: 0; }
.topbar {
    min-height: 110px;
    padding: 24px clamp(24px, 4vw, 60px);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    background: #f8f6f1;
    border-bottom: 1px solid #dfd8cc;
    position: sticky;
    top: 0;
    z-index: 20;
}
.topbar-title { min-width: 0; }
.topbar h1 { margin: 2px 0 0; font-family: Georgia, serif; font-size: 32px; font-weight: 500; line-height: 1.02; }
.menu-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--line); background: #fff; }
.content-wrap { padding: 34px clamp(20px, 4vw, 60px) 70px; display: grid; gap: 28px; overflow-x: hidden; }
.panel { background: #fff; border: 1px solid #dfd8cc; border-radius: var(--radius); padding: 28px; box-shadow: 0 8px 28px rgba(25,20,12,.04); min-width: 0; }
.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 24px; }
.panel-heading h2 { margin: 5px 0 0; font-family: Georgia, serif; font-size: 30px; font-weight: 500; }
.panel-heading p { color: var(--muted); margin: 8px 0 0; }
.panel-heading-wrap { flex-wrap: wrap; align-items: end; }
.stats-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
}
.stats-grid-five { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.stats-grid > * { min-width: 0; }
.stat-card { background: #fff; border: 1px solid #dfd8cc; border-radius: 14px; padding: 20px; min-height: 145px; }
.stat-card span, .stat-card small { display: block; }
.stat-card span { color: #7d7469; font-size: 10px; letter-spacing: .16em; font-weight: 800; }
.stat-card strong { display: block; font-family: Georgia, serif; font-size: clamp(30px, 2.7vw, 44px); color: #252018; margin: 8px 0 2px; }
.stat-card small { color: #8a8379; }
.stat-card.stat-dark { background: #16130f; color: #fff; border-color: #16130f; }
.stat-card.stat-dark span, .stat-card.stat-dark small { color: rgba(255,255,255,.55); }
.stat-card.stat-dark strong { color: var(--gold); }
.stat-link { color: inherit; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.stat-link:hover { transform: translateY(-3px); box-shadow: 0 16px 30px rgba(49,38,19,.11); border-color: var(--gold-dark); }
.stat-link:focus-visible { outline: 3px solid rgba(205,164,94,.35); outline-offset: 3px; }
.template-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.template-card { border: 1px solid var(--line); padding: 20px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; border-radius: 10px; transition: .2s ease; }
.template-card:hover { border-color: var(--gold-dark); transform: translateY(-2px); box-shadow: 0 14px 28px rgba(49,38,19,.08); }
.document-icon { width: 46px; height: 52px; display: grid; place-items: center; background: #191610; color: var(--gold); font-family: Georgia, serif; font-size: 22px; border-radius: 3px; }
.template-card h3 { margin: 0; font-size: 16px; }
.template-card p { margin: 4px 0; color: var(--muted); font-size: 13px; }
.template-card small { color: var(--gold-dark); }
.template-card > b { font-size: 22px; color: var(--gold-dark); }
.empty-state { text-align: center; padding: 45px 20px; border: 1px dashed #d5ccbd; color: var(--muted); }
.empty-state h3 { color: var(--ink); font-family: Georgia, serif; font-size: 24px; margin: 0 0 8px; }

/* Tables */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 760px; }
th { text-align: left; padding: 12px 12px; font-size: 10px; letter-spacing: .12em; color: #786f63; border-bottom: 1px solid var(--line); text-transform: uppercase; }
td { padding: 16px 12px; border-bottom: 1px solid #eee9e0; font-size: 13px; vertical-align: top; }
tbody tr:hover { background: #fbfaf7; }
.table-action { color: var(--gold-dark); font-weight: 800; font-size: 12px; }
.table-subtext { display: block; color: var(--muted); margin-top: 3px; }
.badge { display: inline-flex; min-height: 24px; align-items: center; padding: 0 8px; border-radius: 20px; font-size: 10px; font-weight: 800; background: #eee8dd; color: #655b4c; }
.badge-success { background: #e2f3e9; color: var(--success); }
.badge-muted { background: #ecebea; color: #777; }
.audit-action { font-size: 10px; font-weight: 900; color: var(--gold-dark); letter-spacing: .04em; }
.details-code { max-width: 350px; white-space: pre-wrap; word-break: break-word; font-size: 10px; color: #666; }

/* Document screens */
.form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 24px; align-items: start; }
.info-panel { position: sticky; top: 138px; background: #17140f; color: #fff; }
.info-panel h3 { font-family: Georgia, serif; font-size: 27px; margin: 10px 0; }
.info-panel p, .info-panel li { color: rgba(255,255,255,.65); }
.check-list { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
.check-list li::before { content: "✓"; color: var(--gold); font-weight: 900; margin-right: 9px; }
.warning-panel { background: #332819; }
.document-header-card { background: #15120e; color: #fff; border-radius: var(--radius); padding: 30px; display: flex; justify-content: space-between; gap: 24px; align-items: center; }
.document-header-card h2 { font-family: Georgia, serif; font-size: 36px; color: var(--gold); margin: 5px 0; }
.document-header-card p { margin: 0; color: rgba(255,255,255,.6); }
.action-group { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.action-group form { margin: 0; }
.details-grid { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 24px; align-items: start; }
.data-list { display: grid; gap: 0; }
.data-list > div { display: grid; grid-template-columns: 210px 1fr; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.data-list dt, .metadata-panel dt { color: #857b6e; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.data-list dd, .metadata-panel dd { margin: 0; }
.metadata-panel dl { display: grid; gap: 17px; }
.metadata-panel dl > div { border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.metadata-panel dd { margin-top: 5px; }
.timeline { display: grid; }
.timeline-item { position: relative; display: grid; grid-template-columns: 24px 1fr auto; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: center; }
.timeline-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px rgba(205,164,94,.15); }
.timeline-item p, .timeline-item small { margin: 2px 0; color: var(--muted); }

/* Admin */
.admin-split { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 24px; align-items: start; }
.user-form-panel { position: sticky; top: 138px; }
.user-form-panel h2 { font-family: Georgia, serif; margin: 6px 0 22px; font-size: 28px; }
.field-builder-heading { display: flex; justify-content: space-between; align-items: end; margin-top: 14px; }
.field-builder-heading h3 { margin: 3px 0 0; }
.field-builder { display: grid; gap: 16px; }
.field-row { border: 1px solid var(--line); border-radius: 10px; padding: 18px; background: #faf8f4; }
.field-row-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.field-columns { grid-template-columns: 1.2fr 1.2fr .9fr .7fr; }
.icon-button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: #fff; }
.icon-button.danger { color: var(--danger); }
.options-group[hidden] { display: none; }
.search-form, .filter-form { display: flex; gap: 9px; flex-wrap: wrap; }
.search-form input { min-width: 290px; }
.filter-form select { width: auto; min-width: 180px; }

/* Alerts */
.alert { padding: 13px 15px; border-radius: 7px; border: 1px solid transparent; font-size: 13px; }
.alert-success { background: #e8f5ed; border-color: #bddfc9; color: #17613e; }
.alert-danger { background: #f8e9e7; border-color: #e7c2bd; color: #872e28; }
.alert-warning { background: #fbf2df; border-color: #ead5a6; color: #80570d; }

/* Installer */
.install-body { min-height: 100vh; background: #0c0a08; padding: 40px 20px; }
.install-shell { width: min(980px,100%); margin: 0 auto; }
.install-brand { color: #fff; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 24px; }
.install-brand strong, .install-brand small { display: block; }
.install-brand small { letter-spacing: .16em; font-size: 9px; color: rgba(255,255,255,.55); }
.install-card { background: var(--cream); border-radius: 18px; padding: clamp(24px,5vw,50px); }
.install-card h1 { font-family: Georgia, serif; font-size: 44px; margin: 8px 0; }
.install-card > p { color: var(--muted); }
.requirements-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 24px 0; }
.requirement { padding: 10px 12px; border: 1px solid var(--line); font-size: 12px; background: #fff; }
.requirement span { font-weight: 900; margin-right: 7px; }
.requirement.ok span { color: var(--success); }
.requirement.fail span { color: var(--danger); }

@media (max-width: 1180px) {
    .stats-grid { grid-template-columns: repeat(5, minmax(155px, 1fr)); overflow-x: auto; padding-bottom: 6px; }
    .field-columns { grid-template-columns: repeat(2,1fr); }
    .admin-split { grid-template-columns: 1fr; }
    .user-form-panel { position: static; }
}

@media (max-width: 900px) {
    :root { --sidebar: 260px; }
    .landing-nav a:not(.login-link) { display: none; }
    .hero-content { margin-left: 11vw; width: 78vw; }
    .hero-side { display: none; }
    .hero-index { left: 11vw; }
    .feature-grid, .section-light, .login-shell { grid-template-columns: 1fr; }
    .login-visual { min-height: 48vh; }
    .login-panel { min-height: 52vh; }
    .app-shell { display: block; }
    .sidebar { transform: translateX(-100%); transition: .25s ease; box-shadow: 20px 0 40px rgba(0,0,0,.2); }
    .sidebar.open { transform: translateX(0); }
    .app-main { grid-column: auto; }
    .menu-toggle { display: inline-grid; place-items: center; margin-right: 14px; }
    .topbar { justify-content: flex-start; }
    .topbar > .btn { margin-left: auto; }
    .form-layout, .details-grid { grid-template-columns: 1fr; }
    .info-panel { position: static; }
    .document-header-card { align-items: flex-start; flex-direction: column; }
    .action-group { justify-content: flex-start; }
}

@media (max-width: 640px) {
    .landing-header { height: 72px; padding: 0 20px; }
    .brand-logo-landing { width: 156px; }
    .brand-logo-login { width: 176px; }
    .brand-logo-footer { width: 150px; }
    .brand-logo-install { width: 180px; }
    .brand-mark { width: 36px; height: 36px; }
    .hero-content { width: auto; margin: 0; padding: 100px 22px 70px; }
    .hero h1 { font-size: 39px; letter-spacing: .025em; }
    .hero-actions { align-items: flex-start; flex-direction: column; }
    .hero-index { left: 22px; bottom: 28px; }
    .section-dark, .section-light { padding: 75px 22px; }
    .feature-grid { grid-template-columns: 1fr; }
    .landing-footer { padding: 32px 22px; flex-direction: column; align-items: flex-start; gap: 20px; }
    .login-visual { padding: 30px 22px; }
    .login-visual h1 { font-size: 41px; }
    .login-panel { padding: 36px 22px; }
    .topbar { min-height: 88px; padding: 18px; }
    .topbar h1 { font-size: 24px; }
    .topbar .eyebrow { display: none; }
    .topbar > .btn { padding: 0 12px; font-size: 10px; }
    .content-wrap { padding: 20px 14px 50px; }
    .panel { padding: 20px; border-radius: 12px; }
    .template-grid, .two-columns, .field-columns { grid-template-columns: 1fr; }
    .stat-card strong { font-size: 36px; }
    .panel-heading { flex-direction: column; }
    .search-form, .filter-form { width: 100%; }
    .search-form input, .filter-form select { min-width: 0; width: 100%; }
    .data-list > div { grid-template-columns: 1fr; gap: 5px; }
    .action-group, .form-actions { width: 100%; }
    .action-group .btn, .action-group form, .action-group form button { width: 100%; }
    .form-actions { flex-direction: column-reverse; }
    .form-actions .btn { width: 100%; }
    .requirements-grid { grid-template-columns: 1fr; }
}

/* IA Jurídica */
.btn:disabled,
button:disabled,
select:disabled,
textarea:disabled,
input:disabled { opacity: .58; cursor: not-allowed; transform: none !important; }
.ai-dashboard-card {
    position: relative;
    overflow: hidden;
    min-height: 230px;
    padding: 38px;
    border-radius: var(--radius);
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    background:
        radial-gradient(circle at 88% 35%, rgba(205,164,94,.28), transparent 24%),
        linear-gradient(120deg, #0a0907 0%, #18140e 58%, #2e2416 100%);
    border: 1px solid rgba(205,164,94,.25);
    box-shadow: 0 20px 48px rgba(13,10,6,.18);
}
.ai-dashboard-card::after {
    content: "IA";
    position: absolute;
    right: 6%;
    top: 50%;
    transform: translateY(-52%);
    font-family: Georgia, serif;
    font-size: 150px;
    color: rgba(205,164,94,.08);
    pointer-events: none;
}
.ai-dashboard-card > * { position: relative; z-index: 1; }
.ai-dashboard-card h2 { margin: 7px 0 10px; font-family: Georgia, serif; font-size: clamp(31px, 3vw, 47px); font-weight: 500; color: var(--gold); }
.ai-dashboard-card p { margin: 0; max-width: 670px; color: rgba(255,255,255,.68); }
.ai-hero-panel {
    min-height: 250px;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    padding: clamp(28px, 5vw, 52px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    color: #fff;
    background:
        radial-gradient(circle at 82% 42%, rgba(205,164,94,.24), transparent 30%),
        linear-gradient(125deg, #080705, #18140f 60%, #282014);
    border: 1px solid rgba(205,164,94,.25);
}
.ai-hero-panel h2 { margin: 8px 0 14px; max-width: 800px; font-family: Georgia, serif; font-size: clamp(36px, 4vw, 60px); line-height: 1.08; color: var(--gold); font-weight: 500; }
.ai-hero-panel p { max-width: 780px; margin: 0; color: rgba(255,255,255,.68); }
.ai-orbit { flex: 0 0 150px; width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(205,164,94,.45); box-shadow: 0 0 0 18px rgba(205,164,94,.04), 0 0 0 42px rgba(205,164,94,.025); }
.ai-orbit span { width: 82px; height: 82px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #171109; font-family: Georgia, serif; font-size: 27px; font-weight: 800; }
.ai-form-layout { grid-template-columns: minmax(0, 1fr) 340px; }
.ai-guide-panel { background: linear-gradient(145deg, #17140f, #292014); }
.numbered-list { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 15px; }
.numbered-list li { display: flex; align-items: center; gap: 11px; color: rgba(255,255,255,.72); }
.numbered-list li span { width: 29px; height: 29px; flex: 0 0 29px; border-radius: 50%; display: grid; place-items: center; color: #1b140a; background: var(--gold); font-size: 11px; font-weight: 900; }
.legal-warning { margin-top: 28px; padding: 18px; border: 1px solid rgba(205,164,94,.25); background: rgba(205,164,94,.06); }
.legal-warning strong { color: var(--gold); }
.legal-warning p { margin: 7px 0 0; font-size: 12px; }
.checkbox-card { padding: 16px; border: 1px solid var(--line); background: #faf8f4; border-radius: 7px; }
.checkbox-card label { display: flex; align-items: flex-start; gap: 10px; font-weight: 650; }
.checkbox-card input[type=checkbox] { width: 18px; height: 18px; min-height: 18px; margin-top: 2px; }
.privacy-confirm { border-left: 4px solid var(--gold); }
.ai-review-banner { display: flex; gap: 14px; align-items: center; padding: 16px; margin: -6px 0 22px; border: 1px solid #d7bf8f; background: #fff8e9; border-radius: 9px; }
.ai-review-banner strong, .ai-review-banner p { display: block; margin: 0; }
.ai-review-banner p { margin-top: 3px; color: #74654c; font-size: 12px; }
.ai-mini-icon { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 46px; background: #17130d; color: var(--gold); font-family: Georgia, serif; font-weight: 800; }
.status-pill { display: inline-flex; align-items: center; min-height: 25px; padding: 0 9px; border-radius: 20px; font-size: 10px; font-weight: 850; }
.status-completed { background: #e3f3e9; color: #17613e; }
.status-failed { background: #f8e9e7; color: #872e28; }
.status-pending { background: #fbf2df; color: #80570d; }
.ai-security-panel { background: linear-gradient(145deg, #15120e, #292116); }
.ai-status { margin-top: 28px; padding: 16px; border: 1px solid rgba(255,255,255,.13); }
.ai-status strong, .ai-status small { display: block; }
.ai-status small { margin-top: 5px; color: rgba(255,255,255,.57); }
.ai-status.ready strong { color: #8fd5ab; }
.ai-status.not-ready strong { color: #e5bd72; }
[data-ai-submit].is-loading::before { content: ""; width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(0,0,0,.25); border-top-color: #17120a; animation: ai-spin .8s linear infinite; }
@keyframes ai-spin { to { transform: rotate(360deg); } }

@media (max-width: 1280px) {
    .stats-grid { grid-template-columns: repeat(5, minmax(160px, 1fr)); overflow-x: auto; padding-bottom: 6px; }
}
@media (max-width: 900px) {
    .stats-grid { grid-template-columns: repeat(5, minmax(155px, 1fr)); overflow-x: auto; padding-bottom: 6px; }
    .ai-dashboard-card, .ai-hero-panel { align-items: flex-start; flex-direction: column; }
    .ai-orbit { display: none; }
    .ai-form-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .stats-grid { grid-template-columns: repeat(5, minmax(150px, 1fr)); overflow-x: auto; padding-bottom: 6px; }
    .ai-dashboard-card, .ai-hero-panel { padding: 25px 20px; }
    .ai-dashboard-card .btn { width: 100%; }
    .ai-hero-panel h2 { font-size: 35px; }
}


/* Ajuste de responsividade dos cards de métricas */
@media (min-width: 1181px) {
    .stats-grid,
    .stats-grid-five {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        overflow: visible;
    }
    .stat-card {
        min-height: 164px;
        padding: 22px 24px;
    }
}

@media (max-width: 1180px) {
    .stats-grid,
    .stats-grid-five {
        grid-template-columns: none !important;
        grid-auto-flow: column;
        grid-auto-columns: minmax(210px, 1fr);
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        padding-bottom: 8px;
        margin-bottom: 2px;
        scroll-snap-type: x proximity;
    }
    .stats-grid > *,
    .stats-grid-five > * {
        scroll-snap-align: start;
    }
    .stats-grid::-webkit-scrollbar,
    .stats-grid-five::-webkit-scrollbar {
        height: 8px;
    }
    .stats-grid::-webkit-scrollbar-thumb,
    .stats-grid-five::-webkit-scrollbar-thumb {
        background: rgba(117, 102, 74, .35);
        border-radius: 999px;
    }
}

@media (max-width: 900px) {
    .topbar {
        grid-template-columns: 56px minmax(0, 1fr) minmax(160px, 230px);
        align-items: start;
    }
    .menu-toggle {
        display: inline-grid;
        place-items: center;
        width: 56px;
        height: 56px;
        margin-right: 0;
        font-size: 28px;
    }
    .topbar-title h1 {
        font-size: clamp(26px, 7vw, 52px);
        line-height: .95;
        word-break: break-word;
    }
    .topbar > .btn {
        margin-left: 0;
        align-self: center;
        min-height: 92px;
        padding: 16px 18px;
        text-align: left;
        line-height: 1.14;
        justify-content: flex-start;
        white-space: normal;
    }
    .content-wrap { padding-top: 18px; }
    .stats-grid,
    .stats-grid-five {
        grid-auto-columns: minmax(225px, 72vw);
    }
}

@media (max-width: 640px) {
    .topbar {
        min-height: auto;
        padding: 18px 14px;
        grid-template-columns: 58px minmax(0, 1fr) 138px;
        gap: 14px;
    }
    .topbar-title .eyebrow { display: none; }
    .topbar h1 { font-size: clamp(28px, 9vw, 50px); }
    .topbar > .btn {
        min-height: 92px;
        width: 100%;
        max-width: 138px;
        padding: 14px 16px;
        font-size: 10px;
        letter-spacing: .12em;
    }
    .content-wrap { padding: 18px 14px 50px; }
    .stats-grid,
    .stats-grid-five {
        grid-auto-columns: minmax(215px, 74vw);
        gap: 12px;
    }
    .stat-card {
        min-height: 168px;
        padding: 18px 18px 16px;
    }
    .stat-card strong { font-size: 34px; }
}