/* MacroDroid Remote Control — shared dark theme.
   Aligned with the template store redesign (warmer palette, layered
   surfaces, Space Grotesk display titles, Inter body, JetBrains Mono
   data). Tokens below are consumed by this file and by templates.css,
   which scopes its own (--tpl-*) variants for any local overrides. */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Surfaces */
    --bg: #111319;
    --bg-card: #1c1f27;
    --bg-input: #141720;
    --bg-footer-band: rgba(0, 0, 0, 0.25);

    /* Borders */
    --border: rgba(255, 255, 255, 0.05);
    --border-hover: rgba(255, 255, 255, 0.12);
    --control-active-bg: rgba(255, 255, 255, 0.08);
    --control-active-border: rgba(255, 255, 255, 0.1);

    /* Text */
    --text: #f4f3ee;
    --text-muted: #a8a9ae;
    --text-faint: #6e6f76;

    /* Accent / semantic */
    --accent: #6BA292;
    --accent-bg: rgba(107, 162, 146, 0.12);
    --primary: #6BA292;
    --primary-dark: #5a8f80;
    --danger: #d97777;
    --danger-dark: #c46363;
    --success: #7db87d;
    --warning: #e8b76a;

    /* Log-level text colors */
    --log-info: #7db87d;
    --log-warning: #e8b76a;
    --log-error: #d97777;
    --log-debug: #6e6f76;

    /* Typography */
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Space Grotesk', 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.screen {
    min-height: 100vh;
}

.hidden {
    display: none !important;
}

/* ---------- Buttons ---------- */

.btn {
    padding: 9px 18px;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-sans);
    transition: background 0.15s, border-color 0.15s, color 0.15s, filter 0.15s;
    background: transparent;
    color: var(--text-muted);
}

.btn:hover {
    color: var(--text);
}

.btn-primary {
    background: var(--primary);
    color: #111319;
    border-color: var(--primary);
    font-weight: 600;
}

.btn-primary:hover {
    filter: brightness(1.08);
    color: #111319;
}

.btn-danger {
    background: transparent;
    color: var(--danger);
    border-color: var(--border);
}

.btn-danger:hover {
    background: rgba(217, 119, 119, 0.08);
    border-color: rgba(217, 119, 119, 0.4);
    color: var(--danger);
}

.btn-ghost {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-muted);
    padding: 9px 16px;
}

.btn-ghost:hover {
    border-color: var(--border-hover);
    color: var(--text);
}

/* Icon-only square button. Sized to line up with the 36px-tall primary
   action buttons that live alongside it in action groups. */
.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.btn-icon svg {
    display: block;
}

.btn-icon:hover {
    border-color: var(--border-hover);
    background: rgba(255, 255, 255, 0.03);
}

.btn-icon-delete:hover {
    color: var(--danger);
    border-color: rgba(217, 119, 119, 0.4);
    background: rgba(217, 119, 119, 0.08);
}

.btn-small {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 8px;
}

.btn-large {
    padding: 14px 28px;
    font-size: 15px;
    border-radius: 12px;
}

.loading {
    color: var(--text-faint);
    font-style: normal;
    padding: 24px;
    text-align: center;
    font-size: 13px;
}

.device-load-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-bottom: 24px;
}

.device-load-error .loading {
    padding-bottom: 0;
}

.nav-link {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 13px;
    transition: color 0.15s;
}

.nav-link:hover {
    color: var(--text);
}

/* ---------- Login screen ---------- */

.login-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    gap: 14px;
    padding: 28px 32px;
}

.login-container h1 {
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.8px;
    line-height: 1.1;
    text-align: center;
    color: var(--text);
}

.subtitle {
    color: var(--text-muted);
    margin-bottom: 18px;
    font-size: 14px;
}

/* ---------- Device selection ---------- */

.device-container {
    max-width: 720px;
    margin: 0 auto;
    padding: 28px 32px 56px;
}

.header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.header-bar h2 {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.6px;
    color: var(--text);
    margin: 0;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--text-faint);
}

.user-info #userEmail {
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Language picker — used in every header and on the login screen. The
   closed control matches the surrounding card; the open dropdown gets
   explicit bg/colour because OS-rendered <option> popups ignore inherited
   colours and otherwise show light-on-white text. */
.lang-picker {
    appearance: none;
    -webkit-appearance: none;
    background: var(--bg-input);
    border: 1px solid var(--border-hover);
    color: var(--text);
    border-radius: 6px;
    padding: 4px 24px 4px 8px;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1l4 4 4-4' stroke='%23a8a9ae' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
}
.lang-picker:hover { border-color: var(--accent); }
.lang-picker:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.lang-picker option {
    background: var(--bg-card);
    color: var(--text);
}
.login-lang-picker { display: flex; justify-content: center; }
.header-lang-picker { display: inline-flex; align-items: center; }

.device-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.device-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: var(--bg-card);
    border-radius: 14px;
    border: 1px solid var(--border);
    transition: border-color 0.15s, transform 0.15s;
}

.device-item:hover {
    border-color: var(--border-hover);
}

.device-item .device-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.2px;
    color: var(--text);
}

.device-item .device-last-seen {
    font-size: 12px;
    color: var(--text-faint);
    font-family: var(--font-mono);
    margin-top: 2px;
}

.device-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ---------- Dashboard ---------- */

.dashboard-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 28px 32px 56px;
}

.connection-status {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: var(--text);
}

.macrodroid-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--warning);
    flex-shrink: 0;
    box-shadow: 0 0 0 4px rgba(232, 183, 106, 0.12);
}

.status-dot.connected {
    background: var(--success);
    box-shadow: 0 0 0 4px rgba(125, 184, 125, 0.12);
}

.status-dot.disconnected {
    background: var(--danger);
    box-shadow: 0 0 0 4px rgba(217, 119, 119, 0.12);
}

.status-dot.connecting {
    background: var(--warning);
    animation: status-pulse 1.2s ease-in-out infinite;
}

@keyframes status-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(232, 183, 106, 0.45); }
    50%      { box-shadow: 0 0 0 8px rgba(232, 183, 106, 0.0); }
}

/* ---------- Loading spinner ---------- */

.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--border, #2a2e36);
    border-top-color: var(--accent, #7da6ff);
    border-radius: 50%;
    animation: spinner-rotate 0.7s linear infinite;
    flex-shrink: 0;
}

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

.panel-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 32px 24px;
    color: var(--text-faint);
    font-size: 13px;
}

/* ---------- Tabs ---------- */

.tab-nav {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    background: transparent;
    border-radius: 0;
    padding: 0;
    flex-wrap: wrap;
}

.tab {
    flex: 1;
    min-width: 90px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-sans);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.tab.active {
    background: var(--control-active-bg);
    border-color: var(--control-active-border);
    color: var(--text);
}

.tab:hover:not(.active) {
    color: var(--text);
}

/* ---------- Panels ---------- */

.panel {
    display: none;
}

.panel.active {
    display: block;
}

/* ---------- Device info grid ---------- */

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.info-card {
    background: var(--bg-card);
    border-radius: 14px;
    padding: 18px 20px;
    border: 1px solid var(--border);
    transition: border-color 0.15s;
}

.info-card:hover {
    border-color: var(--border-hover);
}

.info-card .label {
    font-size: 11px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 6px;
    font-family: var(--font-sans);
    font-weight: 500;
}

.info-card .value {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.3px;
    color: var(--text);
}

/* ---------- Panel search (Macros + Variables tabs) ---------- */

/* Used on the Variables tab to put the search input and the type-filter
   dropdown on the same row. The Macros tab keeps using bare .panel-search
   (it has no companion control), so this wrapper is opt-in. */
.panel-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
    align-items: stretch;
}

/* When .panel-search lives inside .panel-controls it shouldn't add its own
   margin (the wrapper handles spacing) and should flex-grow to fill the
   row beside the dropdown. */
.panel-controls .panel-search {
    flex: 1 1 200px;
    margin-bottom: 0;
    min-width: 200px;
}

.panel-search {
    position: relative;
    margin-bottom: 14px;
}

.panel-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-faint);
    pointer-events: none;
}

.panel-search-input {
    height: 40px;
    width: 100%;
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0 14px 0 36px;
    font-size: 13px;
    font-family: var(--font-sans);
    outline: none;
    transition: border-color 0.15s;
}

.panel-search-input::placeholder {
    color: var(--text-faint);
}

.panel-search-input:focus {
    border-color: var(--border-hover);
}

.panel-no-results {
    text-align: center;
    padding: 32px 20px;
    color: var(--text-faint);
    font-size: 13px;
    font-family: var(--font-sans);
}

/* Companion select styled to match the panel search input. Uses an inline
   SVG chevron so it picks up the muted token, and reserves right padding
   for that arrow. */
.panel-filter-select {
    height: 40px;
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 0 32px 0 14px;
    border-radius: 10px;
    font-size: 13px;
    font-family: var(--font-sans);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1l4 4 4-4' stroke='%236e6f76' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    min-width: 150px;
    flex-shrink: 0;
    transition: border-color 0.15s;
}

.panel-filter-select:focus {
    border-color: var(--border-hover);
    outline: none;
}

/* ---------- Macros ---------- */

.category-group {
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    background: var(--bg-card);
    transition: border-color 0.15s;
}

.category-group:hover {
    border-color: var(--border-hover);
}

.category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: var(--bg-footer-band);
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    gap: 12px;
}

.category-header.collapsed {
    border-bottom-color: transparent;
}

.category-header.collapsed + .category-macros {
    display: none;
}

.category-header .category-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.2px;
    color: var(--text);
}

.category-macros {
    border: none;
    border-radius: 0;
}

.macro-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
}

.macro-item:last-child {
    border-bottom: none;
}

.macro-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.macro-name {
    font-size: 13px;
    color: var(--text);
    font-weight: 500;
}

/* Clamped to two lines so a long template description doesn't dominate the
   row. Pre-wrap honours line breaks the user typed into the description. */
.macro-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.45;
    white-space: pre-wrap;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.macro-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.btn-run {
    padding: 6px 12px;
    background: var(--accent-bg);
    color: var(--accent);
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font-sans);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    transition: background 0.15s, border-color 0.15s;
}

.btn-run:hover {
    background: rgba(107, 162, 146, 0.2);
    border-color: rgba(107, 162, 146, 0.3);
}

/* ---------- Toggle switch ---------- */

.toggle {
    position: relative;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}

.toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle .slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 11px;
    cursor: pointer;
    transition: background 0.2s;
}

.toggle .slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 3px;
    bottom: 3px;
    background: var(--text);
    border-radius: 50%;
    transition: transform 0.2s;
}

.toggle input:checked + .slider {
    background: var(--accent);
}

.toggle input:checked + .slider::before {
    transform: translateX(18px);
    background: #111319;
}

/* ---------- Variables tree ---------- */

.variable-list {
    background: var(--bg-card);
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.variable-entry + .variable-entry > .variable-row,
.variable-children .variable-entry > .variable-row {
    border-top: 1px solid var(--border);
}

.variable-row {
    display: grid;
    /* 50/50 split — the value column is wide enough to read/edit comfortably
       even at typical dashboard widths. Both columns use minmax(0, 1fr) so
       grandchild content (inputs, long names) can shrink and ellipsis. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 9px 18px 9px 12px;
    font-size: 13px;
    color: var(--text);
}

.variable-row-nested {
    background: rgba(255, 255, 255, 0.015);
}

/* Subtle accent tint on rows whose key or value matches the search query.
   Helps the eye find hits inside an expanded tree without being noisy. */
.variable-row-match {
    background: rgba(107, 162, 146, 0.1);
    box-shadow: inset 2px 0 0 var(--accent);
}

.variable-row-key {
    /* Name + type chip flow inline; chip wraps to a second line under the
       name when the column gets too narrow for both. Row-gap controls the
       vertical spacing of the wrapped chip. */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    min-width: 0;
}

/* Holds the chevron + name as an unbreakable group so the chevron always
   stays glued to its name, even when the type chip wraps below. */
.variable-key-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
    flex: 0 1 auto;
}

.variable-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.variable-row-value {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

.variable-chevron {
    width: 18px;
    height: 18px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    flex-shrink: 0;
    transition: transform 0.15s, color 0.15s, background 0.15s;
}

.variable-chevron:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.04);
}

.variable-chevron.expanded {
    transform: rotate(90deg);
    color: var(--text);
}

.variable-chevron-spacer {
    display: inline-block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.variable-children {
    display: none;
    background: rgba(0, 0, 0, 0.18);
    border-top: 1px solid var(--border);
}

.variable-children.expanded {
    display: block;
}

.variable-children-empty {
    font-size: 12px;
    color: var(--text-faint);
    font-style: italic;
    padding: 8px 18px 8px 12px;
}

.variable-container-summary {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-faint);
}

.variable-value-secure {
    color: var(--text-faint);
    font-family: var(--font-mono);
    font-size: 12px;
}

.variable-value-input {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-family: var(--font-mono);
    /* Fills the 50%-wide value column — was a fixed 220px before. */
    width: 100%;
    transition: border-color 0.15s;
}

.variable-value-input:focus {
    border-color: var(--border-hover);
    outline: none;
}

.variable-type {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-faint);
    background: rgba(255, 255, 255, 0.05);
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    font-weight: 500;
    flex-shrink: 0;
}

/* ---------- Logs ---------- */

.log-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    flex-wrap: wrap;
}

.log-controls select {
    height: 40px;
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 0 14px;
    border-radius: 10px;
    font-size: 13px;
    font-family: var(--font-sans);
    cursor: pointer;
}

.auto-scroll-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.log-entries {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px;
    max-height: 500px;
    overflow-y: auto;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.65;
}

.log-entry {
    padding: 3px 10px;
    border-radius: 4px;
}

.log-entry:hover {
    background: rgba(255, 255, 255, 0.03);
}

.log-entry .log-time {
    color: var(--text-faint);
    margin-right: 10px;
    font-variant-numeric: tabular-nums;
}

.log-entry.level-INFO .log-text { color: var(--log-info); }
.log-entry.level-WARNING .log-text { color: var(--log-warning); }
.log-entry.level-ERROR .log-text { color: var(--log-error); }
.log-entry.level-DEBUG .log-text { color: var(--log-debug); }
.log-entry.level-VERBOSE .log-text { color: var(--text-muted); }

/* ---------- Responsive ---------- */

@media (max-width: 700px) {
    .info-grid {
        grid-template-columns: 1fr;
    }

    .device-container,
    .dashboard-container {
        padding: 20px 16px 40px;
    }

    .header-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .user-info {
        justify-content: space-between;
    }

    .tab-nav {
        overflow-x: auto;
    }

    .tab {
        flex: 0 0 auto;
        min-width: 100px;
    }
}

/* ---------- Inline download buttons on macros / categories ---------- */

/* Sized to sit cleanly next to the existing toggle in a macro row.
   Subtle colour by default, brightening on hover so the user can tell
   it's clickable but it doesn't compete visually with the run button. */
.btn-icon-mini {
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.btn-icon-mini svg { display: block; }

.btn-icon-mini:hover {
    color: var(--text);
    border-color: var(--border-hover);
    background: rgba(255, 255, 255, 0.03);
}

/* Cluster the download icon next to the category toggle so the right-hand
   side reads as one control group rather than space-between'd separately. */
.category-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* ---------- Backup tab ---------- */

.backup-section {
    padding: 24px;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.backup-section h3 {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 600;
}

.backup-description {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.55;
    margin: 0;
}

.backup-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.backup-status {
    color: var(--text-muted);
    font-size: 12px;
    min-height: 1em;
    margin: 0;
}

.backup-status.is-error { color: var(--danger); }
.backup-status.is-success { color: var(--accent); }

.backup-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.backup-list-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}

.backup-list-group-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.backup-list-group-warning {
    color: var(--danger);
    font-size: 12px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
}

.backup-list-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    font-size: 13px;
}

.backup-list-row.is-restoring {
    opacity: 0.65;
}

.backup-list-row-primary {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.backup-list-row-title {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.backup-list-row-meta {
    color: var(--text-muted);
    font-size: 12px;
}

.backup-list-row-size {
    color: var(--text-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.backup-list-encrypted-icon {
    margin-right: 4px;
    color: var(--text-muted);
}

.backup-list-empty {
    color: var(--text-muted);
    font-style: italic;
    font-size: 13px;
    margin: 0;
    padding: 4px 0;
}

.backup-list-restore-status {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

.modal-input {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg, #0f1115);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    box-sizing: border-box;
}

.modal-error {
    color: var(--danger);
    font-size: 12px;
    min-height: 1em;
    margin: 0;
}

/* ---------- Modal ---------- */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.modal-backdrop.hidden {
    display: none;
}

.modal-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    max-width: 460px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.modal-card h3 {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 600;
}

.modal-card p {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.55;
    white-space: pre-wrap;
}

.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.modal-card-large {
    max-width: min(880px, 92vw);
}

.variable-edit-textarea {
    width: 100%;
    min-height: 360px;
    max-height: 60vh;
    resize: vertical;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 13px;
    line-height: 1.5;
    padding: 12px;
    background: var(--bg, #0f1115);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-sizing: border-box;
}

/*
 * The textarea + loading overlay share a positioning context so the spinner
 * floats centred on top of the (still-visible, disabled) textarea while
 * data is being fetched.
 */
.variable-edit-body {
    position: relative;
}

.variable-edit-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: var(--text);
    font-size: 14px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(1px);
    pointer-events: none;
}

.variable-edit-loading-text {
    font-variant-numeric: tabular-nums;
}

.spinner-large {
    width: 28px;
    height: 28px;
    border-width: 3px;
}

.variable-edit-status {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
}

.variable-large-string-btn {
    font-family: inherit;
}