:root {
    --coal-950: #0d0e0f; --coal-900: #151617; --coal-800: #242526;
    --gunmetal: #343536; --steel: #65625d; --ash: #8d8982;
    --sand: #d8d0c3; --paper: #f3f0ea; --surface: #fbfaf7;
    --amber: #c78537; --amber-deep: #8c5724; --amber-soft: #f1e1c9;
    --green: #477b68; --green-soft: #dcebe5; --red: #9c4e42; --red-soft: #f1ded9;
    --line: #d7d0c5; --ink: #232321; --muted: #77736c;
    --radius: 18px; --shadow: 0 18px 50px rgba(35,29,21,.08), inset 0 1px rgba(255,255,255,.75);
}
* { box-sizing: border-box; }
html { color-scheme: light; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; line-height: 1.55; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
input, select, textarea { width: 100%; border: 1px solid #cfc7bb; border-radius: 10px; outline: 0; background: rgba(255,255,255,.86); color: var(--ink); padding: 11px 12px; transition: border-color .16s, box-shadow .16s, background .16s; }
input:focus, select:focus, textarea:focus { border-color: var(--amber); background: #fff; box-shadow: 0 0 0 3px rgba(199,133,55,.14); }
textarea { resize: vertical; }
label { display: grid; gap: 6px; color: #57534d; font-size: 11px; font-weight: 780; letter-spacing: .25px; }
label small { color: var(--muted); font-size: 10px; font-weight: 500; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 248px minmax(0,1fr); }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; width: 248px; display: flex; flex-direction: column; background: linear-gradient(155deg,#242525 0%,#131414 62%,#0c0d0d 100%); color: #e9e4dc; padding: 24px 16px; box-shadow: inset -1px 0 rgba(255,255,255,.05),14px 0 40px rgba(0,0,0,.12); }
.brand, .login-brand { display: flex; align-items: center; gap: 12px; }
.brand { padding: 2px 8px 26px; border-bottom: 1px solid rgba(255,255,255,.09); }
.brand-mark { position: relative; display: grid; width: 43px; height: 43px; place-items: center; overflow: hidden; border: 1px solid #b67c3d; border-radius: 13px; color: #f6d7ad; font-weight: 900; letter-spacing: -1px; background: linear-gradient(145deg,#4a3a2a,#1a1917); box-shadow: inset 0 1px 2px rgba(255,255,255,.18),0 8px 18px rgba(0,0,0,.25); }
.brand-mark::after { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; pointer-events: none; }
.brand strong, .brand small, .login-brand strong, .login-brand small { display: block; }
.brand strong, .login-brand strong { font-size: 13px; letter-spacing: 1.7px; }
.brand small, .login-brand small { color: #a7a097; font-size: 9px; letter-spacing: .6px; }
.nav { display: grid; gap: 5px; padding-top: 23px; }
.nav-item { display: flex; align-items: center; gap: 13px; border: 1px solid transparent; border-radius: 11px; color: #9f9a92; padding: 11px 12px; font-size: 12px; font-weight: 690; transition: .16s; }
.nav-item:hover { color: #eee9e1; background: rgba(255,255,255,.045); }
.nav-item.is-active { border-color: rgba(207,146,74,.28); background: linear-gradient(100deg,rgba(199,133,55,.18),rgba(199,133,55,.05)); color: #f1d2a7; box-shadow: inset 3px 0 var(--amber); }
.nav-icon { position: relative; width: 17px; height: 17px; border: 1.6px solid currentColor; border-radius: 4px; opacity: .9; }
.nav-icon[data-icon="pulse"] { border-width: 0 0 2px 2px; border-radius: 0; transform: skew(-18deg); }
.nav-icon[data-icon="layers"]::after { content: ""; position: absolute; inset: 4px -4px -4px 4px; border: 1.4px solid currentColor; border-radius: 4px; }
.nav-icon[data-icon="check"]::after { content: ""; position: absolute; width: 7px; height: 4px; left: 4px; top: 4px; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.sidebar-foot { margin-top: auto; border-top: 1px solid rgba(255,255,255,.09); padding: 18px 9px 0; }
.environment { color: #c6beb2; font-size: 9px; font-weight: 850; letter-spacing: 1.15px; }
.environment span { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: #c98a41; box-shadow: 0 0 0 4px rgba(201,138,65,.12); }
.sidebar-foot p { margin: 6px 0 0; color: #696762; font-size: 10px; }

.main { grid-column: 2; min-width: 0; display: flex; min-height: 100vh; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 25; height: 74px; display: flex; align-items: center; gap: 18px; border-bottom: 1px solid rgba(89,79,66,.14); background: rgba(247,244,238,.89); padding: 0 30px; backdrop-filter: blur(18px) saturate(.8); }
.menu-toggle { display: none; }
.division-switch { display: flex; align-items: center; gap: 9px; }
.division-switch label { color: var(--muted); font-size: 9px; letter-spacing: .9px; text-transform: uppercase; white-space: nowrap; }
.division-switch select { width: 200px; border-color: #d4ccc0; background-color: rgba(255,255,255,.7); padding: 9px 34px 9px 11px; font-size: 12px; font-weight: 700; }
.global-search { position: relative; flex: 1; max-width: 410px; margin-left: 8px; }
.global-search > span { position: absolute; left: 12px; top: 7px; z-index: 1; color: #817b72; font-size: 21px; }
.global-search input { height: 39px; border-color: #d7d0c5; background: rgba(255,255,255,.54); padding: 8px 38px; font-size: 12px; }
.global-search kbd { position: absolute; right: 11px; top: 9px; border: 1px solid #cbc2b6; border-radius: 5px; background: #ece7de; color: #7a746b; padding: 1px 6px; font: 10px/16px ui-monospace,monospace; }
.user-menu { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.avatar { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid #bc8549; border-radius: 50%; background: linear-gradient(145deg,#493723,#201c18); color: #f1d4af; font-weight: 850; box-shadow: inset 0 1px rgba(255,255,255,.15); }
.user-copy strong, .user-copy small { display: block; white-space: nowrap; }
.user-copy strong { font-size: 11px; }
.user-copy small { color: var(--muted); font-size: 9px; }
.logout-form { margin: 0 0 0 7px; }
.logout-link { border: 0; background: transparent; color: var(--muted); padding: 7px 0; font-size: 11px; font-weight: 750; }
.logout-link:hover { color: var(--red); }
.icon-button { border: 0; border-radius: 8px; background: transparent; padding: 8px; }
.content { width: 100%; max-width: 1520px; margin: 0 auto; padding: 34px; flex: 1; }
.footer { display: flex; justify-content: space-between; gap: 20px; color: #928c84; padding: 18px 34px 26px; font-size: 10px; }

.eyebrow { display: block; color: var(--amber-deep); font-size: 9px; font-weight: 900; letter-spacing: 1.7px; text-transform: uppercase; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 25px; }
.page-heading h1 { margin: 4px 0 2px; font-size: clamp(27px,3vw,39px); line-height: 1.08; letter-spacing: -1.6px; }
.page-heading p { margin: 0; color: var(--muted); }
.as-of { color: var(--muted); font-size: 10px; letter-spacing: .45px; white-space: nowrap; }
.button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; border: 1px solid #c9c0b4; border-radius: 10px; background: linear-gradient(#fff,#eeeae3); color: #3e3b36; padding: 9px 16px; font-weight: 780; transition: transform .16s,border-color .16s,box-shadow .16s; }
.button:hover { border-color: #a9967f; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(46,37,27,.08); }
.button--primary { border-color: #a86c2f; background: linear-gradient(145deg,#d69a52,#a6632c); color: #1d160f; box-shadow: inset 0 1px rgba(255,255,255,.34),0 10px 22px rgba(132,79,29,.2); }
.button--full { width: 100%; }

.metric-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-bottom: 20px; }
.metric { position: relative; overflow: hidden; min-height: 145px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(150deg,rgba(255,255,255,.98),rgba(239,234,225,.84)); padding: 22px; box-shadow: var(--shadow); }
.metric::after { content: ""; position: absolute; width: 68px; height: 68px; right: -28px; top: -28px; border: 11px solid rgba(121,108,91,.09); border-radius: 50%; }
.metric span, .metric small { display: block; }
.metric span { color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: 1.2px; }
.metric strong { display: block; margin: 17px 0 2px; font-size: clamp(24px,2.7vw,35px); line-height: 1; letter-spacing: -1.2px; }
.metric small { color: var(--muted); }
.metric--navy { border-color: #393939; background: linear-gradient(145deg,#353535,#171818); color: #f6f1e9; }
.metric--navy span, .metric--navy small { color: #a9a39b; }
.metric--navy::after { border-color: rgba(216,169,107,.12); }
.metric--gold { border-color: #c5a175; background: linear-gradient(145deg,#eddbc0,#c89a61); color: #2d2115; }
.metric--gold span { color: #72491f; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 20px; margin-bottom: 20px; }
.panel, .table-card, .editor-card { border: 1px solid var(--line); border-radius: var(--radius); background: rgba(251,250,247,.93); box-shadow: var(--shadow); }
.panel { padding: 23px; }
.panel--table { margin-top: 20px; padding: 0; overflow: hidden; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.panel-head h2 { margin: 3px 0 0; font-size: 19px; }
.panel-head > a { color: var(--amber-deep); font-size: 11px; font-weight: 800; }
.panel--table .panel-head { margin: 0; padding: 20px 23px; border-bottom: 1px solid var(--line); }
.panel-note { margin: 20px 0 0; border-left: 3px solid var(--amber); color: var(--muted); padding: 7px 0 7px 13px; font-size: 11px; }
.action-list { display: grid; }
.action-list a { display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 14px; border-top: 1px solid #e6dfd5; padding: 13px 3px; }
.action-list a:first-child { border-top: 0; }
.action-list a:hover strong { color: var(--amber-deep); }
.action-list strong, .action-list small { display: block; }
.action-list small { color: var(--muted); font-size: 10px; }
.action-dot { width: 8px; height: 8px; border-radius: 50%; background: #6f6a62; }
.action-dot--magenta { background: #985d54; } .action-dot--gold { background: var(--amber); } .action-dot--green { background: var(--green); } .action-dot--blue { background: #6a756f; }
.ownership-flow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 18px; }
.ownership-flow > i { flex: 1; height: 1px; background: #c9bda9; }
.flow-step { min-width: 95px; text-align: center; }
.flow-step span { display: grid; width: 31px; height: 31px; margin: auto auto 9px; place-items: center; border: 1px solid #b8aa97; border-radius: 50%; color: var(--muted); font-size: 9px; font-weight: 850; }
.flow-step strong, .flow-step small { display: block; } .flow-step strong { font-size: 9px; letter-spacing: .6px; } .flow-step small { color: var(--muted); font-size: 8px; }
.flow-step.is-current span { border-color: var(--amber-deep); background: var(--amber-deep); color: #fff; box-shadow: 0 0 0 5px rgba(199,133,55,.14); }

.toolbar { display: flex; gap: 10px; border: 1px solid var(--line); border-radius: 13px; background: rgba(251,250,247,.92); padding: 12px; margin-bottom: 16px; box-shadow: inset 0 1px rgba(255,255,255,.7); }
.search-box { position: relative; display: block; flex: 1; }
.search-box span { position: absolute; left: 12px; top: 8px; color: #817b72; font-size: 21px; font-weight: 400; }
.search-box input { padding-left: 38px; }
.table-card { overflow: hidden; } .table-meta { display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); padding: 14px 19px; } .table-meta span { color: var(--muted); font-size: 10px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
th, td { padding: 13px 16px; text-align: left; border-bottom: 1px solid #e6dfd5; vertical-align: middle; }
th { background: #ebe6dd; color: #6e685f; font-size: 8px; font-weight: 900; letter-spacing: 1.05px; text-transform: uppercase; }
td { font-size: 11px; } tbody tr:last-child td { border-bottom: 0; } tbody tr:hover { background: rgba(232,220,201,.25); }
td strong, td small { display: block; } td small { max-width: 360px; overflow: hidden; color: var(--muted); text-overflow: ellipsis; }
.num { text-align: right; } .stock-number { color: #3a332a; font-size: 14px; font-weight: 880; font-variant-numeric: tabular-nums; }
.brand-pill, .owner, .status, .priority, .count-badge, .truth-badge { display: inline-flex; align-items: center; border-radius: 999px; font-size: 8px; font-weight: 900; letter-spacing: .7px; text-transform: uppercase; }
.brand-pill { background: #e6e0d6; color: #514c45; padding: 5px 9px; } .owner, .status, .priority { padding: 5px 9px; }
.owner--jf { background: var(--amber-soft); color: #70471e; } .owner--sipa { background: #dfe4e1; color: #3f5d51; }
.status { background: #e6e2db; color: #666158; } .status--good { background: var(--green-soft); color: #386554; } .status--warn { background: var(--amber-soft); color: #78501f; } .status--bad { background: var(--red-soft); color: #823f36; }
.priority { background: #e6e2db; } .priority--critical, .priority--high { background: var(--red-soft); color: var(--red); } .priority--medium { background: var(--amber-soft); color: #78501f; } .priority--low { background: #e0e5e2; color: #496257; }
.table-action { color: var(--amber-deep); font-weight: 850; } .table-empty { color: var(--muted); padding: 38px 10px; text-align: center; }
.truth-badge { gap: 7px; border: 1px solid #b2cabe; background: var(--green-soft); color: var(--green); padding: 8px 11px; } .count-badge { background: #30302e; color: #f3e6d5; padding: 8px 13px; }

.page-portal .main { position: relative; background: #121313 url("img/mine-sunset.webp") center/cover fixed; }
.page-portal .main::before { content: ""; position: fixed; inset: 0 0 0 248px; z-index: 0; background: linear-gradient(90deg,rgba(9,10,10,.74),rgba(12,12,12,.3) 54%,rgba(8,8,8,.72)),linear-gradient(0deg,rgba(8,8,8,.82),transparent 58%); pointer-events: none; }
.page-portal .topbar, .page-portal .content, .page-portal .footer { position: relative; z-index: 1; }
.page-portal .topbar { border-color: rgba(255,255,255,.12); background: rgba(18,18,18,.72); color: #eee8df; }
.page-portal .division-switch label, .page-portal .user-copy small, .page-portal .logout-link { color: #aaa39a; }
.page-portal .division-switch select, .page-portal .global-search input { border-color: rgba(255,255,255,.15); background: rgba(18,18,18,.56); color: #eee8df; }
.page-portal .global-search kbd { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.08); color: #bdb5aa; }
.page-portal .content { max-width: 1420px; display: flex; min-height: calc(100vh - 118px); flex-direction: column; justify-content: center; }
.portal-hero { display: flex; justify-content: space-between; gap: 40px; align-items: flex-end; margin-bottom: 27px; padding: 8px 0 4px; color: #f4eee5; }
.portal-hero .eyebrow { color: #dca05a; } .portal-hero h1 { margin: 5px 0 8px; font-size: clamp(38px,5vw,66px); letter-spacing: -3px; line-height: .96; } .portal-hero p { max-width: 720px; margin: 0; color: #aaa39a; }
.portal-date { display: grid; grid-template-columns: auto auto; align-items: baseline; min-width: 110px; border-left: 1px solid rgba(255,255,255,.2); padding-left: 23px; }
.portal-date span { grid-row: span 2; font-size: 45px; font-weight: 240; line-height: 1; } .portal-date strong { color: #d39a59; font-size: 11px; letter-spacing: 1px; } .portal-date small { color: #aaa39a; }
.division-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.division-card { position: relative; min-height: 330px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid rgba(225,192,148,.24); border-radius: 24px; padding: 31px; color: #f7f1e8; box-shadow: inset 0 1px rgba(255,255,255,.09),0 24px 60px rgba(0,0,0,.28); transition: transform .2s,border-color .2s,box-shadow .2s; backdrop-filter: blur(14px); }
.division-card:hover { transform: translateY(-4px); border-color: rgba(222,165,94,.55); box-shadow: inset 0 1px rgba(255,255,255,.12),0 31px 70px rgba(0,0,0,.4); }
.division-card--bb { background: linear-gradient(145deg,rgba(45,45,43,.88),rgba(18,18,18,.82)); } .division-card--mc { background: linear-gradient(145deg,rgba(94,61,34,.83),rgba(26,23,20,.88)); }
.division-number { position: absolute; top: 25px; left: 29px; color: rgba(255,255,255,.38); font-size: 10px; font-weight: 850; letter-spacing: 1px; }
.division-card small { color: rgba(255,255,255,.56); font-size: 8px; font-weight: 900; letter-spacing: 1.4px; } .division-card h2 { margin: 8px 0 10px; font-size: clamp(34px,4.2vw,54px); line-height: .94; letter-spacing: -2.3px; } .division-card p { max-width: 460px; margin: 0; color: rgba(255,255,255,.55); font-size: 11px; letter-spacing: .3px; text-transform: uppercase; }
.card-action { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.15); margin-top: 21px; padding-top: 15px; color: #dfc096; font-size: 11px; font-weight: 790; } .card-action b { font-size: 21px; }
.division-symbol { position: absolute; right: 31px; top: 31px; width: 145px; height: 145px; opacity: .13; } .division-symbol i { position: absolute; border: 15px solid #fff; border-radius: 50%; } .division-symbol i:nth-child(1) { inset: 0 31px 62px 31px; } .division-symbol i:nth-child(2) { inset: 46px 0 16px 62px; } .division-symbol i:nth-child(3) { inset: 63px 64px 0 0; }
.gear-symbol { position: absolute; right: 41px; top: 39px; width: 120px; height: 120px; border: 22px dotted rgba(255,255,255,.16); border-radius: 50%; } .gear-symbol::after { content: ""; position: absolute; inset: 23px; border: 6px solid rgba(255,255,255,.2); border-radius: 50%; }
.all-division-link { display: block; color: #d5b182; margin-top: 16px; text-align: right; font-size: 11px; font-weight: 780; } .page-portal .footer { color: #77716b; }

.editor-card { padding: 0 26px; } .editor-section { display: grid; grid-template-columns: 60px minmax(0,1fr); gap: 20px; border-bottom: 1px solid var(--line); padding: 28px 0; }
.section-number { color: #a69c8d; font-size: 11px; font-weight: 900; letter-spacing: 1px; } .section-body h2, .reference-box h2 { margin: -4px 0 18px; font-size: 19px; } .section-body > label { margin-top: 14px; }
.form-grid { display: grid; gap: 14px; } .form-grid--2 { grid-template-columns: repeat(2,minmax(0,1fr)); } .form-grid--3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.checkbox-label { display: flex; align-items: center; gap: 9px; margin-top: 18px; } .checkbox-label input { width: auto; }
.reference-box { margin: 24px 60px; border: 1px solid #ded5c9; border-radius: 13px; background: #eee9e1; padding: 20px; } .reference-list { display: flex; flex-wrap: wrap; gap: 8px; } .reference-list span { display: flex; gap: 8px; border: 1px solid #d4cabe; border-radius: 8px; background: #fff; padding: 7px 10px; font-size: 10px; } .reference-list b { color: var(--amber-deep); }
.editor-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 22px 0; }
.user-admin-grid { display: grid; grid-template-columns: minmax(340px,.72fr) minmax(0,1.28fr); gap: 20px; align-items: start; }
.user-editor { position: sticky; top: 95px; }
.password-wrap { width: min(520px,100%); margin: 8vh auto; }
.password-wrap .panel { padding: 32px; }
.password-wrap h1 { margin: 5px 0 4px; font-size: 34px; letter-spacing: -1.4px; }
.password-wrap p { margin: 0 0 24px; color: var(--muted); }
.empty-state { max-width: 600px; margin: 80px auto; text-align: center; } .empty-state > span { display: grid; width: 56px; height: 56px; margin: auto; place-items: center; border-radius: 50%; background: var(--red-soft); color: var(--red); font-size: 26px; font-weight: 900; } .empty-state h1 { margin-bottom: 4px; } .empty-state p { color: var(--muted); }

.alert { border: 1px solid #d0b384; border-radius: 10px; background: var(--amber-soft); color: #704b23; padding: 12px 15px; margin-bottom: 16px; } .alert--error { border-color: #d9aba3; background: var(--red-soft); color: #7f3d34; } .alert--success { border-color: #a9c7b9; background: var(--green-soft); color: #386252; }
.auth-body { position: relative; display: grid; min-height: 100vh; place-items: center; overflow-x: hidden; background: #101111 url("img/mine-sunset.webp") center/cover fixed; padding: 24px; }
.auth-body::before { content: ""; position: fixed; inset: 0; background: linear-gradient(90deg,rgba(8,8,8,.22),rgba(8,8,8,.62)),linear-gradient(0deg,rgba(7,7,7,.65),transparent 60%); }
.login-shell, .setup-wrap { position: relative; z-index: 1; width: min(1180px,100%); overflow: hidden; display: grid; border: 1px solid rgba(255,255,255,.12); border-radius: 25px; background: #f6f2eb; box-shadow: 0 35px 110px rgba(0,0,0,.52); }
.login-shell { grid-template-columns: 1.35fr .65fr; min-height: 660px; }
.login-visual, .setup-intro { position: relative; overflow: hidden; color: #f5eee4; padding: 58px; }
.login-visual { background: linear-gradient(90deg,rgba(11,11,11,.12),rgba(11,11,11,.58)),url("img/mine-sunset.webp") 35% center/cover; }
.login-visual::after, .setup-intro::after { content: ""; position: absolute; right: -105px; bottom: -135px; width: 360px; height: 360px; border: 58px solid rgba(201,139,67,.12); border-radius: 50%; }
.login-visual .eyebrow, .setup-intro .eyebrow { position: relative; z-index: 1; color: #e1aa68; }
.login-visual h1, .setup-intro h1 { position: relative; z-index: 1; margin: 82px 0 20px; font-size: clamp(40px,5vw,65px); line-height: .97; letter-spacing: -2.8px; text-shadow: 0 3px 20px rgba(0,0,0,.35); }
.login-visual h1 em { color: #e0ab68; font-style: normal; } .login-visual p, .setup-intro p { position: relative; z-index: 1; max-width: 620px; color: #bdb4a8; }
.flow-line { position: absolute; z-index: 2; left: 58px; right: 58px; bottom: 54px; display: flex; align-items: center; gap: 10px; color: #b6aa9c; font-size: 8px; font-weight: 900; letter-spacing: 1.2px; } .flow-line i { flex: 1; height: 1px; background: rgba(214,171,114,.4); }
.login-panel { display: flex; flex-direction: column; justify-content: center; background: linear-gradient(150deg,#fbf8f2,#e8e0d5); padding: 46px; } .login-brand { margin-bottom: 58px; } .login-brand strong { color: #2b2925; } .login-copy h2 { margin: 0; font-size: 29px; letter-spacing: -1px; } .login-copy p { margin: 3px 0 25px; color: var(--muted); } .login-form { display: grid; gap: 17px; } .login-foot { margin: 28px 0 0; color: #8a8278; font-size: 9px; letter-spacing: .5px; text-align: center; text-transform: uppercase; }

.setup-wrap { grid-template-columns: .85fr 1.15fr; } .setup-intro { background: linear-gradient(145deg,rgba(24,24,23,.8),rgba(13,13,13,.92)),url("img/mine-sunset.webp") left center/cover; padding: 50px; } .setup-intro h1 { margin-top: 55px; font-size: 46px; } .setup-card { background: #f8f5ef; padding: 42px; }
.setup-proof { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 45px 0 28px; } .setup-proof div { border-top: 1px solid rgba(255,255,255,.2); padding-top: 12px; } .setup-proof strong, .setup-proof span { display: block; } .setup-proof strong { font-size: 25px; } .setup-proof span { color: #a59c90; font-size: 8px; }
.security-note { border-left: 2px solid var(--amber); padding-left: 13px; font-size: 10px; } .card-heading span { color: var(--amber-deep); font-size: 9px; font-weight: 900; letter-spacing: 1px; } .card-heading h2 { margin: 4px 0; font-size: 27px; } .card-heading p { margin: 0 0 20px; color: var(--muted); }
.setup-form { display: grid; gap: 20px; } .setup-form fieldset { display: grid; gap: 14px; border: 0; border-top: 1px solid var(--line); margin: 0; padding: 20px 0 0; } .setup-form legend { padding-right: 10px; color: #443b31; font-size: 10px; font-weight: 900; letter-spacing: .7px; }
.success-state { display: grid; min-height: 480px; place-items: center; align-content: center; text-align: center; } .success-icon { display: grid; width: 70px; height: 70px; place-items: center; border-radius: 50%; background: var(--green-soft); color: var(--green); font-size: 32px; } .success-state h2 { margin: 18px 0 0; font-size: 30px; } .success-state p { color: var(--muted); }

@media (max-width:1150px) { .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .form-grid--3 { grid-template-columns: repeat(2,minmax(0,1fr)); } .global-search { max-width: 290px; } .login-visual, .setup-intro { padding: 44px; } .flow-line { left: 44px; right: 44px; } }
@media (max-width:900px) {
    .app-shell { display: block; } .sidebar { transform: translateX(-102%); transition: transform .2s; box-shadow: 15px 0 40px rgba(0,0,0,.28); } .sidebar.is-open { transform: translateX(0); } .main { min-height: 100vh; } .page-portal .main::before { inset: 0; } .menu-toggle { display: block; }
    .topbar { height: 68px; padding: 0 18px; gap: 12px; } .division-switch label, .user-copy, .global-search { display: none; } .division-switch select { width: 174px; } .content { padding: 24px 18px; } .footer { padding: 18px; }
    .dashboard-grid, .division-cards, .user-admin-grid { grid-template-columns: 1fr; } .user-editor { position: static; } .login-shell, .setup-wrap { grid-template-columns: 1fr; } .login-visual { min-height: 390px; } .login-visual h1 { margin-top: 48px; } .setup-intro { min-height: 400px; }
}
@media (max-width:620px) {
    .auth-body { padding: 0; } .login-shell, .setup-wrap { min-height: 100vh; border: 0; border-radius: 0; } .login-visual, .setup-intro, .login-panel, .setup-card { padding: 29px 23px; } .login-visual { min-height: 345px; } .login-visual h1, .setup-intro h1 { margin-top: 35px; } .flow-line { left: 23px; right: 23px; bottom: 29px; }
    .page-heading { align-items: flex-start; flex-direction: column; } .page-heading .button, .page-heading .truth-badge { align-self: stretch; } .metric-grid, .form-grid--2, .form-grid--3 { grid-template-columns: 1fr; } .toolbar { flex-direction: column; } .division-card { min-height: 315px; padding: 25px; } .division-symbol, .gear-symbol { transform: scale(.72); transform-origin: top right; }
    .portal-hero { align-items: flex-start; flex-direction: column; } .portal-date { display: none; } .ownership-flow { align-items: stretch; flex-direction: column; } .ownership-flow > i { width: 1px; min-height: 18px; margin: auto; } .flow-step { min-width: 100%; }
    .editor-card { padding: 0 18px; } .editor-section { grid-template-columns: 1fr; gap: 6px; } .reference-box { margin: 20px 0; } .footer { flex-direction: column; gap: 4px; } .logout-form { margin-left: 0; } .logout-link { font-size: 0; } .logout-link::after { content: "Keluar"; font-size: 10px; } .page-portal .content { min-height: auto; padding-top: 46px; padding-bottom: 46px; }
}
@media print { .sidebar, .topbar, .footer, .toolbar, .button { display: none !important; } .app-shell { display: block; } .main { display: block; } .content { max-width: none; padding: 0; } .panel, .table-card { box-shadow: none; } }