:root { color-scheme: dark; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
html, body, #screen { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #16a34a; }
button, input { font: inherit; }
button { cursor: pointer; }
#screen { position: relative; background: var(--screen-color, #16a34a); transition: background-color 250ms linear; }
.corner-button { position: fixed; z-index: 1; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); width: 44px; height: 44px; border: 0; border-radius: 50%; color: white; background: rgb(0 0 0 / 25%); opacity: 0; transition: opacity 160ms; }
#screen:hover .corner-button, .corner-button:focus-visible { opacity: 1; }
.panel { position: fixed; z-index: 2; inset: 50% auto auto 50%; width: min(92vw, 520px); transform: translate(-50%, -50%); padding: 22px; border: 1px solid rgb(255 255 255 / 16%); border-radius: 18px; color: #f8fafc; background: rgb(15 23 42 / 94%); box-shadow: 0 24px 80px rgb(0 0 0 / 45%); backdrop-filter: blur(12px); }
.panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
h1 { margin: 0 0 3px; font-size: 1.35rem; }
p { margin: 0; color: #cbd5e1; }
.icon-button { border: 0; padding: 0 5px; color: #cbd5e1; background: transparent; font-size: 1.8rem; line-height: 1; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 22px 0 16px; }
label { display: grid; gap: 6px; color: #e2e8f0; font-size: .9rem; }
input[type="time"] { min-height: 42px; padding: 7px 10px; border: 1px solid #475569; border-radius: 9px; color: white; background: #1e293b; }
input[type="color"] { width: 100%; min-height: 42px; padding: 3px; border: 1px solid #475569; border-radius: 9px; background: #1e293b; }
.check { display: flex; grid-template-columns: auto 1fr; align-items: center; gap: 9px; }
.actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.actions button { min-height: 40px; padding: 8px 13px; border: 1px solid #64748b; border-radius: 9px; color: white; background: #334155; }
.actions .primary { border-color: #2563eb; background: #2563eb; }
.message { min-height: 1.25em; margin-top: 14px; font-size: .85rem; }
.status { position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%); padding: 8px 13px; border-radius: 999px; color: white; background: rgb(0 0 0 / 30%); font-size: .9rem; white-space: nowrap; }
@media (hover: none), (pointer: coarse) { .corner-button { opacity: .65; } }
@media (max-width: 480px) { .grid { grid-template-columns: 1fr; } .panel { max-height: 92vh; overflow: auto; } }
@media (prefers-reduced-motion: reduce) { #screen, .corner-button { transition: none; } }