:root { color-scheme: light; --paper: #f8f5ed; --ink: #07120e; --muted: #48534e; --accent: #005555; --green: #00aa55; --border: #d6d8d0; --warning: #8d340d; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: transparent; color: var(--ink); font: 16px/1.45 "IBM Plex Sans", system-ui, sans-serif; }
button, input, select { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #ffaa00; outline-offset: 3px; }
.widget { width: 100%; max-width: 620px; margin-inline: auto; padding: clamp(14px, 4vw, 28px); background: var(--paper); border: 1px solid var(--border); border-radius: 8px; }
.widget-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.widget-header a { flex-shrink: 0; }
.widget-header img { display: block; width: 90px; height: auto; }
.eyebrow { margin: 0 0 5px; color: var(--accent); font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(1.3rem, 5vw, 1.7rem); font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; }
.status { margin: 16px 0; padding-left: 11px; border-left: 3px solid var(--green); color: var(--muted); font-size: .85rem; }
.status[data-tone="warning"] { border-color: #c75424; color: var(--warning); }
.date-line { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 22px 0 12px; font-size: .9rem; color: var(--accent); }
#clock { font-variant-numeric: tabular-nums; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { padding: 10px 6px; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; }
th:first-child { text-align: left; padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
thead th { color: var(--muted); font-size: .75rem; font-weight: 500; }
tbody th { font-weight: 500; }
td { font-size: 1.12rem; }
td:last-child { font-weight: 650; }
.juma { color: var(--accent); }
.notice { margin: 20px 0 0; padding: 12px; background: #e9efe5; border-left: 3px solid var(--green); overflow-wrap: anywhere; white-space: pre-wrap; }
.time-note { margin: 14px 0 0; color: var(--muted); font-size: .72rem; }
footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; color: var(--muted); font-size: .72rem; }
footer button { padding: 6px 0; border: 0; background: none; color: var(--accent); text-decoration: underline; cursor: pointer; }
.connection-form { margin-block: 16px; }
.form-note { font-size: .85rem; color: var(--muted); }
.directory-feedback { display: flex; align-items: baseline; gap: 12px; }
.directory-feedback .form-note { margin: 8px 0 0; flex: 1; }
.connection-form .directory-feedback button { margin: 0; width: auto; padding: 6px 0; background: none; color: var(--accent); text-decoration: underline; }
fieldset { margin: 16px 0 0; padding: 14px; border: 1px solid var(--border); border-radius: 3px; min-width: 0; }
legend { padding-inline: 5px; font-size: .85rem; font-weight: 600; }
fieldset .form-note { margin-top: 0; }
label { display: block; margin-top: 12px; font-size: .85rem; }
input, select { display: block; width: 100%; min-width: 0; min-height: 44px; margin-top: 5px; padding: 9px 12px; background: #fff; border: 1px solid #a4aba5; border-radius: 3px; color: var(--ink); }
select { text-overflow: ellipsis; }
.connection-form button { margin-top: 16px; min-height: 44px; width: 100%; border: 0; border-radius: 3px; padding: 10px 16px; background: var(--green); color: #000; font-weight: 600; cursor: pointer; }
button:disabled { opacity: .6; cursor: wait; }
.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; }
@media (max-width: 330px) { .widget { padding: 12px; } .widget-header img { width: 65px; } td { font-size: 1rem; } th, td { padding-block: 8px; } }