@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

:root {
    --primary-700: #0f4d42;
    --primary-500: #146656;
    --primary-300: #1f8a75;
    --bg: #f7faf9;
    --text: #1f2937;
    --muted: #6b7280;
    --card: #ffffff;
    --border: #e5e7eb;
    --on-color: #16a34a;
    --off-color: #ef4444;
    /* Extended palette & design tokens for more professional feel */
    --accent-amber: #f6b73e;
    --accent-teal: #0d9488;
    --accent-red: #dc2626;
    --surface-alt: #f0f4f3;
    --focus-ring: rgba(31,138,117,0.45);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 6px 22px -4px rgba(0,0,0,0.12);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --gradient-cap: linear-gradient(90deg, #1f8a75 0%, #146656 100%);
    --card-slate: #1f2937;
    --card-slate-border: rgba(148,163,184,0.35);
    --card-slate-bright: #f8fafc;
    --card-slate-muted: rgba(226,232,240,0.75);
    --card-slate-shadow: 0 28px 55px -35px rgba(15,23,42,0.9);
}
body {
    font-family: 'Roboto', sans-serif;
    background: var(--bg);
    color: var(--text);
    margin: 0;
    line-height: 1.6;
}
 
/* Mode panel */
.mode-panel {
    grid-column: 1 / -1;
    background-color: var(--card);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--border);
}
.mode-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.toggle-group { display: inline-flex; background: #fff; border:1px solid var(--border); border-radius: 8px; overflow: hidden; }
.toggle-button { background: transparent; color: var(--text); border: none; padding: 0.6rem 1rem; cursor: pointer; font-weight: 600; }
.toggle-button.active { background: var(--primary-500); color: #fff; }

.plant-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.75rem; }
.plant-card { background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 0.9rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease; }
.plant-card:hover { border-color: var(--primary-500); transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.06); }
.plant-card.active { border-color: var(--on-color); background: #ecfdf5; }
.plant-emoji { font-size: 1.4rem; }
.plant-name { font-size: 0.95rem; color: var(--muted); }
.plant-status { display: none; font-size: 0.75rem; background: var(--on-color); color: #fff; padding: 0.1rem 0.4rem; border-radius: 999px; margin-top: 0.2rem; }
.plant-card.active .plant-status { display: inline-block; }

.preset-details { margin-top: 1rem; background: var(--card); border:1px solid var(--border); border-radius: 8px; padding: 1rem; }
.preset-details h3 { margin: 0 0 0.5rem 0; font-weight: 500; color: var(--muted); }
.preset-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 0.75rem; }
.preset-item { background:#f8fafc; border:1px solid var(--border); border-radius: 8px; padding: 0.75rem; }
.preset-item strong { display:block; font-size:0.85rem; color: var(--muted); font-weight:400; }
.preset-item span { font-size:1.1rem; font-weight:700; }
/* (removed old dark-themed duplicates for mode styles) */

/* Manual form */
.manual-form { display: grid; gap: 0.9rem; }
.form-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
.form-field { display:flex; flex-direction: column; gap: 0.35rem; }
.form-field label { font-size: 0.85rem; color: var(--muted); }
.form-field input { background:#fff; color: var(--text); border:1px solid var(--border); border-radius:var(--radius-sm); padding:0.65rem 0.75rem; box-shadow: var(--shadow-sm); transition: border-color .15s ease, box-shadow .15s ease; }
.form-field input:focus { border-color: var(--primary-500); box-shadow: 0 0 0 3px rgba(20,102,86,0.18); outline: none; }
.form-actions { display:flex; align-items:center; gap: 0.75rem; margin-top: 0.5rem; }
.save-btn { background:#2ea44f; color:#fff; border:none; border-radius:8px; padding:0.6rem 1rem; cursor:pointer; }
.save-btn:hover { filter: brightness(1.05); }
.save-status { color: var(--muted); font-size: 0.9rem; }

@media (max-width: 800px) {
    .form-row { grid-template-columns: repeat(2, 1fr); }
}

/* Header split: interface cap + status bar */
.app-header { display: grid; grid-template-rows: auto auto; background: var(--card); }
.interface-cap {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    background: var(--gradient-cap); /* subtle professional gradient */
    color: #fff;
    padding: 0.55rem 1.1rem;
    gap: 1.1rem;
    box-shadow: var(--shadow-md);
    position: relative;
}
.cap-left { display: flex; align-items: center; }
.cap-center { display: flex; justify-content: center; text-align: center; }
.cap-center-stack { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; }
.device-serial-display {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(255,255,255,0.85);
}
.device-serial-display strong { font-size: 1.05rem; letter-spacing: 0; margin-left: 0.25rem; color: #fff; }
.cap-right { display: flex; justify-content: flex-end; align-items: center; }
.time-display { font-weight: 700; letter-spacing: 0.5px; font-size: 1.15rem; display:flex; align-items:center; gap:0.4rem; }
.status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1.4rem 0.75rem;
    background: linear-gradient(135deg, var(--primary-500), var(--primary-300));
    color: #fff;
    box-shadow: var(--shadow-sm) inset;
}
.status-items { display: flex; align-items: center; gap: 0.75rem; }

.status-chips {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.9rem;
    margin-top: 0.9rem;
}

.status-chip {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    border-radius: 18px;
    border: 1px solid var(--card-slate-border);
    background: var(--card-slate);
    color: var(--card-slate-bright);
    box-shadow: var(--card-slate-shadow);
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.status-chip::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 15% 0%, rgba(255,255,255,0.4), transparent 55%);
    opacity: 0.8;
    pointer-events: none;
}

.status-chip:hover {
    transform: translateY(-4px);
    box-shadow: 0 38px 72px -46px rgba(15,23,42,0.95);
}

.status-chip > * { position: relative; z-index: 1; }

.chip-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--card-slate-bright);
}

.chip-text { display:flex; flex-direction:column; gap:0.15rem; }
.chip-label { font-size:0.72rem; text-transform:uppercase; letter-spacing:0.2em; color: var(--card-slate-muted); }
.chip-value { font-size:1.1rem; font-weight:600; color: var(--card-slate-bright); }

.status-chip[data-state="online"],
.status-chip[data-state="ok"],
.status-chip[data-state="fresh"] {
    border-color: rgba(16,185,129,0.65);
    box-shadow: 0 32px 60px -38px rgba(16,185,129,0.55);
}

.status-chip[data-state="warn"],
.status-chip[data-state="demo"] {
    border-color: rgba(251,191,36,0.5);
    box-shadow: 0 32px 60px -38px rgba(251,191,36,0.5);
}

.status-chip[data-state="offline"],
.status-chip[data-state="error"] {
    border-color: rgba(248,113,113,0.6);
    box-shadow: 0 32px 60px -38px rgba(248,113,113,0.55);
}

.status-chip[data-state="idle"] { opacity: 0.85; }

.logo {
    height: 46px;
    width: auto;
    display: block;
}

.sensor-card {
    background-color: var(--card-slate);
    padding: 1.1rem 1.2rem;
    border-radius: 20px;
    border: 1px solid var(--card-slate-border);
    box-shadow: var(--card-slate-shadow);
    transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    position: relative;
    min-height: 140px;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    overflow: hidden;
}
.sensor-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 42px 80px -50px rgba(15,23,42,0.95);
    border-color: rgba(255,255,255,0.25);
}

.sensor-card::before {
    content: '';
    position: absolute;
    inset: -25% -10% 15% -35%;
    background: radial-gradient(circle at 35% 20%, var(--sensor-accent, rgba(255,255,255,0.18)), transparent 65%);
    opacity: 0.85;
    pointer-events: none;
}

.sensor-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(255,255,255,0.12);
    pointer-events: none;
}

.sensor-card > * { position: relative; z-index: 1; }

.sensor-card .sensor-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--card-slate-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.sensor-card .sensor-value {
    margin: 0;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 700;
    color: var(--card-slate-bright);
    display: flex;
    align-items: flex-end;
    gap: 0.35rem;
}

.sensor-card .sensor-unit {
    color: rgba(248,250,252,0.75);
    text-transform: uppercase;
    font-size: 0.9rem;
}

.sensor-card[data-tone="forest"] { --sensor-accent: rgba(16,185,129,0.45); }
.sensor-card[data-tone="fresh"] { --sensor-accent: rgba(52,211,153,0.45); }
.sensor-card[data-tone="mint"] { --sensor-accent: rgba(34,197,94,0.45); }
.sensor-card[data-tone="pine"] { --sensor-accent: rgba(14,165,233,0.45); }
.sensor-card[data-tone="amber"] { --sensor-accent: rgba(251,191,36,0.5); }
.sensor-card[data-tone="aqua"] { --sensor-accent: rgba(14,165,233,0.45); }
.sensor-card[data-tone="sage"] { --sensor-accent: rgba(167,243,208,0.4); }
.title { font-weight: 600; font-size: 1.2rem; margin: 0; }
.device-serial { opacity: 0.9; font-weight: 500; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: #bbb; box-shadow: 0 0 0 3px rgba(255,255,255,0.2) inset; }
.status-dot.ok { background: #10b981; }
.status-dot.err { background: #ef4444; }

.badge {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    border: 1px solid rgba(255,255,255,0.2);
}

/* Dropdown Menu */
.menu-toggle {
    background: rgba(255,255,255,0.12);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.25);
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.menu-toggle:hover { filter: brightness(1.1); transform: translateY(-1px); }
.menu-toggle-icon {
    position: relative;
    width: 24px;
    height: 2px;
    background: currentColor;
    border-radius: 999px;
}
.menu-toggle-icon::before,
.menu-toggle-icon::after {
    content: '';
    position: absolute;
    left: 0;
    width: 24px;
    height: 2px;
    background: currentColor;
    border-radius: 999px;
}
.menu-toggle-icon::before { top: -6px; }
.menu-toggle-icon::after { top: 6px; }
.menu-toggle-text { font-size: 1rem; letter-spacing: 0.1em; text-transform: uppercase; }
.dropdown-menu {
    position: absolute;
    top: 58px;
    right: 1rem;
    background: #1f8a75; /* mimic screenshot neon green */
    border: 2px solid #304508;
    border-radius: 8px;
    box-shadow: 0 10px 24px -4px rgba(250, 248, 248, 0.25);
    padding: 0.5rem 0;
    display: none;
    min-width: 240px;
    z-index: 1000;
}
.dropdown-menu[aria-hidden="false"] { display: block; }
.menu-item {
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #f5f9f8;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    position: relative;
}
.menu-item + .menu-item { border-top: 1px solid rgba(0,0,0,0.15); }
.menu-item:hover,
.menu-item:focus { background: rgba(0,0,0,0.08); outline: none; }
.menu-item:active { background: rgba(0,0,0,0.18); }

.menu-dynamic-panel { padding: 1.2rem; grid-column: 1 / -1; }
.dynamic-inner { background: var(--card); border: 1px solid var(--border); padding: 1.2rem 1.4rem; border-radius: 10px; max-width: 1080px; margin: 0 auto; }
.dynamic-inner h2 { margin-top:0; font-weight:600; color: var(--primary-700); }
.dynamic-placeholder { color: var(--muted); font-size: 0.95rem; line-height: 1.55; }

.tabs { display: flex; gap: 0.5rem; background: #fff; padding: 0.5rem 0.8rem; border-bottom: 1px solid var(--border); }
.tab { border: 1px solid var(--border); background: #fff; color: var(--text); padding: 0.45rem 0.9rem; border-radius: 6px; cursor: pointer; font-weight: 500; }
.tab.active { background: var(--primary-500); border-color: var(--primary-500); color: #fff; }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

.container {
    padding: 1.2rem;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.dashboard-grid {
    background: radial-gradient(circle at 12% 15%, rgba(45,212,191,0.18), transparent 55%),
        radial-gradient(circle at 90% 0%, rgba(59,130,246,0.2), transparent 45%),
        linear-gradient(135deg, rgba(15,118,110,0.9), rgba(6,78,59,0.9));
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 28px;
    box-shadow: 0 30px 80px -60px rgba(15,23,42,0.9);
    color: var(--card-slate-bright);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 2rem;
}

.dashboard-grid::before {
    content: '';
    position: absolute;
    inset: -20% -10% auto;
    height: 260px;
    background: radial-gradient(circle at 25% 25%, rgba(255,255,255,0.35), transparent 65%);
    pointer-events: none;
    opacity: 0.8;
    z-index: 0;
}

.dashboard-grid > * { position: relative; z-index: 1; }

.dashboard-row { grid-column: 1 / -1; width: 100%; }

.row-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    padding: 0 0.2rem;
}
.row-header h2 {
    margin: 0;
    font-size: 1rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--card-slate-muted);
}

.serial-banner {
    background: var(--card-slate);
    border: 1px solid var(--card-slate-border);
    border-radius: 22px;
    padding: 1rem 1.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--card-slate-shadow);
}

.serial-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--card-slate-muted);
}

.serial-value {
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    font-weight: 700;
    color: var(--card-slate-bright);
}

.status-row .status-chips { margin-top: 0; }

.sensors {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    grid-column: 1 / -1;
}

.sensor-matrix {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1.1rem;
    grid-column: 1 / -1;
}
.chart-container {
    background-color: var(--card);
    padding: 1.5rem;
    border-radius: 8px;
    grid-column: 1 / -1;
    border: 1px solid var(--border);
    position: relative;
    height: 360px; /* ensure visible chart area */
}

.chart-container canvas { height: 100% !important; }

.chart-controls {
    grid-column: 1 / -1;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.control-group { display: grid; gap: 0.35rem; min-width: 220px; }
.control-group label { color: var(--muted); font-size: 0.9rem; }
.control-select {
    appearance: none;
    background: #fff;
    border: 1px solid var(--border);
    padding: 0.55rem 0.7rem;
    border-radius: 6px;
    font-size: 0.95rem;
}

.chart-title {
    grid-column: 1 / -1;
    font-weight: 600;
    color: var(--text);
    margin: -0.5rem 0 -0.5rem 0.2rem;
}

.chart-note {
    grid-column: 1 / -1;
    color: var(--muted);
    margin: 0 0 0.5rem 0.2rem;
    font-size: 0.9rem;
}

.charts-page { display:flex; flex-direction:column; gap:1.5rem; padding-bottom:1.5rem; }
.zone-layout { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px,1fr)); gap:1.5rem; }
.zone-card { background:#fff; border-radius:24px; border:1px solid rgba(15,23,42,0.08); box-shadow:0 25px 55px -35px rgba(15,23,42,0.4); padding:1.5rem 1.6rem 1.6rem; display:flex; flex-direction:column; gap:1rem; }
.zone-card-header { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.zone-eyebrow { margin:0; text-transform:uppercase; letter-spacing:0.2em; font-size:0.75rem; color:#94a3b8; }
.zone-card-header h2 { margin:0.15rem 0 0.2rem; font-size:1.4rem; color:#0f172a; }
.zone-desc { margin:0; color:#6b7280; font-size:0.9rem; }
.zone-range { display:grid; grid-template-columns:repeat(2, minmax(140px,1fr)); gap:0.65rem; }
.zone-range label { display:flex; flex-direction:column; font-size:0.78rem; color:#94a3b8; gap:0.2rem; }
.zone-range input { border:1px solid rgba(15,23,42,0.15); border-radius:10px; padding:0.35rem 0.6rem; font-size:0.9rem; background:#f8fafc; color:#0f172a; }
.zone-metric-controls { display:flex; flex-direction:column; gap:0.45rem; }
.zone-group-label { margin:0; font-weight:600; color:#0f172a; font-size:0.95rem; }
.metric-toggle-list { display:flex; flex-wrap:wrap; gap:0.5rem; }
.metric-toggle { border:1px solid rgba(15,23,42,0.14); background:#f8fafc; color:#0f172a; border-radius:999px; padding:0.25rem 0.85rem 0.25rem 0.45rem; font-weight:600; font-size:0.85rem; display:inline-flex; align-items:center; gap:0.4rem; cursor:pointer; transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.metric-toggle .metric-swatch { width:0.65rem; height:0.65rem; border-radius:50%; background:var(--metric-color,#0ea5e9); display:inline-flex; }
.metric-toggle.active { border-color:var(--primary-500); box-shadow:0 6px 16px -10px rgba(16,185,129,0.35); background:#fff; }
.metric-toggle:not(.active) { opacity:0.65; }
.metric-toggle:hover { transform:translateY(-1px); }
.zone-chart { position:relative; border-radius:22px; border:1px solid rgba(15,23,42,0.08); padding:1rem; background:linear-gradient(180deg,#f8fafc,#ffffff); min-height:280px; }
.zone-chart canvas { height:260px !important; }
.zone-summary { list-style:none; padding:0; margin:0; border:1px solid rgba(15,23,42,0.08); border-radius:18px; overflow:hidden; }
.zone-summary-item { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0.65rem 0.85rem; background:#f9fafb; font-size:0.9rem; }
.zone-summary-item:nth-child(even) { background:#fff; }
.zone-summary-label { color:#64748b; font-weight:500; }
.zone-summary-value { color:#0f172a; font-weight:600; }
.zone-summary-value em { font-style:normal; color:#94a3b8; font-weight:500; margin-left:0.35rem; text-transform:capitalize; }
.zone-status { margin:0; font-size:0.85rem; text-align:right; color:#64748b; }
.zone-status[data-tone="success"] { color:#15803d; }
.zone-status[data-tone="warn"] { color:#b45309; }
.charts-back-row { display:flex; justify-content:flex-end; }
.charts-back-row .subpage-back { margin-left:auto; }

.control-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.1rem;
    width: 100%;
}

.control-button {
    background-color: var(--card-slate);
    color: var(--card-slate-bright);
    border: 1px solid var(--card-slate-border);
    border-radius: 18px;
    padding: 1rem 1.4rem;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    min-height: 110px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--card-slate-shadow);
}

.control-button:hover {
    transform: translateY(-3px);
    border-color: rgba(255,255,255,0.25);
    box-shadow: 0 42px 80px -50px rgba(15,23,42,0.95);
}

.control-button::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.15), transparent 60%);
    opacity: 0.85;
    pointer-events: none;
}

.control-icon { font-size: 2rem; color: var(--card-slate-bright); }

.control-copy { display: flex; flex-direction: column; gap: 0.2rem; align-items: flex-end; }

.control-label {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--card-slate-muted);
}

.status-indicator {
    font-weight: 700;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 1rem;
    background: rgba(15,23,42,0.35);
}

.status-indicator[data-status="ON"] {
    background-color: var(--on-color);
    color: #fff;
}

.status-indicator[data-status="OFF"] {
    background-color: var(--off-color);
    color: #fff;
}

/* Settings */
.settings { grid-template-columns: repeat(2, minmax(280px, 1fr)); }
.settings-card, .status-card, .control-status-card { background: var(--card); border: 1px solid var(--border); padding: 1rem 1.2rem; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: box-shadow .25s ease; }
.settings-card:hover, .status-card:hover, .control-status-card:hover { box-shadow: var(--shadow-md); }
.settings-card h2, .status-card h2, .control-status-card h2 { margin: 0 0 0.8rem; color: var(--muted); font-weight: 500; }
.settings-card label { display: grid; gap: 0.35rem; margin: 0.6rem 0; color: var(--text); }
.settings-card input { padding: 0.6rem 0.7rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.95rem; }
.settings-actions { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.6rem; }
.primary { background: var(--primary-500); color: #fff; border: 1px solid var(--primary-500); padding: 0.5rem 0.9rem; border-radius: 6px; cursor: pointer; }
.primary:hover { filter: brightness(1.05); }
.primary:active { filter: brightness(0.95); }
.primary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* Accessible global focus */
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* Utility pills & subtle tags */
.pill { display:inline-flex; align-items:center; gap:0.35rem; background: var(--surface-alt); color: var(--primary-700); padding:0.3rem 0.65rem; border-radius:999px; font-size:0.75rem; font-weight:600; letter-spacing:.5px; }
.pill.success { background:#ecfdf5; color: var(--on-color); }
.pill.warn { background:#fef9c3; color:#b45309; }
.pill.danger { background:#fef2f2; color:var(--accent-red); }

/* Micro animation for time display */
.time-display { animation: pulseTime 6s ease-in-out infinite; }
@keyframes pulseTime { 0%,100% { opacity: .92; } 50% { opacity: 1; } }
@keyframes fadeSlide { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

/* Elevated dynamic panel */
.dynamic-inner { box-shadow: var(--shadow-sm); }
.dynamic-inner:hover { box-shadow: var(--shadow-md); }

/* Refined menu items */
.menu-item { transition: background-color .15s ease, padding-left .18s ease; }
.menu-item:hover { padding-left: 1.25rem; }

/* Layout max-width wrapper (optional future use) */
.max-width { max-width:1280px; margin:0 auto; padding:0 1.2rem; }

/* Subtle dividers */
.divider { height:1px; background: var(--border); margin:1.2rem 0; }

/* Data emphasis */
.reading-strong { font-weight:700; color: var(--primary-700); letter-spacing:.5px; }

/* Gradient badge variant */
.badge.gradient { background: linear-gradient(135deg, var(--primary-300), var(--primary-500)); }

/* Auth overlay */
.auth-screen { min-height: 100vh; display: grid; place-items: center; background: var(--bg); padding: 1.2rem; }
.auth-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); width: min(92vw, 420px); box-shadow: var(--shadow-lg); padding: 1.2rem 1.2rem 1.3rem; }
.auth-header { display:flex; align-items:center; gap:0.6rem; margin-bottom: 0.6rem; }
.logo.small { height: 36px; }
.auth-card h2 { margin: 0.2rem 0 0.6rem; font-weight: 700; color: var(--primary-700); }
.auth-form { display: grid; gap: 0.75rem; }
.auth-form label { display:grid; gap:0.35rem; color: var(--text); }
.auth-form input { background:#fff; color: var(--text); border:1px solid var(--border); border-radius: var(--radius-sm); padding:0.65rem 0.75rem; box-shadow: var(--shadow-sm); }
.password-input { display:flex; align-items:center; border:1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); overflow:hidden; }
.password-input input { border:none; border-radius:0; box-shadow:none; padding:0.65rem 0.75rem; }
.password-visibility { border:none; background:transparent; padding:0 0.75rem; cursor:pointer; color:var(--muted); display:flex; align-items:center; }
.password-visibility:hover { color:var(--primary-500); }
.auth-error { color: var(--accent-red); min-height: 1.2em; font-size: 0.9rem; }
.primary.full { width: 100%; }

/* Hide app shell until authenticated */
#app-shell[hidden] { display: none !important; }

/* Growing Profiles list */
.profiles-wrapper { max-width: 520px; margin: 0 auto; }
.profiles-header { text-align:center; margin:0 0 1.2rem; font-size:1.5rem; font-weight:600; color: var(--primary-700); }
.profiles-list { list-style:none; padding:0; margin:0; border-top:1px solid var(--border); }
.profile-item { display:flex; align-items:center; justify-content:space-between; padding:0.75rem 0.2rem 0.75rem 0.9rem; border-bottom:1px solid var(--border); gap:0.75rem; }
.profile-left { display:flex; align-items:center; gap:0.75rem; }
.profile-remove { width:34px; height:34px; border-radius:50%; border:1px solid var(--border); background:#f9fafb; display:flex; align-items:center; justify-content:center; cursor:pointer; font-weight:600; color:#9ca3af; transition: background .15s ease, color .15s ease; }
.profile-remove:hover { background:#fee2e2; color:#dc2626; }
.profile-name { font-size:1rem; font-weight:500; color: var(--text); }
.profile-arrow { font-size:1.2rem; color:#9ca3af; }
.profile-add-row { display:flex; align-items:center; padding:0.75rem 0.2rem 0.75rem 0.9rem; }
.profile-add { width:34px; height:34px; border-radius:50%; border:1px solid var(--border); background:#f9fafb; display:flex; align-items:center; justify-content:center; cursor:pointer; font-weight:600; color:#16a34a; transition: background .15s ease; }
.profile-add:hover { background:#dcfce7; }
.profiles-footer { position:relative; }
.profile-back { position:absolute; left:0; bottom:-4.5rem; width:46px; height:46px; border-radius:50%; border:1px solid var(--border); background:#f9fafb; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:1.2rem; color:#374151; box-shadow: var(--shadow-sm); }
.profile-back:hover { background:#e5e7eb; }
.profile-empty { padding:1rem; text-align:center; color: var(--muted); font-size:0.95rem; }
.profile-item.removing { opacity:.4; }
.profiles-actions { margin-top:1rem; display:flex; justify-content:flex-end; gap:.6rem; }
.profiles-actions button { background: var(--primary-500); color:#fff; border:1px solid var(--primary-500); padding:0.45rem .9rem; border-radius:6px; cursor:pointer; font-size:.85rem; }
.profiles-actions button.secondary { background:#fff; color: var(--primary-700); border:1px solid var(--primary-300); }
.profiles-actions button.secondary:hover { background: var(--surface-alt); }
.cfg-msg { color: var(--muted); font-size: 0.9rem; }
.hint { color: var(--muted); font-size: 0.9rem; margin-top: 0.6rem; }
.status-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 0.4rem 0.8rem; }
.control-status-list { display: grid; gap: 0.75rem; margin-top: 0.5rem; }
.control-status-item { display: flex; align-items: center; justify-content: space-between; padding: 0.65rem 0.85rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-alt); font-weight: 600; color: var(--text); transition: border-color .2s ease, box-shadow .2s ease; }
.control-status-item[data-state="on"] { border-color: rgba(22,163,74,0.6); box-shadow: 0 6px 18px -10px rgba(16,185,129,0.7); }
.control-status-item[data-state="off"] { border-color: rgba(239,68,68,0.45); }
.control-status-item[data-state="on"] .control-status-value { color: var(--on-color); }
.control-status-item[data-state="off"] .control-status-value { color: var(--off-color); }
.control-status-name { text-transform: capitalize; letter-spacing: 0.02em; }
.control-status-value { font-size: 0.95rem; }
.control-status-empty { margin: 0; color: var(--muted); font-size: 0.9rem; }

@media (max-width: 900px) {
    .sensors { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .sensors { grid-template-columns: 1fr; }
    .container { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .measurement-hero { flex-direction:column; }
    .measurement-hero-copy p { max-width: unset; }
    .measurement-grid { grid-template-columns:1fr; }
}

/* Device settings list (enhanced professional view) */
.device-settings-menu { max-width: 640px; margin: 0 auto; display:flex; flex-direction:column; gap:0.9rem; }
.device-settings-hero { background: linear-gradient(135deg, #14532d, #1f8a75); border-radius: 20px; padding: 1.4rem 1.6rem; display:flex; justify-content:space-between; align-items:flex-start; color:#f8fafc; box-shadow: var(--shadow-md); }
.hero-copy h2 { margin:0; font-size:1.6rem; }
.hero-sub { margin:0.2rem 0 0; opacity:0.8; font-weight:400; }
.hero-stats { display:flex; flex-wrap:wrap; gap:0.45rem; }
.hero-pill { background: rgba(255,255,255,0.16); border:1px solid rgba(255,255,255,0.3); border-radius:999px; padding:0.25rem 0.8rem; font-size:0.85rem; letter-spacing:0.02em; }
.hero-pill.muted { opacity:0.85; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.18em; font-size:0.75rem; margin:0 0 0.35rem; opacity:0.7; }
.device-settings-hint { margin:0; color:var(--muted); font-size:0.9rem; }
.device-settings-list { list-style:none; padding:0; margin:0; border:1px solid var(--border); border-radius:16px; overflow:hidden; background:#fff; box-shadow:var(--shadow-sm); }
.device-settings-item { display:flex; align-items:center; gap:0.85rem; padding:1rem 1.1rem; border-bottom:1px solid var(--border); cursor:pointer; background:#fff; transition:background-color .15s ease, transform .12s ease; }
.device-settings-item:last-child { border-bottom:none; }
.device-settings-item:hover { background:#f5f7f6; transform:translateX(2px); }
.device-settings-item:focus-visible { outline:3px solid var(--focus-ring); outline-offset:-3px; }
.device-settings-icon { width:46px; height:46px; border-radius:14px; background:var(--surface-alt); display:flex; align-items:center; justify-content:center; font-size:1.5rem; box-shadow:inset 0 1px 3px rgba(0,0,0,0.08); }
.device-settings-text { flex:1; display:flex; flex-direction:column; gap:0.2rem; }
.item-label { margin:0; font-size:1rem; font-weight:600; color:var(--text); }
.item-description { margin:0; font-size:0.85rem; color:var(--muted); }
.device-settings-meta { display:flex; align-items:center; gap:0.5rem; }
.item-pill { background:#e8eef1; border-radius:999px; padding:0.15rem 0.65rem; font-size:0.8rem; color:#374151; font-weight:600; }
.item-arrow { font-size:1.4rem; color:#9ca3af; }
.device-settings-footnote { margin:0.2rem 0 0; font-size:0.85rem; color:var(--muted); text-align:center; }

/* Measurement units subpage */
.settings-subpage { max-width: 520px; margin: 0 auto; padding-bottom: 2rem; }
.subpage-actions { margin-top: 1rem; display:flex; justify-content:space-between; align-items:center; }
.subpage-back,
.subpage-confirm { width:48px; height:48px; border-radius:999px; border:2px solid #d5dbe0; background:#fff; font-size:1.4rem; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s ease, transform .15s ease; }
.subpage-back { color:#0f172a; }
.subpage-confirm { border-color:#16a34a; color:#16a34a; }
.subpage-back:hover,
.subpage-confirm:hover { background:rgba(15, 23, 42, 0.06); transform:translateY(-1px); }
.subpage-back:focus-visible,
.subpage-confirm:focus-visible { outline:3px solid var(--focus-ring); outline-offset:2px; }
.subpage-title { text-align:center; font-size:1.5rem; margin:0.6rem 0 1rem; }
.measurement-list { list-style:none; padding:0; margin:0; border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.measurement-item { display:flex; justify-content:space-between; align-items:center; padding:0.9rem 1rem; border-bottom:1px solid var(--border); background:#fff; cursor:pointer; }
.measurement-item:last-child { border-bottom:none; }
.measurement-item:hover { background:#f7f8f9; }
.measurement-item:focus-visible { outline:3px solid var(--focus-ring); outline-offset:-3px; }
.measurement-text { display:flex; flex-direction:column; }
.measurement-label { margin:0; font-size:1.05rem; font-weight:600; }
.measurement-sub { margin:0.15rem 0 0; font-size:0.85rem; color:#6b7280; }
.measurement-hero { background:linear-gradient(135deg, #083344, #14532d 65%, #22c55e); border-radius:28px; padding:1.6rem 1.8rem; color:#ecfdf5; display:flex; justify-content:space-between; gap:1.5rem; align-items:flex-start; box-shadow:0 25px 60px -35px rgba(8,51,68,0.9); margin-bottom:1.4rem; }
.measurement-hero-copy h2 { margin:0.1rem 0; font-size:1.8rem; }
.measurement-hero-copy p { margin:0.2rem 0 0; line-height:1.4; max-width:420px; }
.measurement-hero-eyebrow { text-transform:uppercase; letter-spacing:0.25em; font-size:0.75rem; opacity:0.75; margin:0; }
.measurement-hero-pill { align-self:flex-start; background:rgba(15,23,42,0.25); border:1px solid rgba(236,253,245,0.35); border-radius:999px; padding:0.35rem 0.9rem; font-weight:600; font-size:0.85rem; }
.measurement-grid { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; }
.measurement-card { background:#fff; border-radius:24px; border:1px solid rgba(15,23,42,0.08); padding:1.2rem 1.25rem 1.3rem; box-shadow:0 18px 45px -35px rgba(15,23,42,0.9); display:flex; flex-direction:column; gap:0.65rem; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.measurement-card:hover { transform:translateY(-3px); box-shadow:0 25px 55px -32px rgba(34,197,94,0.45); border-color:rgba(34,197,94,0.5); }
.measurement-card:focus-visible { outline:3px solid var(--focus-ring); outline-offset:6px; }
.measurement-card-header { display:flex; gap:0.9rem; align-items:flex-start; }
.measurement-card-pill { display:flex; justify-content:flex-end; }
.measurement-card-icon { width:56px; height:56px; border-radius:18px; background:linear-gradient(135deg, rgba(15,77,66,0.1), rgba(34,197,94,0.25)); display:flex; align-items:center; justify-content:center; font-size:1.8rem; box-shadow:inset 0 1px 2px rgba(0,0,0,0.05); }
.measurement-card-copy { flex:1; display:flex; flex-direction:column; gap:0.2rem; }
.measurement-card-copy h3 { margin:0; font-size:1.2rem; color:#0f172a; }
.measurement-card-copy p { margin:0; color:#6b7280; font-size:0.9rem; }
.measurement-card-eyebrow { margin:0; text-transform:uppercase; letter-spacing:0.2em; font-size:0.7rem; color:#94a3b8; }
.measurement-pill { background:#ecfdf5; color:#15803d; border-radius:999px; padding:0.18rem 0.75rem; font-size:clamp(0.62rem, 1.6vw, 0.72rem); font-weight:600; border:1px solid rgba(34,197,94,0.4); display:inline-flex; align-items:center; justify-content:center; min-height:24px; white-space:nowrap; max-width:100%; letter-spacing:0.02em; }
.measurement-card-meta { display:flex; align-items:center; justify-content:space-between; font-size:0.85rem; color:#6b7280; }
.measurement-card-note { letter-spacing:0.06em; text-transform:uppercase; font-size:0.7rem; color:#94a3b8; }
.measurement-detail .subpage-title { margin-top:0; }
.subpage-hint { margin:0 0 0.75rem; color:#6b7280; font-size:0.9rem; text-align:center; }
.measurement-option-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0.75rem; }
.measurement-option { border:1px solid var(--border); border-radius:14px; padding:0.9rem 1rem; display:flex; justify-content:space-between; align-items:center; cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease; background:#fff; }
.measurement-option .option-text { flex:1; }
.option-label { margin:0; font-size:1rem; font-weight:600; color:#0f172a; }
.option-desc { margin:0.2rem 0 0; font-size:0.85rem; color:#6b7280; }
.option-pill { font-size:0.8rem; border-radius:999px; border:1px solid #cbd5f5; padding:0.2rem 0.6rem; color:#334155; }
.measurement-option:hover { border-color:#16a34a; box-shadow:0 4px 12px rgba(22,163,74,0.18); transform:translateY(-1px); }
.measurement-option.selected { border-color:#16a34a; box-shadow:0 6px 16px rgba(22,163,74,0.22); }
.measurement-option.selected .option-pill { border-color:#16a34a; color:#16a34a; }
.measurement-detail-shell { max-width:520px; margin:0 auto; display:flex; flex-direction:column; gap:1.2rem; }
.language-settings { gap:1.2rem; }
.language-hero { background:linear-gradient(120deg,#0f172a,#14532d 65%,#1abc9c); border-radius:28px; padding:1.4rem 1.6rem; color:#ecfdf5; display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; box-shadow:0 25px 55px -32px rgba(15,23,42,0.8); margin-bottom:1.2rem; }
.language-eyebrow { text-transform:uppercase; letter-spacing:0.25em; font-size:0.72rem; opacity:0.8; margin:0 0 0.35rem; }
.language-hero h2 { margin:0 0 0.3rem; font-size:1.6rem; }
.language-hero p { margin:0; line-height:1.35; }
.language-meta { display:flex; flex-direction:column; align-items:flex-end; gap:0.25rem; text-align:right; }
.language-meta-pill { background:rgba(15,23,42,0.25); border:1px solid rgba(236,253,245,0.35); border-radius:999px; padding:0.2rem 0.85rem; font-weight:600; letter-spacing:0.2em; }
.language-list { list-style:none; padding:0; margin:0 0 0.6rem; display:flex; flex-direction:column; gap:0.8rem; }
.language-option { border:1px solid rgba(15,23,42,0.08); border-radius:18px; padding:0.95rem 1rem; box-shadow:0 15px 40px -30px rgba(15,23,42,0.65); cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; background:#fff; }
.language-option:hover { transform:translateY(-2px); box-shadow:0 25px 45px -35px rgba(15,23,42,0.7); }
.language-option.selected { border-color:#16a34a; box-shadow:0 25px 50px -30px rgba(34,197,94,0.45); }
.language-option-header { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; }
.language-native { font-size:1.2rem; font-weight:700; }
.language-pill { border-radius:999px; border:1px solid rgba(15,23,42,0.15); padding:0.1rem 0.6rem; font-size:0.8rem; font-weight:600; color:#0f172a; }
.language-english { margin:0.2rem 0 0; font-size:1rem; font-weight:600; color:#0f172a; }
.language-desc { margin:0.15rem 0 0; color:#6b7280; font-size:0.9rem; }
.measurement-detail-card { position:relative; background:#fff; border-radius:24px; padding:1.4rem 1.5rem 1.6rem; border:1px solid rgba(20,102,86,0.15); box-shadow:0 30px 55px -40px rgba(15,23,42,0.55); overflow:hidden; }
.measurement-detail-card::before { content:''; position:absolute; inset:-20% 20% auto -10%; height:220px; background:radial-gradient(circle at top, rgba(82,214,123,0.35), transparent 70%); pointer-events:none; }
.measurement-detail-card > * { position:relative; }
.measurement-detail-header { display:flex; align-items:flex-start; gap:1rem; }
.measurement-detail-header h2 { margin:0; font-size:1.85rem; font-weight:600; color:#0f172a; }
.detail-copy { flex:1; display:flex; flex-direction:column; gap:0.2rem; }
.detail-icon { width:64px; height:64px; border-radius:20px; background:linear-gradient(140deg,#0f4d42,#22c55e); color:#fff; display:flex; align-items:center; justify-content:center; font-size:2rem; box-shadow:0 12px 24px -10px rgba(34,197,94,0.7); }
.detail-eyebrow { margin:0; text-transform:uppercase; font-size:0.75rem; letter-spacing:0.22em; color:#6b7280; }
.detail-sub { margin:0; color:#6b7280; font-size:0.95rem; line-height:1.3; }
.detail-pill { align-self:flex-start; background:rgba(34,197,94,0.12); color:#15803d; border-radius:999px; padding:0.28rem 0.7rem; font-size:clamp(0.62rem, 1.6vw, 0.72rem); font-weight:600; border:1px solid rgba(34,197,94,0.4); display:inline-flex; align-items:center; justify-content:center; min-height:24px; white-space:nowrap; max-width:100%; overflow:visible; text-overflow:unset; letter-spacing:0.02em; }
.measurement-divider { height:1px; width:100%; background:#e2e8f0; margin:1.15rem 0; }
.measurement-divider.rich { height:2px; background:linear-gradient(90deg, rgba(34,197,94,0), rgba(34,197,94,0.8), rgba(34,197,94,0)); border-radius:999px; }
.measurement-radio-option:focus-visible { outline:3px solid var(--focus-ring); outline-offset:4px; }
.radio-indicator { width:38px; height:38px; border-radius:50%; border:2px solid #cbd5f5; display:flex; align-items:center; justify-content:center; background:#fff; transition:border-color .2s ease, box-shadow .2s ease, background .2s ease; box-shadow:0 4px 10px rgba(15,23,42,0.08); }
.radio-dot { width:18px; height:18px; border-radius:50%; background:transparent; transition:background .2s ease, transform .2s ease; }
.measurement-radio-list { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:0.75rem; }
.measurement-radio-option { display:flex; align-items:center; gap:0.9rem; padding:0.8rem 0.9rem; border-radius:16px; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .2s ease; border:1px solid transparent; min-height:100%; }
.measurement-radio-option:hover { transform:translateY(-2px); box-shadow:0 12px 18px -14px rgba(15,23,42,0.6); }
.measurement-radio-option.selected { background:linear-gradient(135deg, rgba(34,197,94,0.08), rgba(34,197,94,0.15)); border-color:rgba(34,197,94,0.4); box-shadow:0 20px 35px -28px rgba(34,197,94,0.9); }
.measurement-radio-option.selected .radio-indicator { border-color:#16a34a; background:rgba(22,163,74,0.12); box-shadow:0 0 0 4px rgba(34,197,94,0.18); }
.measurement-radio-option.selected .radio-dot { background:#16a34a; transform:scale(1.1); }
.radio-text { display:flex; flex-direction:column; gap:0.2rem; }
.radio-label { margin:0; font-size:1.05rem; font-weight:600; color:#0f172a; }
.radio-desc { margin:0; font-size:0.85rem; color:#6b7280; }
.detail-hint { margin:1rem 0 0; font-size:0.85rem; color:#64748b; text-align:right; }
.network-shell { max-width:520px; margin:0 auto; display:flex; flex-direction:column; gap:1rem; padding-bottom:2rem; }
.network-shell--compact { max-width:720px; padding:1.5rem 1rem 2rem; }
.network-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:1.2rem; }
.network-hero { background:linear-gradient(120deg,#0f4d42,#22c55e); border-radius:26px; padding:1.4rem 1.5rem; color:#ecfdf5; display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; box-shadow:0 24px 55px -30px rgba(15,77,66,0.8); }
.wifi-hero { position:relative; overflow:hidden; }
.wifi-hero::after { content:''; position:absolute; inset:auto -20% -80% auto; width:220px; height:220px; background:radial-gradient(circle, rgba(236,253,245,0.45), transparent 70%); pointer-events:none; }
.wifi-hero-copy { display:flex; flex-direction:column; gap:0.25rem; position:relative; }
.wifi-status-text { margin:0; font-size:0.95rem; color:#c7f9cc; opacity:0.9; }
.network-hero h2 { margin:0.1rem 0 0.3rem; font-size:1.55rem; }
.network-hero p { margin:0; line-height:1.35; max-width:360px; }
.network-hero-meta { display:flex; flex-direction:column; gap:0.4rem; align-items:flex-end; }
.wifi-hero-meta { position:relative; }
.wifi-meta-pill { min-width:140px; border-radius:16px; border:1px solid rgba(236,253,245,0.35); padding:0.5rem 0.9rem; background:rgba(15,23,42,0.25); display:flex; flex-direction:column; gap:0.15rem; text-align:right; box-shadow:0 18px 38px -30px rgba(12,83,66,0.9); }
.wifi-meta-label { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.24em; color:#cbd5f5; }
.wifi-meta-value { font-size:1.05rem; font-weight:700; color:#ecfdf5; }
.network-card { background:#fff; border-radius:24px; border:1px solid rgba(15,23,42,0.08); box-shadow:0 20px 50px -36px rgba(15,23,42,0.35); padding:1.2rem 1.3rem 1.4rem; display:flex; flex-direction:column; gap:1rem; }
.wifi-panel--pro { padding:1.5rem; gap:1.2rem; }
.wifi-quick-stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:0.85rem; }
.wifi-stat { border:1px solid rgba(15,23,42,0.08); border-radius:18px; padding:0.75rem 0.95rem; background:#f8fafc; box-shadow:inset 0 1px 4px rgba(15,23,42,0.06); }
.wifi-stat-label { display:block; margin:0 0 0.25rem; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.2em; color:#94a3b8; }
.wifi-stat-value { font-size:1rem; font-weight:600; color:#0f172a; }
.network-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.network-row--headline { flex-wrap:wrap; }
.network-label { margin:0; font-size:0.85rem; text-transform:uppercase; letter-spacing:0.18em; color:#94a3b8; }
.network-value { margin:0.2rem 0 0; font-size:1.25rem; font-weight:600; color:#0f172a; }
.network-hint { margin:0.2rem 0 0; font-size:0.85rem; color:#6b7280; }
.connection-card { min-height:100%; }
.connection-card-main { align-items:flex-start; }
.connection-actions { display:flex; gap:0.5rem; flex-wrap:wrap; justify-content:flex-end; }
.connection-status-row { border-top:1px solid #e2e8f0; padding-top:0.85rem; font-weight:600; color:#0f172a; gap:0.75rem; }
.connection-status-text { flex:1; }
.connection-signal { color:#16a34a; font-weight:600; font-size:0.95rem; }
.network-divider { height:1px; background:#e2e8f0; border-radius:999px; }
.network-info { list-style:none; padding:0; margin:0; border:1px solid #e5e7eb; border-radius:18px; overflow:hidden; }
.network-info li { display:flex; justify-content:space-between; align-items:center; padding:0.85rem 1rem; background:#f9fafb; border-bottom:1px solid #e5e7eb; }
.network-info li:nth-child(even) { background:#fff; }
.network-info li:last-child { border-bottom:none; }
.network-info-label { font-size:0.9rem; color:#6b7280; }
.network-info-value { font-size:1rem; font-weight:600; color:#111827; }
.network-row--actions { justify-content:flex-end; }
.network-btn { border:none; border-radius:999px; padding:0.55rem 1.2rem; font-weight:600; cursor:pointer; font-size:0.95rem; transition:transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.network-btn.primary { background:var(--primary-500); color:#fff; box-shadow:0 10px 20px -10px rgba(20,102,86,0.8); }
.network-btn.outline { background:transparent; color:var(--primary-500); border:1px solid rgba(20,102,86,0.35); }
.network-btn.danger { background:#dc2626; color:#fff; box-shadow:0 12px 24px -12px rgba(220,38,38,0.6); }
.network-btn:hover { transform:translateY(-1px); filter:brightness(1.03); }
.network-selector { display:none; flex-direction:column; gap:0.5rem; padding:0.8rem 0 0.2rem; }
.network-selector.open { display:flex; }
.network-selector-option { border:1px solid rgba(255,255,255,0.08); border-radius:999px; background:#1f2937; color:#f3f4f6; padding:0.4rem 0.85rem; display:flex; align-items:center; gap:0.65rem; cursor:pointer; transition:transform .15s ease, background .15s ease, border-color .15s ease; }
.network-selector-option + .network-selector-option { margin-top:0.4rem; }
.network-selector-option:hover { transform:translateY(-1px); }
.network-selector-option.active { background:#111827; border-color:#10b981; }
.selector-indicator { width:34px; height:34px; border-radius:50%; border:2px solid #fff; display:flex; align-items:center; justify-content:center; background:#c7cfd6; }
.selector-indicator span { width:18px; height:18px; border-radius:50%; background:transparent; }
.network-selector-option.active .selector-indicator { border-color:#16a34a; background:#d1fae5; }
.network-selector-option.active .selector-indicator span { background:#16a34a; }
.selector-copy { display:flex; flex-direction:column; gap:0.15rem; }
.selector-label { margin:0; font-weight:600; font-size:0.95rem; }
.selector-desc { margin:0; font-size:0.8rem; color:#cbd5f5; }
.network-feedback { min-height:1.2rem; text-align:center; font-weight:600; font-size:0.92rem; color:var(--muted); }
.network-feedback[data-tone="success"] { color:#15803d; }
.network-feedback[data-tone="warn"] { color:#b45309; }
.network-feedback[data-tone="neutral"],
.network-feedback[data-tone="info"] { color:#0f172a; }
.network-actions-bar { display:flex; gap:0.85rem; align-items:center; justify-content:space-between; }
.network-actions-bar .network-btn { flex:1; }
.network-actions-bar .network-btn.action-wide { padding:0.85rem 1.2rem; font-size:1rem; box-shadow:0 16px 32px -22px rgba(15,23,42,0.4); }
.network-card.connection-card,
.network-card.wifi-panel { min-height:280px; }
.wifi-panel-header { display:flex; align-items:center; justify-content:space-between; }
.wifi-network-list { list-style:none; margin:0.75rem 0 0; padding:0; border:1px solid #e2e8f0; border-radius:20px; overflow:hidden; background:#fff; max-height:230px; overflow-y:auto; }
.wifi-network-item { display:flex; align-items:center; justify-content:space-between; gap:0.8rem; padding:0.85rem 1rem; border-bottom:1px solid #e2e8f0; cursor:pointer; transition:background .15s ease, color .15s ease; }
.wifi-network-item:last-child { border-bottom:none; }
.wifi-network-item.active { background:linear-gradient(135deg, rgba(34,197,94,0.15), rgba(34,197,94,0.28)); color:#064e3b; box-shadow:inset 0 0 0 1px rgba(34,197,94,0.35); }
.wifi-network-item:focus-visible { outline:3px solid var(--focus-ring); outline-offset:-3px; }
.wifi-network-body { display:flex; flex-direction:column; gap:0.15rem; }
.wifi-network-meta { display:flex; align-items:center; flex-wrap:wrap; gap:0.45rem; font-size:0.78rem; color:#64748b; }
.wifi-ssid { font-weight:600; color:#0f172a; }
.wifi-signal { font-size:0.85rem; color:#64748b; }
.wifi-network-item.active .wifi-ssid { color:#064e3b; }
.wifi-network-item.active .wifi-signal { color:#065f46; }
.wifi-security { border:1px solid #cbd5f5; border-radius:999px; padding:0 0.6rem; text-transform:uppercase; letter-spacing:0.12em; font-size:0.72rem; color:#0f172a; background:#f8fafc; }
.wifi-network-item.active .wifi-security { border-color:#16a34a; color:#065f46; background:rgba(34,197,94,0.12); }
.wifi-select-indicator { width:32px; text-align:right; color:#16a34a; font-size:1.1rem; font-weight:700; }
.wifi-network-empty { padding:0.9rem; text-align:center; color:#94a3b8; }
.password-label { margin-top:1.2rem; display:block; }
.password-field { display:flex; align-items:center; gap:0.4rem; border:1px solid rgba(15,23,42,0.08); border-radius:999px; padding:0.4rem 0.85rem; background:#f8fafc; box-shadow:inset 0 1px 4px rgba(15,23,42,0.08); transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.password-field:focus-within { border-color:#16a34a; box-shadow:0 0 0 3px rgba(34,197,94,0.18); background:#fff; }
.password-icon { font-size:1rem; color:#0f172a; }
.wifi-password-input { flex:1; border:none; background:transparent; font-size:1rem; color:#0f172a; }
.wifi-password-input:focus { outline:none; }
.password-toggle { border:none; background:transparent; color:#16a34a; font-weight:600; cursor:pointer; padding:0.2rem 0.4rem; border-radius:12px; }
.password-toggle:hover { color:#065f46; }
.network-shell--compact .subpage-actions { padding-top:0.5rem; }
.network-shell--compact .subpage-back { margin-left:auto; }
.network-shell--compact #network-feedback { min-height:1.4rem; }
@media (max-width:540px) {
    .network-row { flex-direction:column; align-items:flex-start; }
    .network-row--actions { align-items:center; width:100%; }
    .network-btn { width:100%; text-align:center; }
    .network-hero { flex-direction:column; }
    .network-hero-meta { flex-direction:row; align-self:stretch; justify-content:flex-end; }
    .network-actions-bar { flex-direction:column; }
}

/* Time settings detail screen */
.time-settings-shell { max-width: 420px; margin: 0 auto; border-radius: 30px; border: 2px solid #cbd5c0; overflow: hidden; background: #fff; box-shadow: 0 20px 50px -18px rgba(0,0,0,0.25); position: relative; }
.time-settings-card { padding: 1.2rem 1.4rem 1.5rem; }
.time-settings-card h3 { margin: 0 0 0.15rem; text-align:center; font-weight:600; }
.time-card-sub { margin:0; text-align:center; color:#6b7280; font-size:0.9rem; }
.time-divider { height:1px; background:#e5e7eb; margin:1rem 0; }
.timezone-selector { margin:0.8rem 0 1.2rem; border:1px solid rgba(15,23,42,0.08); border-radius:22px; padding:0.9rem 1rem 1rem; background:#f8fafc; display:none; flex-direction:column; gap:0.6rem; box-shadow:inset 0 1px 6px rgba(15,23,42,0.05); }
.timezone-selector.visible { display:flex; animation:fadeSlide 0.2s ease; }
.timezone-label { margin:0; font-size:0.85rem; font-weight:600; color:#0f172a; }
.timezone-trigger { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; border-radius:16px; border:1px solid rgba(15,23,42,0.15); padding:0.6rem 0.9rem; background:#fff; cursor:pointer; font-weight:600; color:#0f172a; }
.timezone-trigger.disabled { opacity:0.5; pointer-events:none; }
.timezone-trigger-icon { font-size:0.9rem; }
.timezone-list { list-style:none; margin:0; padding:0.4rem; border-radius:18px; border:1px solid rgba(15,23,42,0.08); background:#fff; box-shadow:0 15px 40px -30px rgba(0,0,0,0.6); display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:0.35rem; max-height:240px; overflow:auto; }
.timezone-option { width:100%; border:none; border-radius:14px; padding:0.7rem 0.9rem; text-align:left; background:#f1f5f9; cursor:pointer; display:flex; flex-direction:column; gap:0.2rem; transition:transform .15s ease, background .15s ease, color .15s ease; font-size:0.95rem; color:#0f172a; }
.timezone-option:hover { transform:translateY(-1px); background:#e2e8f0; }
.timezone-option.active { background:#d1fae5; color:#065f46; box-shadow:0 10px 25px -18px rgba(16,185,129,0.7); }
.timezone-option-label { font-weight:600; }
.timezone-option-offset { font-size:0.85rem; color:#64748b; }
.timezone-selector [data-selected-timezone] { font-weight:600; }
.timezone-selector[hidden] { display:none !important; }
.timezone-list[hidden] { display:none !important; }
.time-columns { display:grid; grid-template-columns: repeat(2, minmax(140px,1fr)); gap:1rem; }
.time-column-title { font-size:0.85rem; color:#6b7280; display:block; margin-bottom:0.5rem; text-align:center; }
.time-input-row { display:flex; align-items:center; justify-content:center; gap:0.35rem; }
.time-separator { font-size:1.4rem; color:#9ca3af; }
.time-input { width:60px; text-align:center; border:none; border-bottom:2px solid #7ccf4d; font-size:1.4rem; font-weight:600; padding:0.2rem 0; background:transparent; color:#1f2937; }
.time-input.long { width:86px; }
.time-input:focus { outline:none; border-bottom-color: var(--primary-500); }
.time-input:disabled { opacity:0.45; border-bottom-color:#d1d5db; }
.time-toggle-row { display:flex; align-items:center; justify-content:space-between; background:#f5f8f4; padding:0.8rem 1rem; border-radius:16px; gap:1rem; }
.toggle-title { margin:0; font-weight:600; }
.toggle-desc { margin:0.2rem 0 0; color:#6b7280; font-size:0.85rem; }
.toggle-shell { position:relative; width:52px; height:28px; display:inline-block; }
.toggle-shell input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; inset:0; background:#d1d5db; border-radius:999px; transition:background 0.2s ease; }
.toggle-slider::after { content:''; position:absolute; width:22px; height:22px; left:3px; top:3px; background:#fff; border-radius:50%; transition: transform 0.2s ease; box-shadow:0 2px 6px rgba(0,0,0,0.2); }
.toggle-shell input:checked + .toggle-slider { background:#34d399; }
.toggle-shell input:checked + .toggle-slider::after { transform: translateX(24px); }
.time-meta-row { display:flex; align-items:center; gap:0.75rem; margin:1rem 0 0.5rem; }
.time-refresh-btn { width:40px; height:40px; border-radius:50%; border:1px solid #d1d5db; background:#fff; font-size:1.1rem; cursor:pointer; box-shadow:var(--shadow-sm); }
.time-refresh-btn:disabled { opacity:0.5; cursor:not-allowed; }
.time-refresh-btn:disabled:hover { transform:none; box-shadow:var(--shadow-sm); }
.time-meta-copy { display:flex; flex-direction:column; gap:0.2rem; }
.time-meta-title { margin:0; font-size:0.85rem; color:#6b7280; }
.time-meta-desc { margin:0; font-size:0.95rem; font-weight:600; color:#1f2937; }
.time-status { text-align:center; min-height:1.2rem; font-size:0.95rem; color: var(--primary-500); margin-top:0.4rem; }
.time-actions { display:flex; align-items:center; justify-content:space-between; margin-top:1.2rem; }
.time-back-btn,
.time-confirm-btn { width:54px; height:54px; border-radius:50%; border:2px solid #d1d5db; background:#fff; font-size:1.4rem; cursor:pointer; box-shadow:var(--shadow-sm); }
.time-confirm-btn { color:#2fb344; border-color:#2fb344; }
.time-back-btn:hover,
.time-confirm-btn:hover,
.time-refresh-btn:hover { transform:translateY(-1px); box-shadow:var(--shadow-md); }
.time-back-btn:focus-visible,
.time-confirm-btn:focus-visible,
.time-refresh-btn:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }

@media (max-width: 520px) {
    .time-settings-shell { border-radius: 0; border-width:0; box-shadow:none; }
    .time-columns { grid-template-columns: 1fr; }
}