:root {
        --tech-bg: #060914;
        --panel-bg: #0f1524;
        --panel-line: #2444ff;
        --surface: #111a2b;
        --surface-pressed: #07101f;
        --ink: #f3fbff;
        --muted: #93a7be;
        --neon-cyan: #00e7ff;
        --neon-lime: #b6ff28;
        --neon-pink: #ff2bd6;
        --shadow: rgba(0, 0, 0, .46);
      }
      * { box-sizing: border-box; }
      body {
        margin: 0;
        min-height: 100vh;
        min-height: 100dvh;
        background:
          radial-gradient(circle at 18% 0%, rgba(0,231,255,.14), transparent 38%),
          linear-gradient(155deg, #060914, #0b1020 58%, #090b16);
        color: var(--ink);
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        overflow-x: hidden;
      }
      main {
        width: 100%;
        max-width: 720px;
        margin: 0 auto;
        padding:
          max(18px, env(safe-area-inset-top))
          max(18px, env(safe-area-inset-right))
          max(18px, env(safe-area-inset-bottom))
          max(18px, env(safe-area-inset-left));
      }
      section {
        display: grid;
        gap: 14px;
        border: 1px solid var(--panel-line);
        border-radius: 10px;
        background:
          linear-gradient(145deg, rgba(0,231,255,.08), transparent 42%),
          var(--panel-bg);
        padding: 16px;
        box-shadow:
          0 24px 46px rgba(0,0,0,.48),
          0 0 0 1px rgba(0,231,255,.32) inset,
          0 0 24px rgba(0,231,255,.12);
      }
      h1, p { margin: 0; }
      h1 { font-size: 28px; }
      label { display: grid; gap: 6px; font-weight: 800; }
      textarea, button { font: inherit; }
      textarea {
        width: 100%;
        min-height: 96px;
        resize: vertical;
        border: 1px solid rgba(0,231,255,.38);
        border-radius: 8px;
        background: rgba(6,13,24,.84);
        color: var(--ink);
        padding: 10px;
        box-shadow:
          0 0 18px rgba(0,231,255,.12),
          0 1px 0 rgba(255,255,255,.10) inset;
      }
      .header-row,
      .current,
      .pending-box {
        display: flex;
        align-items: center;
      }
      .header-row {
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 16px;
        order: 20;
      }
      .header-row > div {
        flex: 1 1 240px;
      }
      .settings-link {
        display: inline-grid;
        place-items: center;
        min-height: 38px;
        border: 1px solid rgba(0,231,255,.56);
        border-radius: 4px;
        background: linear-gradient(135deg, rgba(0,231,255,.14), rgba(255,43,214,.10)), #07101f;
        color: var(--ink);
        font-size: 13px;
        font-weight: 900;
        padding: 0 14px;
        text-decoration: none;
        box-shadow:
          0 0 14px rgba(0,231,255,.22),
          inset 0 1px 0 rgba(255,255,255,.12);
      }
      [hidden] {
        display: none !important;
      }
      .language-select {
        min-height: 38px;
        border: 1px solid rgba(0,231,255,.56);
        border-radius: 4px;
        background: linear-gradient(135deg, rgba(0,231,255,.14), rgba(255,43,214,.10)), #07101f;
        color: var(--ink);
        font-size: 13px;
        font-weight: 900;
        padding: 0 10px;
        box-shadow:
          0 0 14px rgba(0,231,255,.22),
          inset 0 1px 0 rgba(255,255,255,.12);
      }
      .current {
        width: 100%;
        gap: 12px;
        border: 1px solid rgba(0,231,255,.42);
        border-radius: 8px;
        background:
          linear-gradient(135deg, rgba(0,231,255,.12), rgba(255,43,214,.08)),
          #08111f;
        padding: 14px;
        box-shadow:
          0 0 22px rgba(0,231,255,.18),
          0 8px 18px rgba(0,0,0,.34),
          4px 0 0 var(--neon-cyan) inset;
        color: inherit;
        font: inherit;
        text-align: left;
        cursor: pointer;
        transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
        -webkit-tap-highlight-color: transparent;
      }
      .current:hover {
        border-color: rgba(0,231,255,.70);
      }
      .current:active {
        transform: scale(.992);
      }
      .current:focus-visible {
        outline: 3px solid var(--neon-lime);
        outline-offset: 2px;
      }
      .current-content {
        display: grid;
        flex: 1 1 auto;
        gap: 2px;
        min-width: 0;
      }
      .current-heading {
        display: block;
        font-size: 28px;
        line-height: 1.2;
      }
      .current-refresh {
        display: grid;
        flex: 0 0 auto;
        justify-items: center;
        gap: 2px;
        color: var(--muted);
        font-size: 11px;
        font-weight: 800;
        white-space: nowrap;
      }
      .current-refresh-icon {
        display: block;
        color: var(--neon-cyan);
        font-size: 24px;
        line-height: 1;
        transform-origin: 50% 50%;
      }
      .current.is-refreshing .current-refresh-icon {
        animation: current-refresh-spin .65s linear infinite;
      }
      @keyframes current-refresh-spin {
        to { transform: rotate(360deg); }
      }
      .dot {
        width: 16px;
        height: 16px;
        aspect-ratio: 1;
        display: block;
        flex: 0 0 16px;
        border-radius: 50%;
        background: #767b80;
        box-shadow: 0 0 0 7px rgba(118,123,128,.16);
      }
      .status-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
      }
      .status-button {
        position: relative;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 44px minmax(2.5em, auto);
        justify-items: center;
        align-content: start;
        gap: 10px;
        overflow: hidden;
        min-height: 118px;
        border: 1px solid rgba(255,255,255,.20);
        border-radius: 8px;
        background:
          linear-gradient(145deg, rgba(255,255,255,.08), rgba(0,0,0,.24)),
          var(--surface);
        box-shadow:
          0 0 0 1px rgba(255,255,255,.08) inset,
          0 10px 16px rgba(0,0,0,.34),
          inset 0 1px 0 rgba(255,255,255,.16),
          inset 0 -8px 16px rgba(0,0,0,.22);
        text-align: center;
        padding: 16px 10px;
        cursor: pointer;
        transform: translateY(0);
        transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
        -webkit-tap-highlight-color: transparent;
      }
      .status-button::before {
        content: "";
        position: absolute;
        inset: 7px;
        border-radius: 5px;
        border: 1px solid rgba(255,255,255,.08);
        background:
          linear-gradient(90deg, currentColor 0 10px, transparent 10px calc(100% - 10px), currentColor calc(100% - 10px)),
          linear-gradient(0deg, currentColor 0 10px, transparent 10px calc(100% - 10px), currentColor calc(100% - 10px));
        opacity: .18;
        pointer-events: none;
      }
      .status-button:active,
      .status-button.is-pressing {
        transform: translateY(4px) scale(.985);
        box-shadow:
          0 0 0 1px rgba(255,255,255,.05) inset,
          0 0 8px currentColor,
          0 2px 5px rgba(0,0,0,.46),
          inset 0 7px 14px rgba(0,0,0,.34),
          inset 0 -1px 0 rgba(255,255,255,.16);
        background:
          linear-gradient(145deg, rgba(0,0,0,.32), rgba(255,255,255,.06)),
          var(--surface-pressed);
      }
      .status-switch {
        position: relative;
        align-self: start;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: #050a12;
        border: 5px solid currentColor;
        box-shadow:
          inset 0 3px 7px rgba(0,0,0,.42);
        flex: 0 0 auto;
        filter: brightness(.80);
        transition: transform .12s ease, box-shadow .12s ease, background .12s ease, filter .12s ease, opacity .12s ease;
      }
      .status-switch::before {
        content: none;
      }
      .status-switch::after {
        content: "";
        position: absolute;
        inset: -12px;
        border-radius: inherit;
        background:
          radial-gradient(circle, currentColor 0 45%, rgba(255,255,255,0) 72%);
        opacity: 0;
        filter: blur(7px);
        transform: scale(.88);
        transition: opacity .12s ease, transform .12s ease;
        pointer-events: none;
      }
      .status-button-content {
        position: relative;
        display: grid;
        place-items: center;
        min-width: 0;
        min-height: 2.5em;
        z-index: 1;
      }
      .status-button strong,
      .status-button small { display: block; }
      .status-button strong {
        color: currentColor;
        filter: brightness(1.18);
        font-size: 20px;
        line-height: 1.25;
        max-width: 100%;
        min-width: 0;
        overflow-wrap: anywhere;
        text-shadow: 0 1px 2px rgba(0,0,0,.58);
        transition: filter .12s ease, opacity .12s ease;
      }
      .status-button small {
        display: none;
      }
      .status-button.is-active,
      .status-button.is-pending {
        border-color: currentColor;
        box-shadow:
          0 0 0 1px rgba(255,255,255,.12) inset,
          0 0 18px currentColor,
          0 0 34px currentColor,
          0 0 54px rgba(255,43,214,.16),
          0 14px 20px rgba(0,0,0,.48),
          inset 0 1px 0 rgba(255,255,255,.20),
          inset 0 -8px 16px rgba(0,0,0,.20);
      }
      .status-button.is-active {
        background:
          linear-gradient(145deg, rgba(255,255,255,.16), rgba(0,0,0,.16)),
          currentColor;
      }
      .status-button.is-active .status-switch,
      .status-button.is-pending .status-switch {
        transform: none;
        background: #fbffff;
        filter: brightness(1.20);
        box-shadow:
          0 0 16px currentColor,
          0 0 28px currentColor,
          0 0 42px rgba(255,255,255,.20);
      }
      .status-button.is-active strong,
      .status-button.is-pending strong {
        color: #fff;
        filter: none;
        text-shadow:
          0 0 12px rgba(255,255,255,.78),
          0 0 22px currentColor,
          0 2px 3px rgba(0,0,0,.46);
      }
      .status-button.is-active .status-switch::after,
      .status-button.is-pending .status-switch::after {
        opacity: .24;
        transform: scale(1);
      }
      .status-button.is-transitioning-from .status-switch {
        filter: brightness(.80);
      }
      .status-button.is-transitioning-from .status-switch::after {
        opacity: .20;
      }
      .status-button.is-transitioning-from strong {
        filter: brightness(.76);
      }
      .status-button.is-pending {
        background:
          linear-gradient(145deg, rgba(255,255,255,.16), rgba(0,0,0,.16)),
          currentColor;
      }
      .status-button.is-pending::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: var(--pending-progress, 0%);
        height: 6px;
        background:
          linear-gradient(90deg, currentColor, var(--neon-pink), var(--neon-lime));
        box-shadow: 0 0 14px currentColor;
        transition: width .2s linear;
      }
      .pending-box {
        display: none;
        justify-content: space-between;
        gap: 12px;
        border: 1px solid #ded9ce;
        border-radius: 8px;
        padding: 12px;
      }
      .alert-box {
        display: none;
        border: 1px solid #ffb21c;
        border-radius: 8px;
        background: #fff9df;
        color: #5f3700;
        font-weight: 800;
        line-height: 1.6;
        padding: 12px;
      }
      .alert-box.is-visible {
        display: block;
      }
      .schedule-warning {
        position: fixed;
        inset: 0;
        z-index: 1000;
        display: none;
        place-items: center;
        overflow-y: auto;
        background: rgba(2, 6, 15, .76);
        padding:
          max(18px, env(safe-area-inset-top))
          max(18px, env(safe-area-inset-right))
          max(18px, env(safe-area-inset-bottom))
          max(18px, env(safe-area-inset-left));
        backdrop-filter: blur(3px);
      }
      .schedule-warning-dialog {
        width: min(560px, 100%);
        display: grid;
        gap: 10px;
        border: 1px solid #ffb21c;
        border-radius: 8px;
        background: linear-gradient(135deg, #fff9df, #fffef5);
        color: #3d2a09;
        padding: 18px;
        box-shadow:
          0 22px 60px rgba(0,0,0,.52),
          0 0 24px rgba(255,178,28,.20);
      }
      .schedule-warning-dialog strong {
        color: #3d2a09;
        font-size: 18px;
        line-height: 1.45;
      }
      .schedule-warning-dialog p {
        color: #5f430f;
        line-height: 1.65;
      }
      .schedule-warning.is-visible {
        display: grid;
      }
      .warning-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }
      .warning-actions button {
        min-height: 42px;
        border: 0;
        border-radius: 8px;
        font-weight: 900;
        cursor: pointer;
      }
      .warning-yes {
        background: linear-gradient(135deg, #00a876, #19d99a);
        color: #fff;
        box-shadow: 0 0 16px rgba(25,217,154,.22);
      }
      .warning-no {
        background: #ecedf0;
        color: #333;
      }
      .operator-notice {
        display: none;
        border: 1px solid #ffb21c;
        border-radius: 8px;
        background: #fff9df;
        padding: 12px;
      }
      .operator-notice.is-visible {
        display: grid;
        gap: 4px;
      }
      .operator-notice strong {
        color: #5f3b00;
      }
      .pending-box.is-counting {
        border-color: #0f8f63;
        background: #f6fbf8;
      }
      .pending-box strong { display: block; margin-top: 3px; font-size: 18px; }
      .count-ring {
        width: 46px;
        height: 46px;
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        border-radius: 50%;
        background: conic-gradient(#0f8f63 var(--ring-progress, 0deg), #e7e1d5 0deg);
        font-weight: 900;
      }
      .notice { color: var(--muted); font-size: 13px; font-weight: 700; }
      .result-text {
        min-height: 20px;
        border-radius: 8px;
        padding: 0;
      }
      .result-text.is-error,
      .result-text.is-success {
        padding: 10px 12px;
        font-size: 14px;
        font-weight: 900;
      }
      .result-text.is-error {
        background: #ffe9ef;
        color: #b3134e;
      }
      .result-text.is-success {
        background: #e6fff4;
        color: #007451;
      }
      .design-switcher {
        order: 21;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        border: 1px dashed rgba(0,231,255,.62);
        border-radius: 8px;
        background:
          linear-gradient(135deg, rgba(0,231,255,.10), rgba(255,43,214,.10)),
          rgba(7,16,31,.86);
        padding: 10px;
        box-shadow: 0 0 18px rgba(0,231,255,.14);
      }
      .design-switcher span {
        color: var(--muted);
        font-size: 12px;
        font-weight: 900;
        letter-spacing: .04em;
        text-transform: uppercase;
      }
      .design-switcher button {
        min-height: 34px;
        border: 1px solid rgba(0,231,255,.54);
        border-radius: 4px;
        background: #07101f;
        color: var(--ink);
        font-size: 12px;
        font-weight: 900;
        padding: 0 12px;
        cursor: pointer;
      }
      .design-switcher button[aria-pressed="true"] {
        border-color: var(--neon-pink);
        background: linear-gradient(135deg, var(--neon-cyan), var(--neon-pink), var(--neon-lime));
        color: #fff;
        box-shadow:
          0 0 16px rgba(0,231,255,.34),
          0 0 24px rgba(255,43,214,.26);
      }
      @media (max-width: 520px) {
        main {
          padding:
            max(10px, env(safe-area-inset-top))
            max(10px, env(safe-area-inset-right))
            max(14px, env(safe-area-inset-bottom))
            max(10px, env(safe-area-inset-left));
        }
        section {
          gap: 12px;
          padding: 12px;
        }
        h1 { font-size: 24px; }
        .current-heading { font-size: 24px; }
        .header-row {
          gap: 10px;
        }
        .header-row > div {
          flex-basis: 100%;
        }
        .settings-link,
        .language-select {
          min-height: 34px;
          font-size: 12px;
          padding: 0 10px;
        }
        .current {
          align-items: flex-start;
          padding: 12px;
        }
        .current-refresh {
          font-size: 10px;
        }
        .schedule-warning {
          padding:
            max(12px, env(safe-area-inset-top))
            max(12px, env(safe-area-inset-right))
            max(12px, env(safe-area-inset-bottom))
            max(12px, env(safe-area-inset-left));
        }
        .schedule-warning-dialog {
          padding: 16px;
        }
        .dot {
          flex-basis: 16px;
          min-width: 16px;
          min-height: 16px;
        }
        .status-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 10px;
        }
        .status-button {
          grid-template-rows: 38px minmax(2.6em, auto);
          gap: 9px;
          min-height: 108px;
          border-radius: 7px;
          padding: 14px 8px;
          box-shadow:
            0 0 0 1px rgba(255,255,255,.08) inset,
            0 0 10px currentColor,
            0 8px 13px rgba(0,0,0,.42),
            inset 0 1px 0 rgba(255,255,255,.14),
            inset 0 -7px 14px rgba(0,0,0,.22);
        }
        .status-button:active,
        .status-button.is-pressing {
          transform: translateY(4px) scale(.975);
          box-shadow:
            0 0 0 1px rgba(255,255,255,.05) inset,
            0 0 7px currentColor,
            0 1px 4px rgba(0,0,0,.46),
            inset 0 6px 12px rgba(0,0,0,.34),
            inset 0 -1px 0 rgba(255,255,255,.14);
          background:
            linear-gradient(145deg, rgba(0,0,0,.32), rgba(255,255,255,.06)),
            var(--surface-pressed);
        }
        .status-button.is-active,
        .status-button.is-pending {
          box-shadow:
            0 0 0 1px rgba(255,255,255,.12) inset,
            0 0 15px currentColor,
            0 0 27px currentColor,
            0 9px 14px rgba(0,0,0,.46),
            inset 0 1px 0 rgba(255,255,255,.18);
        }
        .status-switch {
          width: 38px;
          height: 38px;
          border-width: 4px;
        }
        .status-switch::after {
          inset: -9px;
          filter: blur(6px);
        }
        .status-button.is-active .status-switch,
        .status-button.is-pending .status-switch {
          box-shadow:
            0 0 14px currentColor,
            0 0 22px currentColor;
        }
        .status-button strong {
          font-size: 16px;
        }
        .status-button-content {
          min-height: 2.6em;
        }
        textarea {
          min-height: 84px;
        }
        .pending-box {
          align-items: flex-start;
          padding: 10px;
        }
        .pending-box strong {
          font-size: 16px;
        }
        .count-ring {
          width: 40px;
          height: 40px;
        }
        .design-switcher {
          gap: 6px;
          padding: 8px;
        }
        .design-switcher button {
          flex: 1 1 auto;
          padding: 0 8px;
        }
      }