:root {
  --ink: #1c1917;
  --muted: #6b7280;
  --line: #e7e2df;
  --surface: #ffffff;
  --canvas: #f7f6f4;
  --nav: #09090b;
  --nav-soft: #1f2937;
  --green: #f97316;
  --green-2: #fb923c;
  --lime: #ffd43b;
  --lime-soft: #fff3ad;
  --red: #e03131;
  --amber: #eab308;
  --blue: #f97316;
  --shadow: 0 10px 30px rgba(154, 52, 18, .1);
  --radius: 18px;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--canvas); font: 14px/1.5 "DM Sans", system-ui, sans-serif; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
code, .mono { font-family: "SFMono-Regular", Consolas, monospace; }
button { color: inherit; }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; display: flex; width: 252px; flex-direction: column; padding: 31px 22px 20px; color: #d8e7e2; background: var(--nav); }
.brand { display: inline-flex; align-items: center; gap: 13px; width: fit-content; color: #effaf7; }
.brand > span:last-child { display: flex; align-items: baseline; font-family: Manrope, sans-serif; font-size: 19px; letter-spacing: -.5px; }
.brand strong { font-weight: 800; }
.brand b { margin-left: 3px; color: var(--lime); font-size: 11px; letter-spacing: 1.5px; }
.brand-mark { position: relative; display: inline-flex; align-items: end; justify-content: center; gap: 2px; width: 37px; height: 37px; padding: 8px; overflow: hidden; border-radius: 11px; background: var(--lime); transform: rotate(-2deg); }
.brand-mark i { display: block; width: 4px; border-radius: 4px 4px 1px 1px; background: var(--nav); }
.brand-mark i:nth-child(1) { height: 10px; }
.brand-mark i:nth-child(2) { height: 19px; }
.brand-mark i:nth-child(3) { height: 14px; }
.brand-mark.large { width: 68px; height: 68px; gap: 4px; padding: 14px; border-radius: 20px; }
.brand-mark.large i { width: 7px; }
.brand-mark.large i:nth-child(1) { height: 18px; }.brand-mark.large i:nth-child(2) { height: 34px; }.brand-mark.large i:nth-child(3) { height: 25px; }
.nav-kicker { margin: 53px 13px 13px; color: #66817a; font-size: 10px; font-weight: 700; letter-spacing: 1.4px; }
.main-nav { display: grid; gap: 5px; }
.main-nav a { position: relative; display: flex; align-items: center; gap: 13px; min-height: 47px; padding: 0 13px; color: #95aaa4; border-radius: 12px; font-weight: 600; transition: .18s ease; }
.main-nav a:hover { color: #f2faf7; background: rgba(255,255,255,.045); }
.main-nav a.active { color: white; background: var(--nav-soft); box-shadow: inset 0 0 0 1px rgba(185,237,71,.06); }
.nav-icon { display: grid; width: 24px; height: 24px; place-items: center; color: #8fa49e; font-size: 17px; font-weight: 700; }
.main-nav a.active .nav-icon { color: var(--lime); }
.active-dot { position: absolute; right: 13px; width: 5px; height: 5px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(185,237,71,.1); }
.sidebar-status { display: flex; align-items: center; gap: 11px; margin-top: auto; padding: 16px 13px; border-top: 1px solid rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.07); }
.sidebar-status .pulse { position: relative; width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 5px rgba(185,237,71,.09); }
.sidebar-status strong, .sidebar-status small, .sidebar-user strong, .sidebar-user small { display: block; }
.sidebar-status strong { color: #dce9e5; font-size: 12px; }
.sidebar-status small { color: #627b74; font-size: 10px; }
.sidebar-user { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.avatar { display: grid; width: 37px; height: 37px; flex: none; place-items: center; border-radius: 50%; color: var(--lime); background: #163a31; font-size: 11px; font-weight: 800; }
.sidebar-user > span:nth-child(2) { min-width: 0; flex: 1; }
.sidebar-user strong { overflow: hidden; color: #ecf5f2; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user small { color: #637c75; font-size: 9px; }
.sidebar-user button { padding: 7px; border: 0; color: #6c847d; background: none; cursor: pointer; }

.main-content { min-height: 100vh; margin-left: 252px; }
.topbar { display: flex; align-items: center; min-height: 92px; padding: 20px clamp(24px, 3vw, 48px); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.88); backdrop-filter: blur(14px); }
.page-heading h1 { margin: 0; font: 800 clamp(21px, 2.2vw, 27px)/1.2 Manrope, sans-serif; letter-spacing: -.7px; }
.page-heading p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.date-chip { padding: 9px 13px; color: #50625d; border: 1px solid var(--line); border-radius: 10px; background: white; font-size: 11px; font-weight: 600; }
.icon-button, .menu-toggle { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: white; cursor: pointer; }
.menu-toggle { display: none; margin-right: 13px; }
.page-body { width: min(1540px, 100%); min-height: calc(100vh - 142px); margin: 0 auto; padding: 28px clamp(24px, 3vw, 48px) 45px; }
.app-footer { display: flex; justify-content: space-between; padding: 17px clamp(24px, 3vw, 48px); color: #8a9995; border-top: 1px solid var(--line); font-size: 10px; letter-spacing: .4px; }

.hero-strip { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 28px 32px; overflow: hidden; border-radius: 20px; color: white; background: radial-gradient(circle at 82% 10%, rgba(185,237,71,.16), transparent 28%), linear-gradient(120deg, #0b392f, #071e1a); box-shadow: var(--shadow); }
.hero-strip h2 { margin: 4px 0 2px; font: 800 clamp(22px, 3vw, 32px)/1.2 Manrope, sans-serif; letter-spacing: -.8px; }
.hero-strip p { margin: 0; color: #93aca5; font-size: 12px; }
.eyebrow, .panel-kicker { color: var(--lime); font-size: 9px; font-weight: 800; letter-spacing: 1.5px; }
.eyebrow.dark, .panel-kicker { color: var(--green); }
.button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 8px; padding: 0 17px; border: 1px solid transparent; border-radius: 11px; font-weight: 700; font-size: 12px; cursor: pointer; transition: .18s ease; }
.button:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(10,64,50,.12); }
.button.primary { color: white; background: var(--green); }
.button.lime { color: #10271f; background: var(--lime); }
.button.secondary { color: var(--green); border-color: #cbdad5; background: white; }
.button.ghost { color: #61726d; border-color: var(--line); background: transparent; }
.button.danger { color: white; background: var(--red); }
.button.warning { color: #3a2600; background: #ffd43b; }
.button.wide { width: 100%; min-height: 49px; }
.button.small { min-height: 34px; padding: 0 12px; font-size: 11px; }

.metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin: 18px 0; }
.metric-card { position: relative; display: flex; align-items: flex-start; gap: 13px; min-height: 126px; padding: 21px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.metric-card.accent-green { color: white; border-color: #0d654f; background: linear-gradient(140deg, #0f765b, #0a5745); }
.metric-icon { display: grid; width: 39px; height: 39px; flex: none; place-items: center; color: var(--green); border-radius: 11px; background: #e8f4ef; font-size: 18px; }
.accent-green .metric-icon { color: var(--lime); background: rgba(255,255,255,.12); }
.metric-icon.online { color: var(--green-2); }.metric-icon.archive { color: #8b6ec6; background: #f0ebfa; }.metric-icon.clock { color: var(--amber); background: #fff3df; }
.metric-card div:nth-child(2) > span, .metric-card div:nth-child(2) > strong, .metric-card div:nth-child(2) > small { display: block; }
.metric-card div:nth-child(2) > span { color: var(--muted); font-size: 10px; font-weight: 600; }
.metric-card div:nth-child(2) > strong { margin-top: 2px; font: 800 26px/1.2 Manrope, sans-serif; letter-spacing: -.8px; }
.metric-card div:nth-child(2) > strong em { color: #9aacA7; font-size: 14px; font-style: normal; }
.metric-card div:nth-child(2) > strong.metric-date { max-width: 135px; margin-top: 7px; font-size: 13px; line-height: 1.35; }
.metric-card div:nth-child(2) > small { margin-top: 5px; color: #93a09d; font-size: 9px; }
.accent-green div:nth-child(2) > span, .accent-green div:nth-child(2) > small { color: #b7cec7; }
.metric-trend { position: absolute; right: 15px; bottom: 15px; padding: 4px 7px; color: var(--lime); border-radius: 6px; background: rgba(0,0,0,.12); font-size: 8px; font-weight: 700; }
.metric-trend.neutral { color: var(--green); background: #edf7f3; }
.metric-card > .status-badge { position: absolute; right: 15px; bottom: 15px; }

.dashboard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
.span-2 { grid-column: span 2; }.span-3 { grid-column: span 3; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.panel-heading { display: flex; min-height: 75px; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 21px; border-bottom: 1px solid #e8eeec; }
.panel-heading h3 { margin: 2px 0 0; font: 800 16px/1.25 Manrope, sans-serif; letter-spacing: -.3px; }
.panel-heading > a { color: var(--green); font-size: 10px; font-weight: 700; }
.device-status-list { padding: 6px 20px; }
.device-status-list { max-height: 140px; overflow-y: auto; overscroll-behavior: contain; }.device-status-list::-webkit-scrollbar { width: 7px; }.device-status-list::-webkit-scrollbar-thumb { border-radius: 999px; background: #f3a06f; }
.legacy-device-monitor { display: none; }.system-monitor-panel { overflow: hidden; }.system-live { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; color: #087a3a; border-radius: 999px; background: #e2f7e9; font-size: 9px; font-weight: 800; }.system-live i { width: 6px; height: 6px; border-radius: 50%; background: #18a957; box-shadow: 0 0 0 4px rgba(24,169,87,.1); }.system-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 15px 20px 20px; }.system-metrics article { min-width: 0; padding: 13px 14px; border: 1px solid #e3e9e7; border-radius: 12px; background: #f8faf9; }.system-metrics span, .system-metrics strong, .system-metrics small { display: block; }.system-metrics span { color: #7f8f8a; font-size: 9px; font-weight: 700; }.system-metrics strong { margin: 4px 0 3px; overflow: hidden; color: #17231f; font: 800 20px/1.1 Manrope, sans-serif; text-overflow: ellipsis; white-space: nowrap; }.system-metrics small { overflow: hidden; color: #8a9995; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.device-status-row { display: flex; min-height: 64px; align-items: center; gap: 12px; border-bottom: 1px solid #edf1f0; }
.device-status-row:last-child { border: 0; }
.device-monogram { display: grid; width: 36px; height: 36px; flex: none; place-items: center; color: var(--green); border: 1px solid #d9e9e3; border-radius: 10px; background: #edf7f3; font-size: 9px; font-weight: 800; }
.device-monogram.small { width: 30px; height: 30px; border-radius: 8px; font-size: 8px; }
.device-main, .device-cell > div { min-width: 0; flex: 1; }
.device-main strong, .device-main small, .device-cell strong, .device-cell small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.device-main strong, .device-cell strong { font-size: 11px; }
.device-main small, .device-cell small { color: #8a9995; font-size: 9px; }
.device-seen { margin-left: auto; text-align: right; }
.device-seen span, .device-seen small { display: block; color: #84938f; font-size: 8px; }
.device-seen small { color: var(--green); font-weight: 700; }
.status-badge { display: inline-flex; width: fit-content; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 20px; color: #647470; background: #eef2f1; font-size: 8px; font-weight: 800; white-space: nowrap; text-transform: uppercase; }
.status-badge i { width: 5px; height: 5px; border-radius: 50%; background: #93a19e; }
.status-badge.online, .status-badge.success { color: #087355; background: #e6f6ef; }.status-badge.online i, .status-badge.success i { background: #18a77b; }
.status-badge.offline, .status-badge.failed { color: #b33737; background: #fdecec; }.status-badge.offline i, .status-badge.failed i { background: #e05252; }
.status-badge.running { color: #c2410c; background: #fff1e8; }.status-badge.running i { background: #f97316; animation: pulse 1.2s infinite; }
.status-badge.partial, .status-badge.queued { color: #735f00; background: #fff9d6; }.status-badge.partial i, .status-badge.queued i { background: #eab308; }
.status-badge.disabled { color: #7d8583; background: #eff1f0; }
@keyframes pulse { 50% { opacity: .3; transform: scale(.7); } }
.schedule-mini-list { padding: 6px 19px; }
.schedule-mini { display: flex; min-height: 67px; align-items: center; gap: 12px; border-bottom: 1px solid #edf1f0; }
.schedule-mini:last-child { border: 0; }
.schedule-mini time { display: grid; width: 48px; height: 38px; place-items: center; border-radius: 9px; color: var(--green); background: #edf7f3; font: 800 11px Manrope, sans-serif; }
.schedule-mini div { min-width: 0; flex: 1; }.schedule-mini strong, .schedule-mini small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.schedule-mini strong { font-size: 10px; }.schedule-mini small { color: #8b9996; font-size: 8px; }.schedule-mini > span { color: #9baba7; }
.empty-state { padding: 50px 20px; color: #82908d; text-align: center; }.empty-state strong { color: #52635f; font: 700 14px Manrope, sans-serif; }.empty-state p { margin: 5px 0 15px; font-size: 11px; }.empty-state.small { padding: 35px 10px; }.empty-inline { padding: 25px; color: #85938f; text-align: center; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { padding: 12px 17px; color: #80908c; background: #f7f9f8; font-size: 8px; font-weight: 800; letter-spacing: .8px; text-align: left; text-transform: uppercase; white-space: nowrap; }
td { padding: 13px 17px; border-top: 1px solid #edf1f0; color: #3e514c; font-size: 10px; vertical-align: middle; }
tbody tr:hover { background: #fbfcfc; }
.source-chip, .credential-type { display: inline-flex; padding: 4px 7px; border-radius: 5px; color: #586a65; background: #edf2f0; font-size: 8px; font-weight: 700; text-transform: uppercase; }
.progress-cell { display: flex; align-items: center; gap: 8px; }.progress-cell > span { width: 75px; height: 5px; overflow: hidden; border-radius: 5px; background: #e8eeec; }.progress-cell > span i { display: block; height: 100%; border-radius: inherit; background: var(--green-2); }.progress-cell small { color: #82908d; font-size: 8px; }
.table-action { display: grid; width: 28px; height: 28px; place-items: center; color: var(--green); border: 1px solid var(--line); border-radius: 8px; background: white; }
.table-footer { display: flex; justify-content: space-between; padding: 13px 18px; color: #8b9996; border-top: 1px solid var(--line); font-size: 9px; }

.toast { position: relative; display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 12px 16px; border: 1px solid #cce7dc; border-radius: 12px; color: #275548; background: #edf9f4; box-shadow: var(--shadow); }
.toast > span { display: grid; width: 23px; height: 23px; place-items: center; border-radius: 50%; color: white; background: var(--green-2); font-size: 11px; font-weight: 800; }.toast p { margin: 0; flex: 1; font-size: 11px; }.toast button { border: 0; color: #6b827b; background: none; cursor: pointer; }.toast.error { color: #803737; border-color: #f0cccc; background: #fff0f0; }.toast.error > span { background: var(--red); }

.toolbar-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 15px; padding: 13px; border: 1px solid var(--line); border-radius: 15px; background: white; box-shadow: var(--shadow); }
.search-box { display: flex; width: min(410px, 100%); align-items: center; gap: 9px; padding: 0 13px; border: 1px solid var(--line); border-radius: 10px; background: #f9fbfa; }.search-box input { width: 100%; height: 39px; border: 0; outline: 0; background: transparent; font-size: 11px; }.search-box span { color: #8b9b97; font-size: 18px; }.toolbar-actions { display: flex; gap: 9px; }
.filter-pills { display: flex; gap: 7px; margin-bottom: 15px; overflow-x: auto; }.filter-pills a { display: flex; align-items: center; gap: 8px; padding: 8px 12px; color: #667772; border: 1px solid var(--line); border-radius: 20px; background: white; font-size: 10px; font-weight: 600; white-space: nowrap; }.filter-pills a b { display: grid; min-width: 20px; height: 19px; place-items: center; border-radius: 10px; background: #edf2f0; font-size: 8px; }.filter-pills a.active { color: white; border-color: var(--green); background: var(--green); }.filter-pills a.active b { color: var(--green); background: var(--lime); }
.device-table-panel { overflow: hidden; }.device-table { min-width: 900px; }.device-cell { display: flex; align-items: center; gap: 10px; min-width: 155px; }.cell-sub { display: block; margin-top: 3px; color: #8a9995; font-size: 8px; }.latency { display: block; margin-top: 4px; color: #84938f; font-size: 8px; }.row-actions { display: flex; gap: 5px; }.row-actions form { display: contents; }.row-actions button, .schedule-actions button { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: white; font-size: 13px; cursor: pointer; }.row-actions button:hover, .schedule-actions button:hover { color: var(--green); border-color: #a9c8bd; }.muted-row { opacity: .56; }
.device-select-cell { width: 40px; padding-right: 4px !important; text-align: center; }.device-select-cell input { width: 17px; height: 17px; margin: 0; accent-color: #f97316; cursor: pointer; vertical-align: middle; }.toolbar-actions .button.danger[disabled] { cursor: not-allowed; opacity: .48; filter: grayscale(.2); }.toolbar-actions .button.danger b { display: inline-grid; min-width: 18px; height: 18px; place-items: center; border-radius: 999px; color: #a81e24; background: rgba(255,255,255,.92); font-size: 9px; }

.modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 20px; }.modal.open { display: flex; }.modal-backdrop { position: absolute; inset: 0; background: rgba(3,18,15,.66); backdrop-filter: blur(5px); }.modal-card { position: relative; z-index: 1; width: min(720px, 100%); max-height: calc(100vh - 40px); padding: 24px; overflow-y: auto; border-radius: 20px; background: white; box-shadow: 0 25px 70px rgba(0,20,15,.28); animation: modal-in .2s ease-out; }.modal-large { width: min(800px, 100%); }.modal-medium { width: min(650px, 100%); }.modal-small { width: min(420px, 100%); text-align: center; }.modal-small p { color: var(--muted); font-size: 11px; }.modal-heading { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }.modal-heading h2, .modal-small h2 { margin: 3px 0 0; font: 800 20px Manrope, sans-serif; letter-spacing: -.4px; }.modal-heading > button { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 9px; background: #f7f9f8; font-size: 19px; cursor: pointer; }.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; padding-top: 17px; border-top: 1px solid var(--line); }.danger-symbol { display: grid; width: 48px; height: 48px; margin: 5px auto 14px; place-items: center; border-radius: 50%; color: var(--red); background: #fde9e9; font: 800 22px Manrope; }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
body.modal-open { overflow: hidden; }

label { display: block; color: #40534e; font-size: 10px; font-weight: 700; }
input, select, textarea { width: 100%; margin-top: 6px; padding: 10px 11px; color: var(--ink); border: 1px solid #d9e3e0; border-radius: 9px; outline: none; background: #fbfcfc; font-size: 11px; transition: .15s; }
input, select { height: 41px; } textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: #fb923c; box-shadow: 0 0 0 3px rgba(249,115,22,.12); background: white; }
.password-field { position: relative; display: block; margin-top: 6px; }
.password-field input { margin-top: 0; padding-right: 44px; }
.password-toggle { position: absolute; top: 5px; right: 5px; display: grid; width: 32px; height: 31px; place-items: center; padding: 0; color: #7f6b60; border: 0; border-radius: 7px; background: transparent; cursor: pointer; }
.password-toggle:hover { color: #c2410c; background: #fff3eb; }
.password-toggle i { position: relative; display: block; width: 17px; height: 11px; border: 1.7px solid currentColor; border-radius: 55% / 70%; }
.password-toggle i:before { position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; border-radius: 50%; background: currentColor; content: ""; transform: translate(-50%,-50%); }
.password-toggle i:after { position: absolute; top: 4px; left: -2px; width: 20px; height: 1.5px; border-radius: 2px; background: currentColor; content: ""; transform: rotate(-38deg); transform-origin: center; }
.password-toggle.is-visible i:after { display: none; }
label > small { display: block; margin-top: 4px; color: #91a09c; font-size: 8px; font-weight: 500; }
.form-grid { display: grid; gap: 14px; }.form-grid.two { grid-template-columns: repeat(2, 1fr); }.form-grid.four { grid-template-columns: repeat(4, 1fr); }.form-grid .span-2 { grid-column: span 2; }
.form-section-title { display: flex; align-items: center; justify-content: space-between; margin: 20px 0 10px; color: #52645f; font-size: 9px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }.form-section-title small { color: #95a29f; font-size: 8px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.check-card { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; background: #fbfcfc; cursor: pointer; }.check-card.full { margin-bottom: 12px; }.check-card input { width: 16px; height: 16px; margin: 0; accent-color: var(--green); }.check-card span { flex: 1; }.check-card strong, .check-card small { display: block; }.check-card strong { font-size: 10px; }.check-card small { margin-top: 1px; color: #879692; font-size: 8px; font-weight: 500; }.check-card:has(input:checked) { border-color: #8fc5b3; background: #f1f9f6; }
.switch-row { display: flex; align-items: center; gap: 15px; margin-top: 16px; padding: 12px 0; }.switch-row > span { flex: 1; }.switch-row strong, .switch-row small { display: block; }.switch-row small { color: #879692; font-size: 8px; font-weight: 500; }.switch-row input { position: absolute; opacity: 0; pointer-events: none; }.switch-row i { position: relative; width: 39px; height: 22px; border-radius: 20px; background: #cbd6d2; transition: .2s; }.switch-row i:after { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: white; box-shadow: 0 2px 6px rgba(0,0,0,.15); content: ""; transition: .2s; }.switch-row input:checked + i { background: var(--green-2); }.switch-row input:checked + i:after { transform: translateX(17px); }
.device-check-list { display: grid; max-height: 260px; grid-template-columns: repeat(2, 1fr); gap: 7px; padding: 9px; overflow-y: auto; border: 1px solid var(--line); border-radius: 11px; background: #f8faf9; }.device-check-list label { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid transparent; border-radius: 8px; background: white; cursor: pointer; }.device-check-list label:has(input:checked) { border-color: #8dc2b0; background: #eff9f5; }.device-check-list input { width: 14px; height: 14px; margin: 0; accent-color: var(--green); }.device-check-list label > span:nth-of-type(2) { min-width: 0; flex: 1; }.device-check-list strong, .device-check-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.device-check-list strong { font-size: 9px; }.device-check-list small { color: #8a9995; font-size: 8px; }.device-check-list .status-badge { padding: 4px 6px; }.form-note { margin: 7px 0 0; color: #8b9996; font-size: 8px; }.text-button { padding: 0; border: 0; color: var(--green); background: none; font-size: 9px; font-weight: 700; cursor: pointer; }

.settings-layout { display: grid; grid-template-columns: 235px 1fr; gap: 18px; align-items: start; }.settings-tabs { display: grid; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 15px; background: white; box-shadow: var(--shadow); }.settings-tabs a { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 9px 10px; border-radius: 10px; color: #667873; }.settings-tabs a > span { display: grid; width: 31px; height: 31px; flex: none; place-items: center; border-radius: 8px; background: #f0f4f2; font-size: 14px; }.settings-tabs strong, .settings-tabs small { display: block; }.settings-tabs strong { font-size: 10px; }.settings-tabs small { color: #98a5a2; font-size: 8px; font-weight: 500; }.settings-tabs a.active { color: white; background: var(--green); }.settings-tabs a.active > span { color: var(--lime); background: rgba(255,255,255,.1); }.settings-tabs a.active small { color: #b2cdc5; }.settings-content { min-width: 0; }.settings-panel { padding: 25px; }.settings-panel.separated { margin-top: 16px; }.settings-heading { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 23px; padding-bottom: 19px; border-bottom: 1px solid var(--line); }.settings-heading.compact { margin-bottom: 16px; }.settings-heading h2, .schedule-header h2 { margin: 3px 0 1px; font: 800 20px Manrope; letter-spacing: -.5px; }.settings-heading p, .schedule-header p { margin: 0; color: var(--muted); font-size: 10px; }.settings-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 11px; color: var(--green); background: #eaf5f1; font-size: 17px; }.settings-note { display: flex; align-items: center; gap: 11px; margin-top: 18px; padding: 12px 14px; border-radius: 10px; color: #42665b; background: #eef7f4; }.settings-note > span { display: grid; width: 23px; height: 23px; place-items: center; border-radius: 50%; color: white; background: var(--green); font-size: 10px; }.settings-note p { margin: 0; font-size: 9px; }.settings-note strong { display: block; }.form-submit { display: flex; justify-content: flex-end; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }.credential-banner { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding: 13px; border: 1px solid #d4e6df; border-radius: 11px; background: #eef8f4; }.credential-banner.warning { border-color: #f0dcba; background: #fff7e9; }.credential-banner > span { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; color: white; background: var(--green-2); font-weight: 800; }.credential-banner.warning > span { background: var(--amber); }.credential-banner strong, .credential-banner p { display: block; margin: 0; }.credential-banner strong { font-size: 10px; }.credential-banner p { color: #7c8d88; font-size: 8px; }
.template-tokens { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 11px; }.template-tokens span { color: #7d8d89; font-size: 9px; }.template-tokens code { padding: 3px 6px; border-radius: 5px; color: var(--green); background: #eaf5f1; font-size: 8px; }.path-preview { margin-top: 16px; padding: 14px 15px; border: 1px dashed #b9cdc6; border-radius: 11px; background: #fafcfb; }.path-preview span, .path-preview strong, .path-preview small { display: block; }.path-preview span { color: #94a19e; font-size: 8px; font-weight: 800; letter-spacing: 1px; }.path-preview strong { margin-top: 4px; overflow-wrap: anywhere; font: 600 10px Consolas, monospace; }.path-preview small { margin-top: 5px; color: var(--green); font: 9px Consolas, monospace; }
.schedule-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 14px; padding: 4px 2px; }.schedule-list { display: grid; gap: 10px; }.schedule-card { display: grid; grid-template-columns: 95px 1fr auto; align-items: center; padding: 16px 18px; }.schedule-card.disabled { opacity: .62; }.schedule-time { text-align: center; border-right: 1px solid var(--line); }.schedule-time strong, .schedule-time small { display: block; }.schedule-time strong { font: 800 22px Manrope; }.schedule-time small { color: var(--green); font-size: 8px; font-weight: 800; letter-spacing: 1px; }.schedule-info { min-width: 0; padding: 0 20px; }.schedule-info > div { display: flex; align-items: center; gap: 9px; }.schedule-info h3 { margin: 0; font: 800 13px Manrope; }.schedule-info p, .schedule-info > small { display: block; margin: 3px 0 0; color: #71817d; font-size: 9px; }.schedule-info > small { color: #909d9a; }.schedule-actions { display: flex; gap: 5px; }.schedule-actions form { display: contents; }.scheduler-help { display: flex; gap: 11px; margin-top: 13px; padding: 13px 15px; border: 1px solid #d8e5e0; border-radius: 12px; background: #f6faf8; }.scheduler-help > span { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; color: white; background: var(--green); font-weight: 800; }.scheduler-help strong, .scheduler-help p { display: block; margin: 0; }.scheduler-help strong { font-size: 10px; }.scheduler-help p { color: #778783; font-size: 9px; }.empty-schedule { padding: 60px 20px; text-align: center; }.empty-schedule > span { display: grid; width: 54px; height: 54px; margin: auto; place-items: center; border-radius: 16px; color: var(--green); background: #e9f5f0; font-size: 25px; }.empty-schedule h3 { margin: 14px 0 3px; font: 800 16px Manrope; }.empty-schedule p { margin: 0 0 16px; color: var(--muted); font-size: 10px; }.weekday-picker { margin-top: 14px; }.weekday-picker > span { color: #52645f; font-size: 9px; font-weight: 800; }.weekday-picker > div { display: flex; gap: 6px; margin-top: 7px; }.weekday-picker label input { position: absolute; opacity: 0; }.weekday-picker label i { display: grid; min-width: 43px; height: 33px; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: white; font-size: 9px; font-style: normal; }.weekday-picker label input:checked + i { color: white; border-color: var(--green); background: var(--green); }

.log-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 15px; }.log-summary > div { display: flex; align-items: center; gap: 11px; padding: 14px 17px; border: 1px solid var(--line); border-radius: 13px; background: white; box-shadow: var(--shadow); }.log-dot { width: 9px; height: 9px; border-radius: 50%; background: #84938f; box-shadow: 0 0 0 6px #edf1f0; }.log-dot.info { background: var(--blue); box-shadow: 0 0 0 6px #fff1e8; }.log-dot.warning { background: var(--amber); box-shadow: 0 0 0 6px #fff8d8; }.log-dot.error { background: var(--red); box-shadow: 0 0 0 6px #fdecec; }.log-summary p { margin: 0; }.log-summary strong, .log-summary small { display: block; }.log-summary strong { font: 800 17px Manrope; }.log-summary small { color: #899793; font-size: 8px; }.logs-panel { overflow: hidden; }.logs-toolbar { display: flex; justify-content: space-between; gap: 15px; padding: 13px; border-bottom: 1px solid var(--line); }.logs-toolbar form { display: flex; flex: 1; gap: 8px; }.logs-toolbar select { width: 140px; margin: 0; }.logs-toolbar .search-box { max-width: 320px; }.danger-text { color: var(--red)!important; }.log-stream { padding: 4px 18px; }.log-entry { display: flex; align-items: flex-start; gap: 12px; padding: 14px 3px; border-bottom: 1px solid #edf1f0; }.log-entry:last-child { border: 0; }.log-level-icon { display: grid; width: 28px; height: 28px; flex: none; place-items: center; border-radius: 8px; color: var(--blue); background: #fff1e8; font-size: 11px; font-weight: 800; }.log-entry.warning .log-level-icon { color: var(--amber); background: #fff8d8; }.log-entry.error .log-level-icon { color: var(--red); background: #fdecec; }.log-content { min-width: 0; flex: 1; }.log-content > div { display: flex; align-items: center; gap: 8px; }.category-chip { padding: 3px 6px; border-radius: 4px; color: var(--green); background: #fff3eb; font-size: 7px; font-weight: 800; }.log-content time { color: #95a29f; font-size: 8px; }.log-content p { margin: 5px 0 0; font-size: 10px; }.log-content details { margin-top: 6px; }.log-content summary { color: var(--green); font-size: 8px; cursor: pointer; }.log-content pre { max-height: 220px; padding: 10px; overflow: auto; border-radius: 7px; background: #f7f5f3; font-size: 8px; }.log-entry > b { margin-top: 5px; color: #93a09d; font-size: 7px; letter-spacing: .8px; }.log-entry.error > b { color: var(--red); }.log-entry.warning > b { color: var(--amber); }

.back-link { display: inline-block; margin-bottom: 13px; color: var(--green); font-size: 10px; font-weight: 700; }.job-hero { display: flex; align-items: center; gap: 15px; padding: 22px 24px; border-radius: 17px; color: white; background: linear-gradient(120deg, #0c4437, #08251f); box-shadow: var(--shadow); }.job-status-orb { display: grid; width: 47px; height: 47px; flex: none; place-items: center; border-radius: 14px; color: var(--nav); background: var(--lime); font: 800 20px Manrope; }.job-status-orb.failed { color: white; background: var(--red); }.job-status-orb.running, .job-status-orb.queued { animation: pulse 1.2s infinite; }.job-title { flex: 1; }.job-title h2 { margin: 2px 0; font: 800 21px Manrope; }.job-title p { margin: 0; color: #9bb4ad; font-size: 9px; }.job-hero > .status-badge { margin-right: 10px; }.job-progress-panel { margin-top: 15px; padding: 20px 22px; }.job-progress-heading { display: flex; justify-content: space-between; align-items: end; }.job-progress-heading strong, .job-progress-heading span { display: block; }.job-progress-heading strong { font: 800 13px Manrope; }.job-progress-heading span { color: #899793; font-size: 9px; }.job-progress-heading > b { color: var(--green); font: 800 18px Manrope; }.big-progress { height: 8px; margin: 11px 0 17px; overflow: hidden; border-radius: 10px; background: #e8eeec; }.big-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), var(--green-2)); transition: width .3s; }.job-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }.job-stats span { display: flex; align-items: center; gap: 7px; color: #82908c; font-size: 9px; }.job-stats i { width: 7px; height: 7px; border-radius: 50%; background: #98a7a3; }.job-stats i.success { background: var(--green-2); }.job-stats i.failed { background: var(--red); }.job-stats i.queued { background: var(--amber); }.job-stats strong { color: var(--ink); }.job-error { margin-top: 15px; padding: 10px 12px; color: #a13f3f; border-radius: 8px; background: #fff0f0; font-size: 9px; }.job-items-panel { margin-top: 15px; overflow: hidden; }.item-message { display: inline-block; max-width: 330px; color: #687a75; }

.about-hero { position: relative; padding: 38px; overflow: hidden; border-radius: 22px; color: white; background: radial-gradient(circle at 88% 15%, rgba(185,237,71,.18), transparent 25%), linear-gradient(125deg, #0c493a, #061b17); box-shadow: var(--shadow); }.about-brand { display: flex; align-items: center; gap: 18px; }.about-brand > div > span { color: var(--lime); font-size: 8px; font-weight: 800; letter-spacing: 1.5px; }.about-brand h2 { margin: 2px 0; font: 800 29px Manrope; letter-spacing: -.8px; }.about-brand p { margin: 0; color: #9bb5ad; font-size: 10px; }.about-intro { max-width: 680px; margin: 29px 0 28px; color: #c2d6d0; font: 600 17px/1.6 Manrope; }.about-stats { display: flex; gap: 40px; }.about-stats div { padding-left: 13px; border-left: 2px solid rgba(185,237,71,.5); }.about-stats strong, .about-stats span { display: block; }.about-stats strong { font: 800 19px Manrope; }.about-stats span { color: #88a59d; font-size: 8px; }.about-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 15px; margin-top: 15px; }.creator-card, .feature-card, .origin-card, .system-card { padding: 25px; }.creator-profile { display: flex; align-items: center; gap: 13px; margin: 17px 0; }.creator-avatar { display: grid; width: 55px; height: 55px; place-items: center; border-radius: 16px; color: var(--green); background: var(--lime-soft); font: 800 16px Manrope; }.creator-profile h2 { margin: 0; font: 800 20px Manrope; }.creator-profile p { margin: 1px 0 0; color: var(--green); font-size: 8px; font-weight: 800; letter-spacing: 1px; }.creator-bio, .origin-card > p { color: #63746f; font-size: 11px; line-height: 1.75; }.creator-card blockquote { margin: 17px 0 0; padding: 12px 15px; color: #315d50; border-left: 3px solid var(--lime); background: #f3f8f6; font: 600 10px/1.6 Manrope; }.feature-card h2, .origin-card h2 { margin: 4px 0 13px; font: 800 18px Manrope; }.feature-list { margin: 0; padding: 0; list-style: none; }.feature-list li { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }.feature-list li:last-child { border: 0; }.feature-list li > span { color: var(--green); font: 800 9px Manrope; }.feature-list strong, .feature-list p { display: block; margin: 0; }.feature-list strong { font-size: 10px; }.feature-list p { color: #81908c; font-size: 9px; }.flow-strip { display: flex; align-items: center; justify-content: space-between; margin-top: 17px; padding: 13px; border-radius: 10px; background: #f0f7f4; }.flow-strip span { color: var(--green); font-size: 8px; font-weight: 800; }.flow-strip i { color: #9cb0aa; font-style: normal; }.system-card dl { margin: 13px 0 0; }.system-card dl div { display: flex; justify-content: space-between; gap: 15px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 9px; }.system-card dl div:last-child { border: 0; }.system-card dt { color: #879692; }.system-card dd { margin: 0; font-weight: 700; }.copyright { margin: 22px 0 0; color: #8a9995; font-size: 9px; text-align: center; }

.auth-body { overflow-x: hidden; background: #071b17; }.auth-layout { display: grid; min-height: 100vh; grid-template-columns: 1.05fr .95fr; }.auth-story { position: relative; display: flex; min-height: 100vh; flex-direction: column; padding: clamp(35px, 5vw, 70px); overflow: hidden; color: white; background: radial-gradient(circle at 70% 55%, rgba(29,130,98,.28), transparent 29%), linear-gradient(140deg, #0a332a, #061713); }.auth-copy { position: relative; z-index: 2; max-width: 630px; margin: auto 0; }.auth-copy h1 { max-width: 620px; margin: 12px 0 17px; font: 800 clamp(34px, 5vw, 62px)/1.08 Manrope; letter-spacing: -2.5px; }.auth-copy p { max-width: 530px; margin: 0; color: #9db6af; font-size: 14px; line-height: 1.7; }.auth-credit { position: relative; z-index: 2; margin: 0; color: #617d75; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; }.auth-network { position: absolute; right: -50px; bottom: -60px; width: 390px; height: 390px; opacity: .42; border: 1px solid rgba(185,237,71,.1); border-radius: 50%; }.auth-network:before, .auth-network:after { position: absolute; inset: 55px; border: 1px solid rgba(185,237,71,.1); border-radius: 50%; content: ""; }.auth-network:after { inset: 120px; }.auth-network i { position: absolute; z-index: 2; width: 13px; height: 13px; border: 3px solid #163d34; border-radius: 50%; background: var(--lime); box-shadow: 0 0 20px rgba(185,237,71,.5); }.auth-network i:nth-child(1) { top: 42px; left: 194px; }.auth-network i:nth-child(2) { top: 170px; left: 25px; }.auth-network i:nth-child(3) { top: 245px; right: 40px; }.auth-network i:nth-child(4) { bottom: 54px; left: 140px; }.auth-panel { display: grid; min-height: 100vh; place-items: center; padding: 40px; background: #f3f7f5; }.auth-card { width: min(500px, 100%); padding: 38px; border: 1px solid var(--line); border-radius: 22px; background: white; box-shadow: 0 24px 60px rgba(5,38,29,.1); }.auth-card.compact { width: min(440px, 100%); }.step-pill { display: inline-flex; padding: 5px 8px; border-radius: 5px; color: var(--green); background: var(--lime-soft); font-size: 8px; font-weight: 800; letter-spacing: 1px; }.auth-card h2 { margin: 14px 0 4px; font: 800 25px Manrope; letter-spacing: -.7px; }.auth-card > p { margin: 0 0 24px; color: var(--muted); font-size: 11px; }.auth-card > label, .auth-card .two-fields { margin-top: 14px; }.two-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }.secure-note { display: block; margin-top: 13px; color: #889793; font-size: 8px; text-align: center; }.form-alert { margin-bottom: 12px; padding: 10px 12px; color: #9d3e3e; border-radius: 8px; background: #fff0f0; font-size: 9px; }

.sidebar-scrim { display: none; }
[data-frequency-field] { display: none; }
html[data-theme="dark"] { --ink: #e5efec; --muted: #91a29d; --line: #243a34; --surface: #102a24; --canvas: #0a1f1a; --shadow: 0 10px 30px rgba(0,0,0,.14); }
html[data-theme="dark"] .topbar, html[data-theme="dark"] .toolbar-card, html[data-theme="dark"] .filter-pills a, html[data-theme="dark"] .search-box, html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea, html[data-theme="dark"] .row-actions button, html[data-theme="dark"] .schedule-actions button, html[data-theme="dark"] .user-actions button, html[data-theme="dark"] .table-action, html[data-theme="dark"] .check-card, html[data-theme="dark"] .device-check-list label, html[data-theme="dark"] .modal-card, html[data-theme="dark"] .settings-tabs, html[data-theme="dark"] .log-summary > div { color: var(--ink); background: var(--surface); }
html[data-theme="dark"] th, html[data-theme="dark"] .search-box, html[data-theme="dark"] .device-check-list { background: #0d241e; }
html[data-theme="dark"] tbody tr:hover { background: #132f28; }

/* Palette: merah, oranye, putih, kuning, hijau, dan hitam */
.sidebar { background: #09090b; }
.brand-mark i { background: #f97316; }
.sidebar-status, .sidebar-user { border-color: rgba(255,255,255,.12); }
.sidebar-status .pulse { background: #16a34a; box-shadow: 0 0 0 5px rgba(22,163,74,.14); }
.active-dot { background: var(--lime); }
.avatar { color: #fff; background: #f97316; }
.hero-strip, .job-hero, .about-hero { background: radial-gradient(circle at 84% 12%, rgba(255,212,59,.24), transparent 29%), linear-gradient(125deg, #f97316, #09090b); }
.metric-card.accent-green { border-color: #f97316; background: linear-gradient(140deg, #fb923c, #f97316); }
.metric-icon, .settings-icon, .device-monogram, .schedule-mini time, .empty-schedule > span { color: #c2410c; background: #fff3eb; border-color: #ffd7bf; }
.metric-icon.online { color: #15803d; background: #eaf8ee; }
.status-badge.online, .status-badge.success { color: #137333; background: #eaf8ee; }
.status-badge.online i, .status-badge.success i { background: #16a34a; }
.metric-trend.neutral { color: #137333; background: #eaf8ee; }
.category-chip, .template-tokens code, .path-preview small { color: #c2410c; background: #fff3eb; }
.settings-note, .scheduler-help, .path-preview, .source-chip, .credential-type { color: #9a3412; border-color: #fed7aa; background: #fff8f3; }
.check-card:has(input:checked), .device-check-list label:has(input:checked) { border-color: #fdba74; background: #fff3eb; }
.weekday-picker label input:checked + i, .switch-row input:checked + i { background: #f97316; border-color: #f97316; }
.toast.success { color: #176534; border-color: #bfe6ca; background: #edf9f0; }
.toast.success > span { background: #16a34a; }
.auth-body, .auth-story { background: radial-gradient(circle at 70% 55%, rgba(249,115,22,.28), transparent 30%), linear-gradient(140deg, #9a3412, #09090b); }
.auth-network { border-color: rgba(255,212,59,.22); }
.auth-network:before, .auth-network:after { border-color: rgba(255,212,59,.2); }
.auth-network i { border-color: #f97316; background: #ffd43b; }
.creator-avatar { color: #c2410c; background: #fff3ad; }
.creator-card blockquote { color: #9a3412; border-color: #ffd43b; background: #fff8f3; }
.flow-strip { background: #fff3eb; }
.flow-strip span { color: #c2410c; }
.schedule-scope { display: flex; align-items: center; gap: 11px; margin-top: 15px; padding: 13px 14px; color: #9a3412; border: 1px solid #fed7aa; border-radius: 11px; background: #fff3eb; }
.schedule-scope > span { display: grid; width: 29px; height: 29px; flex: none; place-items: center; border-radius: 9px; color: #fff; background: #f97316; }
.schedule-scope strong, .schedule-scope p { display: block; margin: 0; }
.schedule-scope strong { font-size: 10px; }
.schedule-scope p { color: #64748b; font-size: 9px; }
.password-clear { margin-top: 10px; }
.settings-icon.warning { color: #7a6200; background: #fff8cc; }
.reset-options { display: grid; gap: 14px; }
.reset-option { display: grid; grid-template-columns: 50px minmax(0, 1fr) 220px; align-items: start; gap: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fbfcff; }
.reset-option.application { border-color: #f4c7c7; background: #fffafa; }
.reset-symbol { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 13px; color: #fff; background: #16a34a; font: 800 11px Manrope, sans-serif; }
.reset-option.application .reset-symbol { background: #e03131; font-size: 18px; }
.reset-option h3 { margin: 1px 0 4px; font: 800 14px Manrope, sans-serif; }
.reset-option p { margin: 0; color: #6f7c91; font-size: 9px; line-height: 1.6; }
.reset-option ul { display: flex; flex-wrap: wrap; gap: 5px 14px; margin: 10px 0 0; padding: 0; color: #65728a; list-style: none; font-size: 8px; }
.reset-option li:before { margin-right: 5px; color: #f97316; content: "✓"; font-weight: 800; }
.reset-option.application li:before { color: #e03131; }
.reset-option form { display: grid; gap: 9px; }
.reset-option form .button { width: 100%; }
.reset-warning { display: flex; align-items: center; gap: 11px; margin-top: 16px; padding: 13px 15px; color: #8c2222; border: 1px solid #f4c7c7; border-radius: 11px; background: #fff0f0; }
.reset-warning > span { display: grid; width: 26px; height: 26px; flex: none; place-items: center; border-radius: 50%; color: #fff; background: #e03131; font-weight: 800; }
.reset-warning p { margin: 0; font-size: 9px; }.reset-warning strong { display: block; }

.explorer-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin-bottom: 15px; }
.explorer-summary article { display: flex; align-items: center; gap: 12px; padding: 17px 19px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.explorer-stat { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 11px; font-size: 15px; font-weight: 800; }
.explorer-stat.primary { color: #fff; background: #f97316; }
.explorer-stat.green { color: #fff; background: #16a34a; }
.explorer-stat.yellow { color: #17233c; background: #ffd43b; }
.explorer-summary strong, .explorer-summary small { display: block; }
.explorer-summary strong { font: 800 18px Manrope, sans-serif; }
.explorer-summary small { color: #7b879e; font-size: 9px; }
.explorer-panel { overflow: hidden; }
.explorer-toolbar { display: flex; min-height: 66px; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 17px; border-bottom: 1px solid var(--line); }
.breadcrumbs { display: flex; min-width: 0; align-items: center; gap: 7px; overflow-x: auto; }
.breadcrumbs a { color: #c2410c; font-size: 10px; font-weight: 700; white-space: nowrap; }
.breadcrumbs a.current { color: #17233c; }
.breadcrumbs i { color: #a0abc0; font-style: normal; }
.explorer-list { padding: 5px 18px; }
.explorer-row { display: grid; min-height: 63px; grid-template-columns: 39px minmax(160px, 1fr) 160px auto; align-items: center; gap: 12px; border-bottom: 1px solid #edf1f7; }
.explorer-row:last-child { border-bottom: 0; }
.explorer-row:hover { background: #fafbff; }
.file-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; color: #fff; background: #f97316; font-size: 9px; font-weight: 800; }
.file-icon.folder { color: #17233c; background: #ffd43b; }
.file-icon.rsc { background: #16a34a; }
.file-icon.backup { background: #e03131; }
.file-icon.archive { background: #f97316; }
.explorer-row > div { min-width: 0; }
.explorer-row strong, .explorer-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.explorer-row strong { font-size: 10px; }
.explorer-row small { color: #8a96aa; font-size: 8px; }
.file-meta { color: #7d899e; font-size: 9px; text-align: right; }
.file-action { color: #f97316; font-size: 16px; }
.explorer-empty > span { display: grid; width: 50px; height: 50px; margin: 0 auto 12px; place-items: center; border-radius: 14px; color: #c2410c; background: #fff3eb; font-size: 22px; }

.auth-card > .button { margin-top: 18px; }

/* Halaman login dan setup dibuat ringkas, tanpa panel narasi samping. */
.auth-layout-single { display: block !important; min-height: 100vh; background: #f3f7f5 !important; }
.auth-layout-single .auth-story { display: none !important; }
.auth-panel-single { min-height: 100vh; padding: 46px 24px; background: transparent; }
.auth-single-stack, .setup-stack { justify-items: center; }
.auth-single-stack { display: grid; width: min(440px, 100%); gap: 17px; }
.setup-stack { width: min(650px, 100%); }
.auth-card .auth-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin: -2px 0 22px; color: #1d1713; text-decoration: none; font: 800 19px Manrope, sans-serif; letter-spacing: -.5px; }
.auth-card .step-pill { display: flex; width: max-content; margin-right: auto; margin-left: auto; }
.auth-card h2, .auth-card > p:not(.auth-copyright) { text-align: center; }
.auth-brand b { margin-left: 2px; color: #f97316; font-size: 10px; letter-spacing: 1px; }
.auth-brand .brand-mark { width: 38px; height: 38px; }
.auth-brand .brand-mark i { background: #fff; }
.auth-copyright { margin: 18px 0 -4px; color: #967b6b; font: 500 9px/1.4 "DM Sans", sans-serif; letter-spacing: .4px; text-align: center; }
.auth-copyright strong { font-weight: 800; }
html[data-theme="dark"] .auth-layout-single { background: radial-gradient(circle at 12% 8%, rgba(249,115,22,.17), transparent 26%), #0d0907; }
html[data-theme="dark"] .auth-card .auth-brand { color: #fffaf5; }
html[data-theme="dark"] .auth-copyright { color: #aa958a; }

/* Cegah scrollbar horizontal pada formulir perangkat. */
.modal-card { overflow-x: hidden; }
.modal-card form, .modal-card .form-grid, .modal-card label { min-width: 0; }
.import-description { margin: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.65; }

html[data-theme="dark"] { --ink: #fffaf5; --muted: #c5b4a9; --line: #4a2d1d; --surface: #20140e; --canvas: #0d0907; --shadow: 0 10px 30px rgba(0,0,0,.2); }
html[data-theme="dark"] .topbar, html[data-theme="dark"] .toolbar-card, html[data-theme="dark"] .filter-pills a, html[data-theme="dark"] .search-box, html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea, html[data-theme="dark"] .row-actions button, html[data-theme="dark"] .schedule-actions button, html[data-theme="dark"] .user-actions button, html[data-theme="dark"] .table-action, html[data-theme="dark"] .check-card, html[data-theme="dark"] .device-check-list label, html[data-theme="dark"] .modal-card, html[data-theme="dark"] .settings-tabs, html[data-theme="dark"] .log-summary > div, html[data-theme="dark"] .explorer-summary article { background: #20140e; }
html[data-theme="dark"] th, html[data-theme="dark"] .search-box, html[data-theme="dark"] .device-check-list { background: #160d09; }
html[data-theme="dark"] tbody tr:hover, html[data-theme="dark"] .explorer-row:hover { background: #32190d; }

@media (max-width: 1180px) {
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .form-grid.four { grid-template-columns: repeat(2, 1fr); }
  .about-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); transition: transform .22s ease; }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open .sidebar-scrim { position: fixed; inset: 0; z-index: 30; display: block; background: rgba(0,20,15,.55); }
  .main-content { margin-left: 0; }
  .menu-toggle { display: grid; }
  .dashboard-grid { grid-template-columns: 1fr; }.dashboard-grid .span-2, .dashboard-grid .span-3 { grid-column: auto; }
  .settings-layout { grid-template-columns: 1fr; }.settings-tabs { grid-template-columns: repeat(4, minmax(140px, 1fr)); overflow-x: auto; }.settings-tabs a { min-width: 165px; }
  .auth-layout { grid-template-columns: 1fr; }.auth-story { min-height: 390px; }.auth-copy { margin: auto 0 40px; }.auth-copy h1 { font-size: 38px; }.auth-panel { min-height: auto; padding: 45px 20px; }
}
@media (max-width: 650px) {
  .topbar { min-height: 77px; padding: 15px 16px; }.page-heading p, .date-chip { display: none; }.page-body { padding: 18px 14px 35px; }.app-footer { padding: 14px 16px; }.app-footer span:last-child { display: none; }
  .hero-strip { align-items: flex-start; flex-direction: column; padding: 22px; }.metrics-grid { grid-template-columns: 1fr; }.metric-card { min-height: 112px; }
  .device-status-row { flex-wrap: wrap; padding: 10px 0; }.device-seen { display: none; }.device-status-row .status-badge { margin-left: auto; }
  .system-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 13px; }.system-metrics article { padding: 11px; }
  .toolbar-card { align-items: stretch; flex-direction: column; }.toolbar-actions { display: grid; grid-template-columns: 1fr 1fr; }.toolbar-actions .button { padding: 0 10px; }
  .modal { padding: 0; }.modal-card { width: 100%; max-height: 94vh; margin-top: auto; border-radius: 20px 20px 0 0; }.form-grid.two, .form-grid.four, .choice-grid, .device-check-list { grid-template-columns: 1fr; }.form-grid .span-2 { grid-column: auto; }
  .settings-panel { padding: 18px; }.settings-heading p { max-width: 220px; }.schedule-header { align-items: flex-start; flex-direction: column; }.schedule-card { grid-template-columns: 70px 1fr; }.schedule-info { padding-right: 0; }.schedule-actions { grid-column: span 2; justify-content: flex-end; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line); }
  .reset-option { grid-template-columns: 42px 1fr; }.reset-option form { grid-column: span 2; }
  .logs-toolbar, .logs-toolbar form { align-items: stretch; flex-direction: column; }.logs-toolbar select, .logs-toolbar .search-box { width: 100%; max-width: none; }.log-summary { grid-template-columns: repeat(2, 1fr); }.log-entry > b { display: none; }
  .job-hero { flex-wrap: wrap; }.job-title { min-width: calc(100% - 65px); }.job-hero > .button { width: 100%; }.job-stats { grid-template-columns: repeat(2, 1fr); }
  .about-hero { padding: 25px; }.about-intro { font-size: 14px; }.about-stats { gap: 16px; }.flow-strip { align-items: flex-start; flex-direction: column; gap: 7px; }.flow-strip i { transform: rotate(90deg); }
  .explorer-summary { grid-template-columns: 1fr; }.explorer-toolbar { align-items: stretch; flex-direction: column; }.explorer-row { grid-template-columns: 38px minmax(130px, 1fr) auto; }.file-meta { display: none; }.explorer-row > .button { padding: 0 10px; }
  .auth-story { min-height: 350px; padding: 30px 24px; }.auth-copy h1 { font-size: 31px; letter-spacing: -1.4px; }.auth-copy p { font-size: 11px; }.auth-card { padding: 25px 20px; }.two-fields { grid-template-columns: 1fr; }
}

/* Visual refresh: warm control-room palette */
:root {
  --canvas: #f4f1ec;
  --line: #e7e1d9;
  --shadow: 0 14px 38px rgba(35, 24, 18, .07);
}
.sidebar { border-right: 1px solid #26211e; background: radial-gradient(circle at 15% 0, #2a160c 0, #0d0d0f 28%, #09090b 68%); }
.main-nav a { color: #aaa39e; }
.main-nav a:hover { color: white; background: rgba(249,115,22,.09); }
.main-nav a.active { color: white; background: linear-gradient(100deg, #f97316, #e94f16); box-shadow: 0 10px 24px rgba(249,115,22,.22); }
.main-nav a.active .nav-icon { color: #ffd43b; }
.main-nav a.active .active-dot { background: #ffd43b; box-shadow: 0 0 0 5px rgba(255,212,59,.17); }
.sidebar-status .pulse { background: #18a957; box-shadow: 0 0 0 5px rgba(24,169,87,.12); }
.avatar { color: #09090b; background: #ffd43b; }
.topbar { border-color: #eee8e1; background: rgba(255,255,255,.92); }
.date-chip, .icon-button, .menu-toggle { border-color: #e9e2da; background: #fffdfa; }
.dashboard-refresh { display: grid; min-width: 106px; gap: 5px; padding: 7px 10px; border: 1px solid #f0dfcf; border-radius: 10px; color: #8b4b27; background: #fffaf5; font: 700 9px "DM Sans", sans-serif; letter-spacing: .2px; }
.dashboard-refresh span { white-space: nowrap; }.dashboard-refresh b { color: #f15a24; font: 800 11px Manrope, sans-serif; }
.dashboard-refresh i { display: block; height: 3px; overflow: hidden; border-radius: 99px; background: #f5e8dd; }.dashboard-refresh em { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffd43b, #ff6a18); transition: width 1s linear; }

.dashboard-hero { position: relative; min-height: 266px; padding: 36px 38px; border: 0; border-radius: 26px; background: radial-gradient(circle at 73% -15%, rgba(249,115,22,.68), transparent 36%), radial-gradient(circle at 100% 100%, rgba(224,49,49,.28), transparent 34%), #101012; box-shadow: 0 24px 55px rgba(26,18,14,.18); isolation: isolate; }
.dashboard-hero:before { position: absolute; top: -130px; right: 23%; width: 340px; height: 340px; border: 1px solid rgba(255,212,59,.16); border-radius: 50%; box-shadow: 0 0 0 55px rgba(255,212,59,.035), 0 0 0 110px rgba(249,115,22,.035); content: ""; }
.dashboard-hero:after { position: absolute; inset: 0 auto 0 0; width: 7px; background: linear-gradient(#ffd43b 0 33%, #f97316 33% 70%, #e03131 70%); content: ""; }
.dashboard-hero > * { position: relative; z-index: 1; }
.dashboard-hero-copy { min-width: 0; max-width: 650px; }
.hero-label { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; color: #fff4e8; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(255,255,255,.07); font-size: 9px; font-weight: 800; letter-spacing: 1.25px; text-transform: uppercase; }
.hero-label i { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.12); }
.dashboard-hero h2 { max-width: 620px; margin: 18px 0 12px; font: 800 clamp(34px, 4.2vw, 58px)/.98 Manrope, sans-serif; letter-spacing: -2.5px; }
.dashboard-hero h2 em { color: #ffd43b; font-style: normal; }
.dashboard-hero-copy > p { color: #bbb4ae; font-size: 12px; }
.dashboard-hero-copy > p b { padding: 0 6px; color: #f97316; }
.dashboard-hero-control { display: grid; width: min(330px, 32vw); flex: none; gap: 11px; }
.hero-success-rate { padding: 17px 18px; border: 1px solid rgba(255,255,255,.12); border-radius: 17px; background: rgba(7,7,8,.5); backdrop-filter: blur(10px); }
.hero-success-rate > span { display: flex; align-items: center; gap: 7px; color: #aaa29c; font-size: 8px; font-weight: 800; letter-spacing: 1.1px; }
.hero-success-rate > span i { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; }
.hero-success-rate strong { display: block; margin-top: 2px; color: white; font: 800 32px/1.15 Manrope, sans-serif; }
.hero-success-rate strong small { color: #ffd43b; font-size: 15px; }
.hero-success-rate p { margin: 0 0 9px; color: #8f8883; font-size: 8px; }
.hero-success-rate > div { height: 5px; overflow: hidden; border-radius: 8px; background: rgba(255,255,255,.1); }
.hero-success-rate > div i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #22c55e, #ffd43b); }
.hero-backup-button { min-height: 67px; justify-content: flex-start; padding: 0 15px; color: white; border-radius: 17px; background: linear-gradient(120deg, #f97316, #e85413); box-shadow: 0 12px 28px rgba(249,115,22,.27); }
.hero-backup-button:hover { box-shadow: 0 16px 30px rgba(249,115,22,.34); }
.hero-backup-button > span { display: grid; width: 38px; height: 38px; flex: none; place-items: center; color: #111; border-radius: 11px; background: #ffd43b; font-size: 22px; }
.hero-backup-button > b, .hero-backup-button > i { display: block; text-align: left; }
.hero-backup-button > b { font-size: 11px; }
.hero-backup-button > i { margin-left: auto; color: #ffd6bc; font-size: 8px; font-style: normal; font-weight: 500; }

.metrics-grid { gap: 17px; margin: 20px 0; }
.dashboard-metric { min-height: 150px; padding: 22px; border: 0; border-radius: 21px; box-shadow: 0 14px 35px rgba(31,23,18,.08); transition: transform .2s ease, box-shadow .2s ease; }
.dashboard-metric:hover { transform: translateY(-3px); box-shadow: 0 20px 42px rgba(31,23,18,.12); }
.dashboard-metric .metric-icon { width: 42px; height: 42px; border-radius: 13px; }
.dashboard-metric div:nth-child(2) > span { font-size: 9px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.dashboard-metric div:nth-child(2) > strong { margin-top: 6px; font-size: 30px; }
.dashboard-metric .metric-trend { right: 18px; bottom: 18px; padding: 5px 8px; letter-spacing: .7px; }
.metric-devices { color: white; background: linear-gradient(145deg, #ff8127, #ed5d12); }
.metric-devices .metric-icon { color: #111; background: #ffd43b; }
.metric-devices div:nth-child(2) > span, .metric-devices div:nth-child(2) > small { color: #ffe2cf; }
.metric-devices .metric-trend { color: #111; background: #ffd43b; }
.metric-health { background: #fff; }
.metric-health:after { position: absolute; inset: auto 0 0; height: 5px; background: #18a957; content: ""; }
.metric-health .metric-icon.online { color: #087a3a; background: #e2f7e9; }
.metric-health .metric-trend.neutral { color: #087a3a; background: #e2f7e9; }
.metric-storage { color: #17120c; background: linear-gradient(145deg, #ffe369, #ffd43b); }
.metric-storage .metric-icon.archive { color: white; background: #111114; }
.metric-storage div:nth-child(2) > span, .metric-storage div:nth-child(2) > small { color: #665412; }
.metric-storage .metric-trend.neutral { color: white; background: #111114; }
.metric-last { color: white; background: linear-gradient(145deg, #242326, #101012); }
.metric-last .metric-icon.clock { color: white; background: #e03131; }
.metric-last div:nth-child(2) > span, .metric-last div:nth-child(2) > small { color: #aaa3a0; }
.metric-last .metric-trend.neutral { color: #ffd43b; background: rgba(255,212,59,.12); }
.metric-last > .status-badge { color: #111; background: #ffd43b; }

.dashboard-grid { gap: 19px; }
.dashboard-grid > .panel { overflow: hidden; border: 0; border-radius: 22px; box-shadow: 0 14px 38px rgba(31,23,18,.07); }
.dashboard-grid .panel-heading { min-height: 78px; padding: 18px 23px; border-color: #eee9e3; background: linear-gradient(90deg, #fff, #fffdf9); }
.dashboard-grid .panel-heading h3 { font-size: 17px; }
.dashboard-grid .panel-kicker { color: #e85d13; }
.dashboard-grid .panel-heading > a { padding: 7px 10px; color: #b8460c; border-radius: 9px; background: #fff1e8; }
.dashboard-grid .device-status-row { min-height: 70px; border-color: #f0ebe6; transition: background .16s ease, transform .16s ease; }
.dashboard-grid .device-status-row:hover { margin: 0 -10px; padding: 0 10px; border-radius: 12px; background: #fff7f0; transform: translateX(2px); }
.dashboard-grid .device-monogram { color: #111; border: 0; background: #ffd43b; }
.dashboard-grid .device-seen small { color: #e85d13; }
.dashboard-grid .schedule-mini time { color: #111; background: #ffd43b; }
.dashboard-grid .schedule-mini > span { color: #f97316; }
.dashboard-grid tbody tr:hover { background: #fff7f0; }
.dashboard-grid .progress-cell > span i { background: linear-gradient(90deg, #f97316, #ffd43b); }
.dashboard-grid .table-action { color: white; background: #f97316; }
.single-reset { grid-template-columns: 58px minmax(0, 1fr) 240px; padding: 22px; }

html[data-theme="dark"] .metric-health { color: #fff; background: #20140e; }
html[data-theme="dark"] .metric-health div:nth-child(2) > span, html[data-theme="dark"] .metric-health div:nth-child(2) > small { color: #baa99f; }
html[data-theme="dark"] .dashboard-grid .panel-heading { background: #20140e; }

@media (max-width: 1180px) {
  .dashboard-hero { min-height: 250px; }
  .dashboard-hero-control { width: min(300px, 34vw); }
  .hero-backup-button > i { display: none; }
}
@media (max-width: 900px) {
  .dashboard-hero { padding: 30px; }
  .dashboard-hero h2 { font-size: 42px; }
  .dashboard-hero-control { width: 290px; }
  .single-reset { grid-template-columns: 50px 1fr; }.single-reset form { grid-column: span 2; }
}
@media (max-width: 650px) {
  .dashboard-hero { min-height: auto; padding: 26px 23px 24px 29px; }
  .dashboard-hero h2 { margin-top: 15px; font-size: 34px; letter-spacing: -1.7px; }
  .dashboard-hero-control { width: 100%; }
  .hero-success-rate { display: none; }
  .hero-backup-button { width: 100%; }
  .dashboard-metric { min-height: 128px; }
  .single-reset { padding: 17px; }
}

/* Readability and account management */
body { font-size: 15px; }
.page-heading h1 { font-size: clamp(24px, 2.3vw, 30px); }
.page-heading p { font-size: 13px; }
.panel-kicker, .eyebrow { font-size: 10px; }
.button { min-height: 44px; font-size: 13px; }
label { font-size: 12px; }
input, select, textarea { min-height: 44px; font-size: 13px; }
label > small { font-size: 10px; line-height: 1.45; }
th { padding: 14px 17px; font-size: 10px; }
td { padding: 15px 17px; font-size: 12px; }
.source-chip, .credential-type, .status-badge { font-size: 9px; }
.table-footer, .cell-sub, .latency { font-size: 10px; }
.toast p { font-size: 13px; }
.search-box input { font-size: 13px; }
.filter-pills a { font-size: 12px; }
.panel-heading h3 { font-size: 18px; }
.panel-heading > a { font-size: 12px; }
.device-main strong, .device-cell strong { font-size: 13px; }
.device-main small, .device-cell small { font-size: 11px; }
.device-seen span, .device-seen small { font-size: 10px; }
.schedule-mini strong { font-size: 12px; }
.schedule-mini small { font-size: 10px; }
.empty-state strong { font-size: 16px; }.empty-state p { font-size: 13px; }
.settings-tabs strong { font-size: 12px; }.settings-tabs small { font-size: 10px; line-height: 1.35; }
.settings-heading h2, .schedule-header h2 { font-size: 23px; }
.settings-heading p, .schedule-header p { font-size: 12px; }
.settings-note p, .credential-banner p, .path-preview strong, .path-preview small { font-size: 11px; }
.check-card strong, .switch-row strong { font-size: 12px; }
.check-card small, .switch-row small, .form-note, .form-section-title small { font-size: 10px; }
.form-section-title { font-size: 11px; }
.device-check-list strong { font-size: 11px; }.device-check-list small { font-size: 10px; }
.schedule-info h3 { font-size: 15px; }.schedule-info p, .schedule-info > small { font-size: 11px; }
.scheduler-help strong { font-size: 12px; }.scheduler-help p { font-size: 11px; }
.log-summary small { font-size: 10px; }
.log-content time, .log-content summary { font-size: 10px; }.log-content p { font-size: 12px; }.category-chip, .log-entry > b { font-size: 9px; }
.job-title p, .job-progress-heading span, .job-stats span, .item-message { font-size: 11px; }
.modal-small p { font-size: 13px; }.modal-heading h2, .modal-small h2 { font-size: 22px; }
.reset-option h3 { font-size: 17px; }.reset-option p { font-size: 11px; }.reset-option ul { font-size: 10px; }.reset-warning p { font-size: 11px; }

.user-count { padding: 6px 9px; color: #9a3412; border-radius: 999px; background: #fff1e8; font-size: 11px; font-weight: 800; }
.user-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.user-list > div { display: flex; min-width: 0; align-items: center; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: #fffdf9; }
.user-list > div > span { display: grid; width: 39px; height: 39px; flex: none; place-items: center; color: #111; border-radius: 11px; background: #ffd43b; font-size: 11px; font-weight: 800; }
.user-list p { min-width: 0; margin: 0; }
.user-list strong, .user-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-list strong { font-size: 13px; }.user-list small { color: var(--muted); font-size: 10px; }
.user-list p { flex: 1; }
.user-actions { display: flex; flex: none; align-items: center; gap: 6px; }
.user-actions form { display: contents; }
.user-actions button { display: grid; width: 34px; height: 34px; flex: none; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: white; font-size: 13px; cursor: pointer; }
.user-actions button:hover { color: var(--green); border-color: #a9c8bd; }
.user-actions form button { color: #e03131; border-color: #f2c7c7; background: #fff3f3; font-size: 18px; }
.user-actions form button:hover { color: white; border-color: #e03131; background: #e03131; }
.current-user-badge { padding: 5px 8px; color: #087a3a; border-radius: 999px; background: #e2f7e9; font-size: 9px; text-transform: uppercase; }
#change-password-modal .modal-heading p { margin: 6px 0 0; color: var(--muted); font-size: 12px; }

.explorer-row { grid-template-columns: 39px minmax(160px, 1fr) 90px 150px auto; }
.explorer-name-link { min-width: 0; }
.file-size { color: #6f7d91; font-size: 11px; font-weight: 700; text-align: right; white-space: nowrap; }
.explorer-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.explorer-actions form { display: contents; }
.explorer-actions form button { display: grid; width: 34px; height: 34px; place-items: center; padding: 0; color: #e03131; border: 1px solid #f2c7c7; border-radius: 9px; background: #fff3f3; font-size: 18px; cursor: pointer; }
.explorer-actions form button:hover { color: white; border-color: #e03131; background: #e03131; }
.explorer-actions .file-action { width: 34px; height: 34px; border-radius: 9px; background: #fff1e8; text-align: center; line-height: 34px; }

.about-hero { padding: 46px; border: 0; border-radius: 26px; background: radial-gradient(circle at 88% 0, rgba(249,115,22,.7), transparent 32%), radial-gradient(circle at 100% 100%, rgba(224,49,49,.26), transparent 30%), #101012; box-shadow: 0 24px 55px rgba(26,18,14,.16); }
.about-brand > div > span { font-size: 10px; }.about-brand h2 { font-size: 38px; }.about-brand p { color: #c7bbb4; font-size: 12px; }
.about-intro { max-width: 760px; color: #f0e9e4; font-size: 19px; }
.about-stats { gap: 14px; }.about-stats div { min-width: 145px; padding: 12px 15px; border: 1px solid rgba(255,255,255,.12); border-left: 4px solid #ffd43b; border-radius: 12px; background: rgba(255,255,255,.06); }
.about-stats strong { font-size: 23px; }.about-stats span { color: #c2b8b2; font-size: 10px; }
.about-grid > .panel { border: 0; border-radius: 20px; box-shadow: 0 14px 38px rgba(31,23,18,.07); }
.creator-profile p { font-size: 10px; }.creator-bio, .origin-card > p { font-size: 13px; }.creator-card blockquote { font-size: 12px; }
.feature-list strong { font-size: 12px; }.feature-list p { font-size: 11px; }.feature-list li > span { font-size: 10px; }
.flow-strip span, .system-card dl div, .copyright { font-size: 11px; }

html[data-theme="dark"] .user-list > div { background: #160d09; }

@media (max-width: 900px) {
  .settings-tabs { grid-template-columns: repeat(5, minmax(165px, 1fr)); }
  .user-list { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
  body { font-size: 14px; }
  .topbar { position: sticky; top: 0; z-index: 25; min-height: 72px; }
  .page-heading h1 { font-size: 22px; }
  .page-body { padding: 16px 13px 32px; }
  .settings-tabs { display: flex; margin: 0 -13px; padding: 8px 13px; border-right: 0; border-left: 0; border-radius: 0; box-shadow: none; }
  .settings-tabs a { min-width: 175px; }
  .settings-panel { padding: 19px 16px; }
  .settings-heading h2, .schedule-header h2 { font-size: 20px; }
  .settings-heading p { max-width: none; font-size: 11px; }
  .settings-icon { width: 36px; height: 36px; }
  .form-submit .button { width: 100%; }
  .modal-card { padding: 20px 16px; }
  .modal-actions { display: grid; grid-template-columns: 1fr 1fr; }.modal-actions .button { width: 100%; }
  .table-footer { align-items: flex-start; flex-direction: column; gap: 4px; }
  .about-hero { padding: 28px 22px; }
  .about-brand { align-items: flex-start; }.about-brand .brand-mark.large { width: 54px; height: 54px; }
  .about-brand h2 { font-size: 29px; }.about-intro { margin: 23px 0; font-size: 16px; }
  .about-stats { display: grid; grid-template-columns: 1fr; }.about-stats div { min-width: 0; }
  .creator-card, .feature-card, .origin-card, .system-card { padding: 20px 17px; }
  .single-reset { grid-template-columns: 42px 1fr; }.single-reset form { grid-column: span 2; }
  .reset-option p { font-size: 11px; }.reset-option ul { display: grid; }
  .user-list > div { padding: 11px; }
  .explorer-row { grid-template-columns: 38px minmax(120px, 1fr) auto; }
  .explorer-row .file-size, .explorer-row .file-meta { display: none; }
  .explorer-actions { gap: 5px; }
  .explorer-actions .button { width: 38px; padding: 0; overflow: hidden; font-size: 0; }
  .explorer-actions .button:before { font-size: 16px; content: "↓"; }
  .parent-folder .file-action { grid-column: 3; }
}

/* Quick setup runtime check */
.setup-panel { align-content: center; overflow-y: auto; }
.setup-stack { display: grid; width: min(650px, 100%); gap: 14px; padding: 30px 0; }
.setup-card { width: 100%; }
.runtime-card { padding: 23px; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 18px 45px rgba(31,23,18,.08); }
.runtime-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.runtime-heading h2 { margin: 3px 0 2px; font: 800 21px Manrope, sans-serif; }
.runtime-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.runtime-state { padding: 6px 9px; border-radius: 999px; font-size: 9px; font-weight: 800; white-space: nowrap; }
.runtime-state.ready { color: #087a3a; background: #e2f7e9; }.runtime-state.warning { color: #9a3412; background: #fff0e5; }
.runtime-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.runtime-item { display: flex; min-width: 0; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 11px; background: #fffdf9; }
.runtime-item > span { display: grid; width: 24px; height: 24px; flex: none; place-items: center; border-radius: 8px; font-size: 11px; font-weight: 800; }
.runtime-item.ok > span { color: #087a3a; background: #e2f7e9; }.runtime-item.missing > span { color: #fff; background: #e03131; }
.runtime-item p { min-width: 0; margin: 0; }.runtime-item strong, .runtime-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.runtime-item strong { font-size: 11px; }.runtime-item small { color: var(--muted); font-size: 9px; }
.runtime-install { margin-top: 13px; padding: 12px; border: 1px solid #fed7aa; border-radius: 12px; background: #fff7ed; }
.runtime-install p { margin: 0 0 9px; color: #7c4424; font-size: 10px; }.runtime-install p strong { display: block; color: #9a3412; font-size: 11px; }
.runtime-install code { display: block; padding: 10px; overflow-x: auto; color: #fff; border-radius: 8px; background: #171719; font-size: 10px; white-space: nowrap; }
.runtime-install form { display: flex; justify-content: flex-end; }
.preflight-body { display: grid; padding: 24px; place-items: center; background: #f4f1ec; }
.preflight-card { width: min(620px, 100%); padding: 34px; border-radius: 24px; background: #fff; box-shadow: 0 24px 60px rgba(31,23,18,.12); }
.preflight-card > .brand-mark { margin-bottom: 22px; }.preflight-card h1 { margin: 4px 0; font: 800 32px Manrope, sans-serif; }.preflight-card > p { color: var(--muted); }
.preflight-card ul { display: grid; gap: 8px; margin: 20px 0; padding: 0; list-style: none; }.preflight-card li { display: flex; align-items: center; gap: 9px; padding: 10px; border-radius: 10px; background: #fff3f3; }.preflight-card li span { display: grid; width: 24px; height: 24px; place-items: center; color: white; border-radius: 50%; background: #e03131; font-weight: 800; }
.preflight-card > code { display: block; padding: 13px; overflow-x: auto; color: #fff; border-radius: 10px; background: #171719; font-size: 11px; white-space: nowrap; }

/* Strongly separated light and dark themes */
html:not([data-theme="dark"]) .dashboard-hero { color: #17120c; background: radial-gradient(circle at 72% -10%, rgba(255,212,59,.95), transparent 36%), radial-gradient(circle at 100% 100%, rgba(249,115,22,.34), transparent 38%), linear-gradient(135deg, #fffaf2, #ffe2c8); box-shadow: 0 24px 55px rgba(154,52,18,.13); }
html:not([data-theme="dark"]) .dashboard-hero:before { border-color: rgba(154,52,18,.12); box-shadow: 0 0 0 55px rgba(249,115,22,.045), 0 0 0 110px rgba(255,212,59,.06); }
html:not([data-theme="dark"]) .hero-label { color: #7c2d12; border-color: rgba(154,52,18,.15); background: rgba(255,255,255,.55); }
html:not([data-theme="dark"]) .dashboard-hero-copy > p { color: #6b4b38; }
html:not([data-theme="dark"]) .hero-success-rate { border-color: rgba(124,45,18,.12); background: rgba(255,255,255,.72); }
html:not([data-theme="dark"]) .hero-success-rate > span, html:not([data-theme="dark"]) .hero-success-rate p { color: #7a5b47; }
html:not([data-theme="dark"]) .hero-success-rate strong { color: #17120c; }
html:not([data-theme="dark"]) .hero-success-rate > div { background: rgba(124,45,18,.11); }
html:not([data-theme="dark"]) .about-hero { color: #17120c; background: radial-gradient(circle at 88% 0, rgba(255,212,59,.92), transparent 32%), radial-gradient(circle at 100% 100%, rgba(249,115,22,.28), transparent 32%), linear-gradient(135deg, #fffaf2, #ffe4ca); }
html:not([data-theme="dark"]) .about-brand p, html:not([data-theme="dark"]) .about-intro { color: #5f4434; }
html:not([data-theme="dark"]) .about-stats div { border-color: rgba(124,45,18,.12); border-left-color: #f97316; background: rgba(255,255,255,.55); }
html:not([data-theme="dark"]) .about-stats span { color: #725442; }
html:not([data-theme="dark"]) .job-hero { color: #21150d; border: 1px solid #fed7aa; background: radial-gradient(circle at 84% 18%, rgba(255,212,59,.8), transparent 26%), radial-gradient(circle at 100% 100%, rgba(249,115,22,.2), transparent 35%), linear-gradient(135deg, #fffaf3, #ffead7); box-shadow: 0 18px 42px rgba(154,52,18,.11); }
html:not([data-theme="dark"]) .job-status-orb { color: white; background: #f97316; box-shadow: 0 10px 22px rgba(249,115,22,.24); }
html:not([data-theme="dark"]) .job-status-orb.failed { background: #e03131; }
html:not([data-theme="dark"]) .job-title .panel-kicker { color: #c2410c; }
html:not([data-theme="dark"]) .job-title p { color: #795743; }
html:not([data-theme="dark"]) .job-hero > .status-badge { color: #5e4700; background: #fff3ad; }
html:not([data-theme="dark"]) .job-hero > .button.lime { color: white; background: #171719; }
html:not([data-theme="dark"]) .sidebar { color: #4c4540; border-right: 1px solid #e9e2da; background: linear-gradient(180deg, #fffdf9, #f7f1ea); }
html:not([data-theme="dark"]) .brand { color: #211c19; } html:not([data-theme="dark"]) .brand b { color: #e85d13; }
html:not([data-theme="dark"]) .brand-mark { background: #f97316; }.brand-mark i { background: #fffaf5; }
html:not([data-theme="dark"]) .nav-kicker { color: #9a8578; }
html:not([data-theme="dark"]) .main-nav a { color: #665d57; }
html:not([data-theme="dark"]) .main-nav a:hover { color: #9a3412; background: #fff1e8; }
html:not([data-theme="dark"]) .main-nav a.active { color: #9a3412; background: #fff0e6; box-shadow: inset 0 0 0 1px #fed7aa; }
html:not([data-theme="dark"]) .main-nav a.active .nav-icon { color: #f97316; }
html:not([data-theme="dark"]) .nav-icon { color: #87786d; }
html:not([data-theme="dark"]) .main-nav a.active .active-dot { background: #e03131; box-shadow: 0 0 0 5px rgba(224,49,49,.1); }
html:not([data-theme="dark"]) .sidebar-status { border-color: #e9e2da; }.sidebar-status strong { color: #423a35; }.sidebar-status small { color: #988b82; }
html:not([data-theme="dark"]) .sidebar-user strong { color: #2c2622; }.sidebar-user small, html:not([data-theme="dark"]) .sidebar-user button { color: #96887e; }
html:not([data-theme="dark"]) .avatar { color: #fff; background: #f97316; }

html[data-theme="dark"] { color-scheme: dark; --ink: #fafafa; --muted: #aaa3a0; --line: #343033; --surface: #181719; --canvas: #09090b; --shadow: 0 16px 40px rgba(0,0,0,.28); }
html[data-theme="dark"] body { color: var(--ink); background: #09090b; }
html[data-theme="dark"] .topbar { border-color: #2b292b; background: rgba(15,15,17,.94); }
html[data-theme="dark"] .sidebar { color: #d8e7e2; border-right-color: #26211e; background: radial-gradient(circle at 15% 0, #2a160c 0, #0d0d0f 28%, #09090b 68%); }
html[data-theme="dark"] .date-chip, html[data-theme="dark"] .icon-button, html[data-theme="dark"] .menu-toggle { color: #e9e4e1; border-color: #373336; background: #1b1a1c; }
html[data-theme="dark"] .dashboard-refresh { border-color: #4a352a; color: #ffd7b8; background: #21150f; }.dashboard-refresh i { background: #4a2d1d; }
html[data-theme="dark"] .panel, html[data-theme="dark"] .toolbar-card, html[data-theme="dark"] .settings-tabs, html[data-theme="dark"] .settings-panel, html[data-theme="dark"] .runtime-card { color: var(--ink); border-color: #343033; background: #181719; }
html[data-theme="dark"] .dashboard-hero { color: white; background: radial-gradient(circle at 73% -15%, rgba(249,115,22,.65), transparent 36%), radial-gradient(circle at 100% 100%, rgba(224,49,49,.28), transparent 34%), #101012; box-shadow: 0 24px 55px rgba(0,0,0,.38); }
html[data-theme="dark"] .hero-label { color: #fff4e8; border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.07); }
html[data-theme="dark"] .dashboard-hero-copy > p { color: #bbb4ae; }
html[data-theme="dark"] .hero-success-rate { border-color: rgba(255,255,255,.12); background: rgba(7,7,8,.5); }
html[data-theme="dark"] .hero-success-rate strong { color: white; }
html[data-theme="dark"] .dashboard-grid > .panel, html[data-theme="dark"] .about-grid > .panel { background: #181719; box-shadow: 0 18px 42px rgba(0,0,0,.28); }
html[data-theme="dark"] .dashboard-grid .panel-heading { border-color: #302d30; background: linear-gradient(90deg, #1d1b1d, #181719); }
html[data-theme="dark"] .dashboard-grid .device-status-row { border-color: #302d30; }
html[data-theme="dark"] .dashboard-grid .device-status-row:hover, html[data-theme="dark"] tbody tr:hover, html[data-theme="dark"] .explorer-row:hover { background: #2a1a12; }
html[data-theme="dark"] .metric-devices, html[data-theme="dark"] .metric-health, html[data-theme="dark"] .metric-storage, html[data-theme="dark"] .metric-last { color: white; border: 1px solid #343033; background: #181719; }
html[data-theme="dark"] .metric-devices { border-top: 5px solid #f97316; }.metric-devices .metric-icon { color: #111; background: #ffd43b; }
html[data-theme="dark"] .metric-health { border-top: 5px solid #18a957; }.metric-health:after { display: none; }
html[data-theme="dark"] .metric-storage { border-top: 5px solid #ffd43b; }.metric-storage .metric-icon.archive { color: #111; background: #ffd43b; }
html[data-theme="dark"] .metric-last { border-top: 5px solid #e03131; }
html[data-theme="dark"] .metric-devices div:nth-child(2) > span, html[data-theme="dark"] .metric-devices div:nth-child(2) > small, html[data-theme="dark"] .metric-storage div:nth-child(2) > span, html[data-theme="dark"] .metric-storage div:nth-child(2) > small { color: #aaa3a0; }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea, html[data-theme="dark"] .search-box { color: #fafafa; border-color: #393538; background: #111113; }
html[data-theme="dark"] th { color: #a9a2a0; background: #111113; } html[data-theme="dark"] td { color: #e8e3e0; border-color: #302d30; }
html[data-theme="dark"] .about-hero { color: white; background: radial-gradient(circle at 88% 0, rgba(249,115,22,.68), transparent 32%), radial-gradient(circle at 100% 100%, rgba(224,49,49,.26), transparent 30%), #101012; }
html[data-theme="dark"] .job-hero { color: white; background: radial-gradient(circle at 84% 12%, rgba(249,115,22,.42), transparent 29%), linear-gradient(125deg, #20130e, #101012); }
html[data-theme="dark"] .about-brand p { color: #c7bbb4; } html[data-theme="dark"] .about-intro { color: #f0e9e4; }
html[data-theme="dark"] .about-stats div { border-color: rgba(255,255,255,.12); border-left-color: #ffd43b; background: rgba(255,255,255,.06); }
html[data-theme="dark"] .about-stats span { color: #c2b8b2; }
html[data-theme="dark"] .runtime-item, html[data-theme="dark"] .user-list > div { border-color: #343033; background: #111113; }
html[data-theme="dark"] .system-metrics article { border-color: #343033; background: #111113; } html[data-theme="dark"] .system-metrics strong { color: #fafafa; } html[data-theme="dark"] .system-metrics span, html[data-theme="dark"] .system-metrics small { color: #aaa3a0; }

@media (max-width: 650px) {
  .setup-stack { padding: 16px 0; }
  .runtime-card { padding: 18px 15px; }
  .runtime-heading { align-items: flex-start; flex-direction: column; }
  .runtime-grid { grid-template-columns: 1fr; }
  .preflight-card { padding: 25px 18px; }
}