/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* iOS Safari's rubber-band overscroll drags the whole document past its own
   content and reveals whatever sits behind it - without an explicit
   background here, that's the browser's default white, showing as a
   persistent band above/below the page during (and briefly after) a bounce.
   Giving html the same background as body removes that seam; the
   overscroll-behavior below stops the bounce itself on browsers that honor
   it (iOS Safari does not yet, hence needing the background fix too). */
html {
    background: linear-gradient(135deg, #0c0c0c 0%, #1a1a1a 50%, #0c0c0c 100%);
    overscroll-behavior: none;
}

body {
    background: linear-gradient(135deg, #0c0c0c 0%, #1a1a1a 50%, #0c0c0c 100%);
    font-family: 'Arial', sans-serif;
    min-height: 100vh;
    color: #ffffff;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    overscroll-behavior: none;
}

/* Container Styles */
.container {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    max-width: 400px;
    width: 90%;
    margin: 20px auto;
}

/* Logo Styles */
.logo {
    background-image: var(--grad);
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    font-size: clamp(3rem, 25vw, 8rem);
    margin-bottom: 2rem;
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 8s linear infinite;
    text-align: center;
}

/* Basic heading styles */
h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
    text-align: center;
}

@keyframes gradientShift {
    0%   { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

/* Button Styles */
.btn, button {
    display: block;
    width: 100%;
    padding: 1.2rem 1rem;
    background: linear-gradient(135deg, #333 0%, #555 100%);
    color: white;
    text-decoration: none;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    margin-bottom: 1rem;
}

.btn:hover, button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.4);
}

.btn:active, button:active {
    transform: translateY(0);
}

.btn:disabled, button:disabled {
    background: linear-gradient(135deg, #666 0%, #777 100%);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Button Variants */
.btn.next, button.primary {
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
}

.btn.hold, button.scan-btn {
    background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
}

.btn.off, button.reset-btn {
    background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
}

.btn.on {
    background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
}

.btn.hold.holding {
    background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
}

.btn.white {
    background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
    color: #333;
}

button.reset-btn {
    font-size: 0.9rem;
    padding: 0.8rem 1rem;
}

/* Form Styles */
.form-group {
    margin-bottom: 1.5rem;
}

label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
    color: #ccc;
    font-size: 0.9rem;
}

input[type="text"],
input[type="password"],
input[type="time"],
input[type="number"],
select {
    width: 100%;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    /* 16px (not 1rem/smaller) so iOS Safari does not zoom the viewport when a
       field is focused - see the captive-portal notes in device-name.js. */
    font-size: 16px;
    transition: all 0.3s ease;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="time"]:focus,
input[type="number"]:focus,
select:focus {
    outline: none;
    border-color: #4CAF50;
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}

input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* Styled <select> / text-input variant shared by the effect dropdown
   (controls page), the model dropdown (Advanced page) and the device-name
   field (device-name page). */
.model-select {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: white;
    padding: 0.8rem;
    font-family: inherit;
    /* 16px, same iOS no-zoom reason as the rule above. */
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='white' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

input.model-select {
    cursor: text;
    background-image: none;
    padding-right: 0.8rem;
}

.model-select:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.model-select:focus {
    outline: none;
    border-color: #4CAF50;
    background: rgba(255, 255, 255, 0.1);
}

.model-select option {
    background: #1a1a1a;
    color: white;
    padding: 0.5rem;
}

/* Status Messages */
.status {
    margin: 1rem 0;
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    font-size: 0.9rem;
}

.status.loading {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.status.error {
    background: rgba(244, 67, 54, 0.2);
    color: #f44336;
    border: 1px solid rgba(244, 67, 54, 0.3);
}

.status.success {
    background: rgba(76, 175, 80, 0.2);
    color: #4CAF50;
    border: 1px solid rgba(76, 175, 80, 0.3);
}

/* Ripple Effect */
@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Responsive Design */
@media (max-width: 480px) {
    .container {
        padding: 1.5rem;
        margin: 10px auto;
    }

    h1 {
        font-size: 2.5rem;
    }

    .btn, button {
        padding: 1rem 0.8rem;
        font-size: 1rem;
    }

    .color-wheel-wrapper {
        width: 70vw;
        height: 70vw;
        max-width: 250px;
        max-height: 250px;
        margin: 1.5rem auto;
    }
}

/* ---------------------------------------------------------------------------
   Icon system. Monochrome glyphs painted with the element's own currentColor
   through a CSS mask, so an icon inherits its button's text colour in every
   state (hover / active / disabled / .ws-disconnected) exactly like the inline
   <svg fill="currentColor"> icons on the control page already do. Each glyph
   is a data-URI - the same "an icon in CSS without a server route" technique
   as .model-select's dropdown caret above - so no new file, route, or
   STATIC_FILES entry is involved.

   Markup pattern for a control whose visible label becomes an icon:
       <button ... title="Foo">
           <span class="icon icon-foo" aria-hidden="true"></span>
           <span class="visually-hidden">Foo</span>
       </button>
   The .visually-hidden span keeps the accessible name; JS keeps keying off
   data-* attributes / ids, never the text.

   Scoped to span.icon on purpose: the control page already has inline
   <svg class="icon"> buttons (hold / next / power) whose glyph is a
   real <path>, and background-color:currentColor here would paint their whole
   box solid. Those keep their existing markup; only the new mask glyphs are
   spans.
   --------------------------------------------------------------------------- */
span.icon {
    display: inline-block;
    width: 1.4em;
    height: 1.4em;
    flex: none;
    background-color: currentColor;
    -webkit-mask: var(--icon) no-repeat center / contain;
            mask: var(--icon) no-repeat center / contain;
    vertical-align: -0.25em;
}

/* Visible to assistive tech, invisible on screen - for the label text left in
   the DOM after its control becomes icon-only. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.icon-random     { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M10.59 9.17L5.41 4 4 5.41l5.17 5.17 1.42-1.41zM14.5 4l2.04 2.04L4 18.59 5.41 20 17.96 7.46 20 9.5V4h-5.5zm.33 9.41l-1.41 1.41 3.13 3.13L14.5 20H20v-5.5l-2.04 2.04-3.13-3.13z'/%3E%3C/svg%3E"); }
.icon-effect     { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M7.5 5.6L10 7 8.6 4.5 10 2 7.5 3.4 5 2l1.4 2.5L5 7zm12 9.8L17 14l1.4 2.5L17 19l2.5-1.4L22 19l-1.4-2.5L22 14zM22 2l-2.5 1.4L17 2l1.4 2.5L17 7l2.5-1.4L22 7l-1.4-2.5zm-7.63 5.29a.996.996 0 0 0-1.41 0L1.29 18.96c-.39.39-.39 1.02 0 1.41l2.34 2.34c.39.39 1.02.39 1.41 0L18.7 11.05c.39-.39.39-1.02 0-1.41l-4.33-4.35zm-1.03 5.49l-2.12-2.12 2.44-2.44 2.12 2.12-2.44 2.44z'/%3E%3C/svg%3E"); }
.icon-color      { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2C6.49 2 2 6.49 2 12s4.49 10 10 10c1.38 0 2.5-1.12 2.5-2.5 0-.61-.23-1.2-.64-1.67-.08-.1-.13-.21-.13-.33 0-.28.22-.5.5-.5H16c3.31 0 6-2.69 6-6 0-4.96-4.49-9-10-9zm5.5 11c-.83 0-1.5-.67-1.5-1.5S16.67 10 17.5 10s1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm-3-4C13.67 9 13 8.33 13 7.5S13.67 6 14.5 6s1.5.67 1.5 1.5S15.33 9 14.5 9zM9 8c-.83 0-1.5-.67-1.5-1.5S8.17 5 9 5s1.5.67 1.5 1.5S9.83 8 9 8zm-3.5 4c-.83 0-1.5-.67-1.5-1.5S4.67 9 5.5 9 7 9.67 7 10.5 6.33 12 5.5 12z'/%3E%3C/svg%3E"); }
.icon-sliders    { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z'/%3E%3C/svg%3E"); }
.icon-pen        { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E"); }
.icon-wifi       { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z'/%3E%3C/svg%3E"); }
.icon-info       { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E"); }
.icon-back       { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z'/%3E%3C/svg%3E"); }
.icon-logs       { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z'/%3E%3C/svg%3E"); }
.icon-restart    { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 5V2L8 6l4 4V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z'/%3E%3C/svg%3E"); }
.icon-search     { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E"); }
.icon-download   { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z'/%3E%3C/svg%3E"); }
.icon-refresh    { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E"); }
.icon-radar      { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M19.07 4.93l-1.41 1.41A7.94 7.94 0 0 1 20 12c0 4.42-3.58 8-8 8s-8-3.58-8-8c0-4.08 3.05-7.44 7-7.93v2.02C10.16 6.57 8 9.03 8 12c0 3.31 2.69 6 6 6s6-2.69 6-6c0-1.66-.67-3.16-1.76-4.24l-1.42 1.42A3.96 3.96 0 0 1 18 12c0 2.21-1.79 4-4 4s-4-1.79-4-4c0-1.86 1.28-3.41 3-3.86v2.14A2 2 0 0 0 14 14a2 2 0 0 0 2-2c0-.74-.4-1.38-1-1.72V2h-1C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10c0-2.76-1.12-5.26-2.93-7.07z'/%3E%3C/svg%3E"); }
.icon-link       { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z'/%3E%3C/svg%3E"); }
/* Unlike the other icons here, the ring needs two circle subpaths wound opposite ways to
   actually cut a hole (nonzero fill rule) - a single circle path plus a hands path just draws a
   solid filled disc with the hands invisibly buried inside it (#331 shipped that version). */
.icon-clock      { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E"); }
.icon-trash      { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/%3E%3C/svg%3E"); }
.icon-eye        { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E"); }
.icon-eye-off    { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z'/%3E%3C/svg%3E"); }
.icon-lock       { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM12 17c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E"); }
.icon-lock-open  { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 17c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6-9h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6h1.9c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E"); }
.icon-settings   { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.488.488 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z'/%3E%3C/svg%3E"); }

/* -- Time & Schedule (#74, icon UI) ---------------------------------------
   The additional glyphs the Time & Schedule page uses now that its section
   headings and its rule editor's kind/action pickers are icon-only. Same mask
   pattern as the block above: an opaque white path on a transparent field, the
   fill being irrelevant because only the alpha channel is used. Two of these
   carry a meaning the page's own state also encodes - .icon-power-off's slash
   is a second path, and .icon-lat/.icon-lon are the same double-headed arrow
   rotated, so the latitude field cannot be mistaken for the longitude one
   (they shipped with an identical pin until this change). */
.icon-reset      { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62A5.98 5.98 0 0 1 12.5 10c3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z'/%3E%3C/svg%3E"); }
.icon-globe      { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1 17.93A8 8 0 0 1 4 11c0-.77.11-1.52.31-2.23L9 13.46v1.04a2 2 0 0 0 2 2v3.43zm6.9-2.54A2 2 0 0 0 16 16h-1v-3a1 1 0 0 0-1-1H8v-2h2a1 1 0 0 0 1-1V7h2a2 2 0 0 0 2-2v-.41A8 8 0 0 1 17.9 17.39z'/%3E%3C/svg%3E"); }
.icon-pin        { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E"); }
.icon-lat        { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2 8.5 5.5h2.5v13H8.5L12 22l3.5-3.5H13v-13h2.5L12 2z'/%3E%3C/svg%3E"); }
.icon-lon        { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M2 12l3.5-3.5V11h13V8.5L22 12l-3.5 3.5V13h-13v2.5L2 12z'/%3E%3C/svg%3E"); }
.icon-sun        { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M6.76 4.84 4.96 3.05 3.55 4.46l1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7 1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5a6 6 0 1 0 0 12 6 6 0 0 0 0-12zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91 1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8z'/%3E%3C/svg%3E"); }
.icon-sunrise    { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 3l4.6 5h-3.1v4h-3V8H7.4L12 3zM2 19h20v2H2zM4.6 12.5l1.4 1.4-2.1 2.1-1.4-1.4zM19.4 12.5l2.1 2.1-1.4 1.4-2.1-2.1z'/%3E%3C/svg%3E"); }
.icon-sunset     { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 15l4.6-5h-3.1V6h-3v4H7.4L12 15zM2 19h20v2H2zM4.6 12.5l1.4 1.4-2.1 2.1-1.4-1.4zM19.4 12.5l2.1 2.1-1.4 1.4-2.1-2.1z'/%3E%3C/svg%3E"); }
.icon-sun-off    { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 6a6 6 0 0 1 6 6c0 .7-.12 1.37-.34 2l3.05 3.05A11.9 11.9 0 0 0 22 12a10 10 0 0 0-16.2-8.02l1.46 1.46A9.9 9.9 0 0 1 12 6zM2 4.27l3.5 3.5A9.9 9.9 0 0 0 2 12a10 10 0 0 0 16.72 7.74L21 22l1.27-1.27L3.27 3 2 4.27zM12 18a6 6 0 0 1-5.66-4h2.11l5.5 5.5c-.6.32-1.27.5-1.95.5z'/%3E%3C/svg%3E"); }
.icon-calendar   { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-1V1h-2zm3 18H5V8h14v11z'/%3E%3C/svg%3E"); }
.icon-plus       { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E"); }
.icon-check      { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E"); }
.icon-save       { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M17 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V7l-4-4zm-5 16a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm3-10H5V5h10v4z'/%3E%3C/svg%3E"); }
.icon-bolt       { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M7 2v11h3v9l7-12h-4l4-8z'/%3E%3C/svg%3E"); }
.icon-power-on   { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M13 3h-2v10h2V3zm4.83 2.17-1.42 1.42A6.92 6.92 0 0 1 19 12a7 7 0 1 1-11.41-5.41L6.17 5.17A8.93 8.93 0 0 0 3 12a9 9 0 1 0 9-9 8.93 8.93 0 0 0-3.17 6.83z'/%3E%3C/svg%3E"); }
.icon-power-off  { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M13 3h-2v10h2V3zm4.83 2.17-1.42 1.42A6.92 6.92 0 0 1 19 12a7 7 0 1 1-11.41-5.41L6.17 5.17A8.93 8.93 0 0 0 3 12a9 9 0 1 0 9-9 8.93 8.93 0 0 0-3.17 6.83z'/%3E%3Cpath d='M3.4 2 2 3.4l18.6 18.6 1.4-1.4z'/%3E%3C/svg%3E"); }
/* ---------------------------------------------------------------------------
   Colour wheel (shared). The controls page's Colour tab and the Time &
   Schedule page's rule colour picker both render this exact markup - see
   js/color-wheel.js, which drives the canvas/selector. It lives in common.css
   because both pages load it, rather than duplicating the rules into each
   page's stylesheet.
   --------------------------------------------------------------------------- */
.color-wheel-content {
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.color-wheel-wrapper {
    position: relative;
    width: 240px;
    height: 240px;
    margin: 1.5rem 0;
}

.color-wheel {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    cursor: crosshair;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.color-selector {
    position: absolute;
    width: 24px;
    height: 24px;
    border: 3px solid white;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5),
                inset 0 0 0 2px rgba(0, 0, 0, 0.3);
    transition: transform 0.1s ease;
}

.color-preview {
    width: 100%;
    height: 50px;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    margin-bottom: 1rem;
}

.color-info-toggle {
    width: 100%;
    cursor: pointer;
    margin-bottom: 0.5rem;
    text-align: center;
}

.color-info {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    font-family: 'Courier New', monospace;
}

.color-histogram {
    display: flex;
    width: 100%;
    height: 50px;
    flex-direction: column;
    justify-content: space-around;
    box-sizing: border-box;
    padding: 2px 0;
}

/* Histogram is the default view; clicking reveals the RGB values instead. */
.color-info-toggle .color-info {
    display: none;
}

.color-info-toggle.showing-rgb .color-info {
    display: block;
}

.color-info-toggle.showing-rgb .color-histogram {
    display: none;
}

.histogram-row {
    display: flex;
    align-items: center;
}

.histogram-track {
    position: relative;
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
}

.histogram-fill {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 3px;
    border-radius: 2px;
    transition: width 0.15s ease;
}

.histogram-fill.r { background: #ff6b6b; }
.histogram-fill.g { background: #6bff6b; }
.histogram-fill.b { background: #6b6bff; }