@font-face { font-family: "Sarabun"; src: url("/assets/fonts/Sarabun-300.ttf") format("truetype"); font-style: normal; font-weight: 300; font-display: swap; }
@font-face { font-family: "Sarabun"; src: url("/assets/fonts/Sarabun-400.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Sarabun"; src: url("/assets/fonts/Sarabun-500.ttf") format("truetype"); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: "Sarabun"; src: url("/assets/fonts/Sarabun-600.ttf") format("truetype"); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: "Sarabun"; src: url("/assets/fonts/Sarabun-700.ttf") format("truetype"); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: "Sarabun"; src: url("/assets/fonts/Sarabun-800.ttf") format("truetype"); font-style: normal; font-weight: 800; font-display: swap; }

:root {
    --navy: #072e5f;
    --navy-2: #0b447f;
    --blue: #087ef5;
    --blue-soft: #eaf4ff;
    --teal: #07cbb5;
    --green: #0f9f70;
    --red: #d13a4c;
    --amber: #c87908;
    --ink: #14233b;
    --muted: #65748b;
    --line: #dde5ef;
    --surface: #ffffff;
    --canvas: #f7f7ff;
    --orange: #ff7a18;
    --coral: #ff3d54;
    --violet: #7557ff;
    --shadow: 0 22px 60px rgba(12, 34, 68, .10);
}

* { box-sizing: border-box; }
html { font-family: "Sarabun"; color: var(--ink); background: var(--canvas); }
body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at 2% 2%, rgba(255, 132, 35, .15), transparent 25rem),
        radial-gradient(circle at 98% 16%, rgba(236, 72, 153, .13), transparent 26rem),
        radial-gradient(circle at 84% 82%, rgba(36, 187, 255, .12), transparent 30rem),
        radial-gradient(circle at 10% 76%, rgba(61, 214, 160, .10), transparent 24rem),
        var(--canvas);
}
button, input, select, textarea, code { font: inherit; }
a { color: inherit; }

.login-page {
    display: grid;
    place-items: center;
    padding: 28px;
    background:
        radial-gradient(circle at 12% 10%, rgba(8, 126, 245, .13), transparent 32%),
        radial-gradient(circle at 88% 90%, rgba(7, 203, 181, .12), transparent 30%),
        var(--canvas);
}

.login-card {
    width: min(460px, 100%);
    padding: 34px;
    border: 1px solid rgba(221, 229, 239, .9);
    border-radius: 28px;
    background: rgba(255, 255, 255, .96);
    box-shadow: var(--shadow);
}

.login-logo { display: block; width: 230px; max-height: 142px; object-fit: contain; margin: 0 auto 18px; }
.eyebrow { color: var(--blue); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
h1 { margin: 7px 0 8px; color: var(--navy); font-size: clamp(27px, 4vw, 38px); line-height: 1.15; }
h2 { margin: 0; color: var(--navy); font-size: 19px; }
.muted, .panel-head p { color: var(--muted); }
.login-card .muted { margin: 0 0 24px; line-height: 1.6; }
label { display: grid; gap: 8px; margin: 16px 0; color: #40506a; font-size: 16px; font-weight: 700; }
input {
    width: 100%;
    padding: 14px 14px;
    border: 1px solid #cfd9e7;
    border-radius: 11px;
    background: #fff;
    color: var(--ink);
    font-size: 19px;
    line-height: 1.3;
    outline: none;
}
input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(8, 126, 245, .12); }
input[readonly] { background: #f2f5f9; color: #66758c; }

.password-field {
    position: relative;
}

.password-field .password-toggle {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 40px;
    height: 34px;
    z-index: 2;
    border: 0;
    border-radius: 9px;
    border: 1px solid transparent;
    background: transparent;
    color: #61758e;
    font-size: 18px;
    cursor: pointer;
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.password-field input {
    padding-right: 50px;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: 11px;
    text-decoration: none;
    font-weight: 750;
    cursor: pointer;
}
.button-primary { background: linear-gradient(135deg, var(--blue), #096bd3); color: #fff; box-shadow: 0 8px 20px rgba(8, 126, 245, .22); }
.button-secondary { border-color: #c9d7e8; background: #fff; color: var(--navy); }
.button-block { width: 100%; margin-top: 9px; }
.login-download { margin-top: 12px; }
.download-note { margin: 8px 4px 0; color: var(--muted); font-size: 12px; line-height: 1.5; text-align: center; }
.security-note { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.5; }

.alert { margin: 16px 0; padding: 13px 15px; border-radius: 12px; font-size: 14px; }
.alert-danger { border: 1px solid #f2c6cc; background: #fff1f3; color: #9c2333; }
.alert-success { border: 1px solid #b8ead9; background: #eefbf7; color: #087452; }
.alert-code { display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid #b9d9fb; background: var(--blue-soft); }
.alert-code span { color: var(--muted); font-size: 12px; }
.alert-code code { padding: 10px 14px; border-radius: 9px; background: var(--navy); color: #fff; font-size: 16px; letter-spacing: .08em; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 68px;
    padding: 8px max(24px, calc((100vw - 1240px) / 2));
    border-bottom: 1px solid rgba(221, 229, 239, .9);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(18px);
}
.brand { display: flex; align-items: center; gap: 15px; color: var(--navy); font-weight: 800; }
.brand img { width: 105px; height: 50px; object-fit: contain; }
.brand span { padding-left: 15px; border-left: 1px solid var(--line); }
.top-actions { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 13px; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(7, 203, 181, .13); }
.text-link { margin-left: 18px; color: var(--navy); font-weight: 700; text-decoration: none; }

.container { width: min(1240px, calc(100% - 36px)); margin: 0 auto; padding: 38px 0 70px; }
.hero-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 25px; margin-bottom: 28px; }
.hero-row p { margin: 8px 0 0; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-actions form { margin: 0; }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 18px; }
.stat-card, .panel { border: 1px solid var(--line); background: var(--surface); box-shadow: 0 6px 24px rgba(18, 52, 92, .05); }
.stat-card { display: grid; gap: 6px; min-height: 132px; padding: 20px; border-radius: 17px; }
.stat-card span { color: var(--muted); font-size: 13px; font-weight: 650; }
.stat-card strong { color: var(--navy); font-size: 30px; line-height: 1; }
.stat-card small { color: #8290a4; }

.panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.panel { padding: 22px; border-radius: 18px; margin-bottom: 18px; }
.panel-grid .panel { margin-bottom: 0; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.panel-head p { margin: 5px 0 0; font-size: 13px; }
.pill { flex: 0 0 auto; padding: 6px 10px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-size: 12px; font-weight: 800; }
.pill-green { background: #e8faf4; color: var(--green); }
.progress { height: 12px; overflow: hidden; border-radius: 99px; background: #e8eef6; }
.progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--teal)); }
.storage-labels { display: flex; justify-content: space-between; margin: 9px 0 17px; color: var(--muted); font-size: 12px; }
.inline-form { display: flex; align-items: flex-end; gap: 11px; margin-top: 18px; }
.inline-form label { flex: 1; margin: 0; }
.inline-form input { max-width: 190px; }
.schedule-list { display: grid; gap: 1px; overflow: hidden; margin: 6px 0 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--line); }
.schedule-list div { display: flex; justify-content: space-between; padding: 11px 13px; background: #fff; font-size: 13px; }
.schedule-list span { color: var(--muted); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { padding: 11px 10px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; text-align: left; text-transform: uppercase; letter-spacing: .05em; }
td { padding: 15px 10px; border-bottom: 1px solid #edf1f6; color: #34445d; font-size: 13px; vertical-align: middle; }
td small { display: block; max-width: 150px; margin-top: 4px; overflow: hidden; color: #8996a9; text-overflow: ellipsis; }
tr:last-child td { border-bottom: 0; }
.empty { padding: 38px 15px; color: var(--muted); text-align: center; }
.device-status { display: inline-block; padding: 5px 8px; border-radius: 8px; font-size: 11px; font-weight: 800; }
.status-active { background: #e8faf4; color: var(--green); }
.status-paused { background: #fff6e7; color: var(--amber); }
.status-suspended, .status-revoked { background: #fff0f2; color: var(--red); }
.status-online { background: #e8faf4; color: var(--green); }
.status-offline { background: #fff0f2; color: var(--red); }
.status-auto_approved, .status-confirmed { background: #fff6e7; color: var(--amber); }
.status-restored { background: #e8faf4; color: var(--green); }
.action-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; }
.device-mode-select { min-width: 128px; padding: 6px 28px 6px 9px; border: 1px solid #cad6e5; border-radius: 8px; background: #fff; color: var(--navy); font-size: 12px; font-weight: 700; cursor: pointer; }
.device-mode-select:focus { border-color: #7b61ff; outline: 3px solid rgba(123, 97, 255, .12); }
.mini-button { padding: 6px 9px; border: 1px solid #cad6e5; border-radius: 8px; background: #fff; color: var(--navy); font-size: 11px; font-weight: 750; cursor: pointer; }
.mini-button.success { border-color: #64d7b3; background: linear-gradient(135deg, #effff9, #e4fff5); color: #008b68; box-shadow: 0 5px 14px rgba(0, 174, 132, .12); }
.mini-button.success:hover { border-color: #20bc90; background: #dffbef; transform: translateY(-1px); }
.unlock-button::before { content: "✓"; margin-right: 4px; font-weight: 900; }
.mini-button.warning { border-color: #efd3a8; color: #9c5b00; }
.mini-button.danger { border-color: #efc2c8; color: var(--red); }
.mini-button:disabled { opacity: .48; cursor: not-allowed; transform: none; box-shadow: none; }
.update-button { border-color: #ffb169; background: linear-gradient(135deg, #fff6ec, #fff0df); color: #b85100; white-space: nowrap; }
.device-update { display: grid; gap: 5px; min-width: 136px; }
.device-update-status { color: var(--muted); font-weight: 650; }
.device-update-status.status-downloading,
.device-update-status.status-verifying,
.device-update-status.status-applying,
.device-update-status.status-queued { color: #b85100; }
.device-update-status.status-completed { color: #008b68; }
.device-update-status.status-failed { color: var(--red); }
.device-update-status.status-offline { color: #66768c; background: transparent; }
.device-update-status.status-attention,
.device-update-status.status-waiting_idle { color: #a45e00; background: transparent; }
.device-update-detail { max-width: 240px; color: var(--muted); line-height: 1.35; }
.update-health-warning { color: #a45e00 !important; }
.status-unknown { background: #edf1f6; color: #66768c; }
.client-update-policy { display: grid; grid-template-columns: minmax(190px, 1fr) repeat(2, minmax(210px, 1.25fr)) auto; gap: 10px; align-items: center; margin: 0 0 14px; padding: 12px; border: 1px solid #e6d9cd; border-radius: 14px; background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,244,232,.78)); }
.client-update-policy > div { display: grid; gap: 2px; }
.client-update-policy small { display: block; color: var(--muted); }
.policy-choice { display: flex; align-items: flex-start; gap: 8px; min-height: 58px; padding: 9px 10px; border: 1px solid #ead7c5; border-radius: 11px; background: rgba(255,255,255,.82); cursor: pointer; }
.policy-choice input { margin-top: 4px; accent-color: #ff6a2a; }
.policy-choice span { display: grid; gap: 2px; }
@media (max-width: 1100px) { .client-update-policy { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .client-update-policy { grid-template-columns: 1fr; } }
.empty-block { padding: 32px 10px; border: 1px dashed #ced9e7; border-radius: 12px; color: var(--muted); text-align: center; }
.event-list, .incident-list { display: grid; gap: 9px; }
.event { display: flex; gap: 11px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid #edf1f6; }
.event:last-child { border-bottom: 0; }
.event-icon { flex: 0 0 auto; width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
.event strong, .event small { display: block; }
.event strong { font-size: 13px; }
.event small { margin-top: 4px; color: #8a97a9; font-size: 11px; }
.incident { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px; border: 1px solid #f1c6cc; border-radius: 12px; background: #fff7f8; }
.incident strong, .incident span { display: block; }
.incident span { margin-top: 3px; color: var(--muted); font-size: 11px; }
.recovery-stats { grid-template-columns: repeat(5, 1fr); }
.recovery-list { display: grid; gap: 12px; }
.recovery-item { display: grid; grid-template-columns: 240px 1fr auto; align-items: center; gap: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; }
.recovery-meta { display: grid; justify-items: start; gap: 5px; }
.recovery-meta span:not(.device-status), .recovery-meta small { color: var(--muted); font-size: 11px; }
.recovery-paths { display: grid; gap: 4px; min-width: 0; }
.recovery-paths code { overflow: hidden; color: #40516a; font-family: "Sarabun"; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.recovery-paths span { color: var(--muted); font-size: 11px; }
.sync-file-list { display: grid; gap: 8px; margin-top: 12px; }
.sync-file-item { position: relative; display: block; padding: 12px 42px 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.sync-file-item + .sync-file-item { border-color: #e4edf7; }
.sync-file-item strong { display: block; color: var(--navy); line-height: 1.3; font-size: 15px; }
.sync-file-item small { color: var(--muted); font-size: 12px; }
.sync-file-item .file-status { position: absolute; right: 10px; top: 10px; width: 28px; height: 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; }
.file-status-uploading {
    background: rgba(8, 126, 245, 0.14);
    color: transparent;
    font-size: 0;
}
.file-status-uploading::before {
    content: "";
    width: 16px;
    height: 16px;
    border: 2px solid rgba(8, 126, 245, .35);
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: mini-spin 1s linear infinite;
}
.file-status-synced { background: var(--green); color: #fff; }
.file-status-failed { background: var(--red); color: #fff; }

/* Modern administration dashboard */
.topbar {
    min-height: 78px;
    border-bottom-color: rgba(220, 227, 237, .75);
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 10px 34px rgba(22, 42, 72, .05);
}
.brand img { width: 128px; height: 58px; }
.brand span { font-size: 15px; letter-spacing: .01em; }
.container { width: min(1320px, calc(100% - 44px)); padding-top: 30px; }
.panel {
    border-color: rgba(218, 225, 235, .82);
    box-shadow: 0 16px 44px rgba(18, 40, 72, .065);
}
.dashboard-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    min-height: 286px;
    align-items: flex-end;
    justify-content: space-between;
    gap: 34px;
    overflow: hidden;
    margin-bottom: 20px;
    padding: 42px 46px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 30px;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, .12), transparent 44%),
        linear-gradient(125deg, #0758bc 0%, #265bd0 30%, #7149d8 62%, #d946a5 87%, #ff713d 118%);
    box-shadow: 0 26px 64px rgba(62, 66, 181, .27);
}
.dashboard-hero::after {
    position: absolute;
    z-index: -1;
    right: 24%;
    bottom: -70%;
    width: 480px;
    height: 480px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
    content: "";
}
.hero-orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(1px); }
.hero-orb-one { top: -90px; right: -50px; width: 290px; height: 290px; background: radial-gradient(circle at 30% 30%, rgba(255, 221, 73, .96), rgba(255, 77, 115, .40) 48%, transparent 72%); }
.hero-orb-two { right: 240px; bottom: -155px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(70, 224, 255, .48), transparent 70%); }
.hero-copy { max-width: 720px; }
.hero-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; color: #e2f5ff; font-size: 13px; font-weight: 600; letter-spacing: .05em; }
.hero-kicker span { width: 28px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--orange), var(--coral)); }
.dashboard-hero h1 { margin: 0; color: #fff; font-size: clamp(38px, 5vw, 62px); font-weight: 700; line-height: 1.03; letter-spacing: -.035em; }
.dashboard-hero h1 em { color: #ffe15c; font-style: normal; text-shadow: 0 8px 28px rgba(255, 184, 0, .22); }
.dashboard-hero p { margin: 16px 0 0; color: rgba(232, 241, 255, .76); font-size: 16px; line-height: 1.65; }
.hero-actions-luxury { position: relative; z-index: 1; flex: 0 0 auto; }
.hero-actions-luxury .button { min-height: 47px; border-radius: 14px; font-size: 14px; }
.hero-actions-luxury .button-secondary { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .09); color: #fff; backdrop-filter: blur(8px); }
.hero-actions-luxury .button-primary { background: linear-gradient(135deg, var(--orange), var(--coral)); box-shadow: 0 13px 30px rgba(255, 70, 74, .26); }
.connection-panel { position: relative; overflow: hidden; padding: 23px 26px; border-radius: 20px; background: linear-gradient(115deg, #ffffff 0%, #fff8ef 52%, #f1f6ff 100%); }
.connection-panel::before { position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: linear-gradient(var(--orange), var(--coral)); content: ""; }
.overview-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr); gap: 18px; margin-bottom: 18px; }
.storage-overview { min-height: 430px; margin: 0; padding: 28px; border-color: rgba(255, 174, 135, .42); border-radius: 24px; background: linear-gradient(145deg, #fff 0%, #fff8f2 53%, #f6f2ff 100%); box-shadow: 0 18px 48px rgba(255, 99, 65, .10); }
.luxury-head { margin-bottom: 12px; }
.section-kicker { display: block; margin-bottom: 4px; color: #8795aa; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.luxury-head h2, .health-card h3 { color: #0b2e5d; }
.live-badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid #c9efe4; border-radius: 999px; background: #f0fbf7; color: #087657; font-size: 11px; font-weight: 700; }
.live-badge i { width: 7px; height: 7px; border-radius: 50%; background: #0fc18a; box-shadow: 0 0 0 4px rgba(15, 193, 138, .12); }
.storage-visual { display: grid; grid-template-columns: 250px 1fr; align-items: center; gap: 28px; padding: 12px 4px 17px; }
.donut, .mini-donut { position: relative; display: grid; flex: 0 0 auto; place-items: center; border-radius: 50%; }
.donut::before, .mini-donut::before { position: absolute; border-radius: inherit; background: #fff; content: ""; }
.donut-large {
    width: 228px;
    height: 228px;
    background: conic-gradient(from -90deg, var(--orange) 0%, var(--coral) var(--p), #edf1f6 var(--p) 100%);
    box-shadow: 0 16px 35px rgba(255, 72, 65, .14);
}
.donut-large::before { inset: 25px; box-shadow: inset 0 0 0 1px rgba(223, 229, 238, .7); }
.donut-core { position: relative; z-index: 1; display: grid; place-items: center; }
.donut-core strong { color: #0b2d5b; font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -.04em; }
.donut-core span { margin-top: 7px; color: var(--muted); font-size: 13px; }
.storage-breakdown { display: grid; gap: 13px; }
.storage-breakdown > div { position: relative; display: grid; grid-template-columns: 13px 1fr auto; align-items: center; gap: 9px; padding: 11px 0; border-bottom: 1px solid #edf1f6; }
.storage-breakdown > div:last-child { border-bottom: 0; }
.storage-breakdown p { margin: 0; color: var(--muted); font-size: 13px; }
.storage-breakdown strong { color: #143661; font-size: 17px; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; }
.legend-used { background: linear-gradient(135deg, var(--orange), var(--coral)); box-shadow: 0 0 0 4px rgba(255, 91, 54, .11); }
.legend-free { background: #d9e1ec; box-shadow: 0 0 0 4px rgba(217, 225, 236, .34); }
.storage-breakdown .storage-total { grid-template-columns: 1fr auto; padding-top: 13px; }
.health-grid { display: grid; gap: 14px; }
.health-card { display: flex; min-height: 134px; align-items: center; gap: 18px; margin: 0; padding: 20px; border-radius: 22px; }
.health-devices { border-color: rgba(70, 155, 255, .28); background: linear-gradient(120deg, #f7fbff, #edf5ff 55%, #f0f9ff); box-shadow: 0 15px 38px rgba(28, 132, 243, .10); }
.health-shield { border-color: rgba(26, 201, 147, .28); background: linear-gradient(120deg, #f7fffb, #eafbf5 58%, #effff6); box-shadow: 0 15px 38px rgba(19, 185, 132, .10); }
.health-backup { border-color: rgba(154, 103, 255, .28); background: linear-gradient(120deg, #fbf9ff, #f3edff 54%, #fff0fa); box-shadow: 0 15px 38px rgba(126, 74, 236, .11); }
.health-card::after { align-self: stretch; width: 1px; background: linear-gradient(transparent, rgba(213, 221, 232, .8), transparent); content: ""; order: -1; }
.health-card h3 { margin: 1px 0 3px; font-size: 18px; line-height: 1.15; }
.health-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.mini-donut { order: -2; width: 88px; height: 88px; background: conic-gradient(from -90deg, #1688ff 0%, #1dc6e8 var(--p), #edf1f6 var(--p) 100%); }
.mini-donut::before { inset: 10px; }
.mini-donut strong, .mini-donut span { position: relative; z-index: 1; grid-area: 1 / 1; }
.mini-donut strong { align-self: center; margin-top: -10px; color: #0b315f; font-size: 23px; line-height: 1; }
.mini-donut span { align-self: center; margin-top: 27px; color: #8190a4; font-size: 10px; }
.mini-donut.ring-green { background: conic-gradient(from -90deg, #0fc18a 0%, #44d6b1 var(--p), #edf1f6 var(--p) 100%); }
.mini-donut.ring-violet { background: conic-gradient(from -90deg, #7557ff 0%, #b26cff var(--p), #edf1f6 var(--p) 100%); }
.luxury-backup { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(420px, 1.3fr); gap: 30px; align-items: center; padding: 25px 28px; border-color: rgba(78, 184, 255, .25); border-radius: 22px; background: linear-gradient(105deg, #f4fbff 0%, #fff 42%, #fff8ef 72%, #fff2fa 100%); box-shadow: 0 18px 45px rgba(47, 134, 230, .09); }
.luxury-backup .panel-head { margin: 0; }
.backup-content { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; }
.backup-content .schedule-list { grid-template-columns: repeat(3, 1fr); margin: 0; border-radius: 15px; }
.backup-content .schedule-list div { display: grid; gap: 4px; align-content: center; min-height: 72px; }
.backup-content .schedule-list strong { color: #0c3568; }
.table-wrap { border: 1px solid #e7ecf3; border-radius: 15px; }
.table-wrap table { min-width: 1080px; }
thead { background: linear-gradient(90deg, #f1f7ff, #f8f4ff, #fff5f7); }
tbody tr { transition: background .18s ease; }
tbody tr:hover { background: #fbfcfe; }
th:first-child, td:first-child { padding-left: 16px; }
th:last-child, td:last-child { padding-right: 16px; }
.mini-button, .button { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.mini-button:hover, .button:hover { transform: translateY(-1px); }
.event-icon { background: linear-gradient(135deg, var(--orange), var(--coral)); box-shadow: 0 0 0 4px rgba(255, 86, 62, .10); }

.deletion-control-panel { overflow: hidden; border-color: rgba(28, 191, 151, .24); background: linear-gradient(115deg, #fff 0%, #f1fff9 58%, #f3f6ff 100%); }
.deletion-mode-form { display: grid; grid-template-columns: 1fr 1fr auto; align-items: stretch; gap: 12px; }
.mode-choice { position: relative; display: flex; align-items: center; gap: 13px; margin: 0; padding: 16px; border: 1px solid #d9e3ee; border-radius: 16px; background: rgba(255, 255, 255, .86); cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.mode-choice:hover { transform: translateY(-1px); border-color: #9ecbd2; }
.mode-choice.is-selected, .mode-choice:has(input:checked) { border-color: #24b995; box-shadow: 0 10px 30px rgba(24, 174, 138, .13); }
.mode-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.mode-check { display: grid; flex: 0 0 auto; width: 27px; height: 27px; place-items: center; border: 2px solid #c9d6e3; border-radius: 50%; color: transparent; font-weight: 900; }
.mode-choice input:checked + .mode-check { border-color: #17b88d; background: linear-gradient(135deg, #12c997, #17a9d4); color: #fff; box-shadow: 0 0 0 5px rgba(18, 201, 151, .10); }
.mode-choice strong, .mode-choice small { display: block; }
.mode-choice strong { color: #12365e; font-size: 15px; }
.mode-choice small { margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.backup-action-stack { display: flex; gap: 8px; flex-wrap: wrap; }

.backup-recovery-hero { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-bottom: 20px; padding: 34px 40px; overflow: hidden; border-radius: 28px; color: #fff; background: linear-gradient(125deg, #0c5ac4, #624dd9 58%, #e249a2 105%); box-shadow: 0 24px 58px rgba(63, 72, 184, .24); }
.backup-recovery-hero h1 { margin: 5px 0 9px; color: #fff; font-size: clamp(32px, 4vw, 50px); line-height: 1.05; }
.backup-recovery-hero p { max-width: 760px; margin: 0; color: rgba(239, 245, 255, .82); }
.backup-recovery-hero .eyebrow { color: #ffdf65; }
.retention-orb { display: grid; flex: 0 0 auto; width: 132px; height: 132px; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; background: rgba(255,255,255,.10); box-shadow: inset 0 0 0 11px rgba(255,255,255,.05), 0 18px 38px rgba(22,27,91,.18); backdrop-filter: blur(12px); }
.retention-orb strong, .retention-orb span { grid-area: 1 / 1; }
.retention-orb strong { margin-top: -23px; font-size: 44px; line-height: 1; }
.retention-orb span { margin-top: 45px; font-size: 12px; }
.backup-picker { display: grid; grid-template-columns: minmax(200px, .8fr) minmax(240px, 1fr) auto; align-items: end; gap: 12px; }
.backup-picker label, .backup-search-form label { margin: 0; }
.backup-picker input, .backup-picker select { width: 100%; }
.backup-search-form { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px; margin-bottom: 15px; }
.backup-search-form input { width: 100%; }
.backup-selection-bar { position: sticky; top: 88px; z-index: 3; display: flex; align-items: center; gap: 16px; margin-bottom: 10px; padding: 11px 13px; border: 1px solid #dce6f1; border-radius: 14px; background: rgba(255,255,255,.94); box-shadow: 0 8px 24px rgba(23,54,93,.07); backdrop-filter: blur(12px); }
.backup-selection-bar label { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--navy); font-weight: 750; }
.backup-selection-bar label input, .backup-file-row input { width: 18px; height: 18px; margin: 0; accent-color: #197bdc; }
.backup-selection-bar span { flex: 1; color: var(--muted); font-size: 12px; }
.backup-file-list { overflow: hidden; border: 1px solid #e4eaf2; border-radius: 15px; }
.backup-file-row { display: grid; grid-template-columns: 22px 34px minmax(0, 1fr) auto; align-items: center; gap: 11px; margin: 0; padding: 11px 14px; border-bottom: 1px solid #edf1f6; background: #fff; cursor: pointer; }
.backup-file-row:last-child { border-bottom: 0; }
.backup-file-row:hover { background: #f8fbff; }
.backup-file-icon { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; background: linear-gradient(135deg, #e7f3ff, #f0ebff); color: #3970ca; font-size: 17px; }
.backup-file-name { min-width: 0; }
.backup-file-name strong, .backup-file-name small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.backup-file-name strong { color: #12345c; font-size: 14px; }
.backup-file-name small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.backup-file-size { color: #63748a; font-size: 12px; white-space: nowrap; }
.restore-job-list { display: grid; gap: 10px; }
.restore-job { display: grid; grid-template-columns: minmax(230px, .9fr) minmax(170px, 1fr) minmax(180px, auto); align-items: center; gap: 18px; padding: 14px; border: 1px solid #e2e9f1; border-radius: 15px; background: linear-gradient(110deg, #fff, #f8fbff); }
.restore-job > div:first-child { display: grid; justify-items: start; gap: 5px; }
.restore-job strong { color: #14385f; }
.restore-job small { color: var(--muted); font-size: 11px; }
.restore-progress { height: 9px; overflow: hidden; border-radius: 999px; background: #e8eef6; }
.restore-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #147fe0, #20c89d); transition: width .3s ease; }
.restore-action { display: flex; justify-content: flex-end; }
.restore-action form { margin: 0; }
.restore-working { display: inline-flex; align-items: center; gap: 8px; color: #2470bb; font-weight: 750; }
.restore-working i { width: 16px; height: 16px; border: 2px solid #bfd9f2; border-top-color: #187dcc; border-radius: 50%; animation: mini-spin .9s linear infinite; }
.restore-error { max-width: 290px; color: var(--red); font-size: 12px; }
.status-protected { background: #fff0e5; color: #b85a00; }
.status-unrestricted { background: #eef4fa; color: #526a84; }
.status-queued, .status-running { background: #eaf5ff; color: #176bb8; }
.status-ready { background: #e7faf3; color: #087b58; }
.status-downloaded { background: #f0edff; color: #6650bb; }
.status-failed { background: #fff0f2; color: var(--red); }

@media (max-width: 940px) {
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .panel-grid { grid-template-columns: 1fr; }
    .dashboard-hero { align-items: flex-start; flex-direction: column; }
    .overview-grid { grid-template-columns: 1fr; }
    .health-grid { grid-template-columns: repeat(3, 1fr); }
    .health-card { align-items: flex-start; flex-direction: column; }
    .health-card::after { display: none; }
    .luxury-backup { grid-template-columns: 1fr; }
    .deletion-mode-form { grid-template-columns: 1fr 1fr; }
    .deletion-mode-form .button { grid-column: 1 / -1; }
    .restore-job { grid-template-columns: 1fr; }
    .restore-action { justify-content: flex-start; }
}

@media (max-width: 640px) {
    .container { width: min(100% - 22px, 1240px); padding-top: 25px; }
    .topbar { padding: 7px 12px; }
    .brand span, .top-actions > span:not(.status-dot) { display: none; }
    .hero-row { align-items: stretch; flex-direction: column; }
    .hero-actions, .hero-actions a, .hero-actions form, .hero-actions button { width: 100%; }
    .stat-grid { grid-template-columns: 1fr; }
    .panel { padding: 16px; }
    .inline-form, .alert-code, .incident { align-items: stretch; flex-direction: column; }
    .recovery-item { grid-template-columns: 1fr; }
    .dashboard-hero { min-height: 0; padding: 30px 24px; border-radius: 22px; }
    .dashboard-hero h1 { font-size: 38px; }
    .dashboard-hero p { font-size: 14px; }
    .hero-actions-luxury, .hero-actions-luxury a, .hero-actions-luxury form, .hero-actions-luxury button { width: 100%; }
    .connection-panel { padding: 20px; }
    .storage-overview { padding: 21px 17px; }
    .storage-visual { grid-template-columns: 1fr; justify-items: center; }
    .storage-breakdown { width: 100%; }
    .health-grid { grid-template-columns: 1fr; }
    .health-card { align-items: center; flex-direction: row; }
    .luxury-backup { padding: 21px 17px; }
    .backup-content { grid-template-columns: 1fr; }
    .backup-content .schedule-list { grid-template-columns: 1fr; }
    .table-wrap table { min-width: 760px; }
    .deletion-mode-form, .backup-picker, .backup-search-form { grid-template-columns: 1fr; }
    .backup-recovery-hero { align-items: flex-start; flex-direction: column; padding: 28px 24px; }
    .retention-orb { width: 110px; height: 110px; }
    .backup-selection-bar { top: 74px; align-items: stretch; flex-direction: column; }
    .backup-selection-bar .button { width: 100%; }
    .backup-file-row { grid-template-columns: 20px 30px minmax(0, 1fr); padding: 11px 10px; }
    .backup-file-size { grid-column: 3; }
}

@keyframes mini-spin { to { transform: rotate(360deg); } }