/* Common base styles. Design tokens live in tokens.css.
   Header gradient uses --hdr-grad-* (theme-neutral brand mark). */

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--txt)}
a{color:inherit;text-decoration:none}

.hdr{background:linear-gradient(135deg,var(--hdr-grad-from),var(--hdr-grad-to));color:#fff;padding:14px 28px;display:flex;align-items:center;justify-content:space-between}
.hdr-left{display:flex;align-items:center;gap:10px}
.hdr-right{display:flex;align-items:center;gap:12px;position:relative}
.hdr h1{font-size:1.3rem;margin:0}
.hdr a{color:#fff;opacity:.85;font-size:.8rem}
.hdr a:hover{opacity:1}
.hdr-home{display:flex;align-items:center;color:#fff;opacity:.75;transition:opacity .15s}
.hdr-home:hover{opacity:1}
.hdr-profile{background:none;border:1.5px solid rgba(255,255,255,.35);color:#fff;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;padding:0}
.hdr-profile:hover{border-color:#fff;background:rgba(255,255,255,.12)}

.profile-dropdown{position:absolute;top:42px;right:0;background:var(--card-elev);border-radius:10px;box-shadow:var(--shadow-lg);padding:16px;width:240px;z-index:50}
.profile-dropdown label{display:block;font-size:.75rem;font-weight:700;color:var(--dim);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.profile-dropdown input{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:6px;font-size:.85rem;box-sizing:border-box;color:var(--txt);background:var(--card)}
.profile-dropdown input:focus{outline:none;border-color:var(--pri)}
.profile-dropdown .profile-check-row{display:flex;align-items:center;gap:8px;cursor:pointer;text-transform:none;font-weight:500;color:var(--txt);letter-spacing:normal;font-size:.85rem;margin-bottom:0}
.profile-dropdown .profile-check-row input[type=checkbox]{width:auto;padding:0;margin:0;cursor:pointer}
.profile-actions{display:flex;gap:6px;margin-top:10px}
.profile-divider{height:1px;background:var(--border);margin:12px 0}
.profile-layout-toggle,.profile-theme-toggle{display:flex;gap:4px}
.layout-opt,.theme-opt{flex:1;padding:5px 0;border:1px solid var(--border);background:var(--card);border-radius:6px;font-size:.75rem;font-weight:600;cursor:pointer;color:var(--dim);transition:all .15s;text-align:center}
.layout-opt.active,.theme-opt.active{background:var(--pri);color:var(--txt-on-pri);border-color:var(--pri)}
.layout-opt:hover:not(.active),.theme-opt:hover:not(.active){background:var(--bg);color:var(--txt)}

.wrap{max-width:1100px;margin:0 auto;padding:20px}
.btn{padding:8px 18px;border:none;border-radius:8px;font-weight:600;font-size:.85rem;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:5px}
.btn-pri{background:var(--pri);color:var(--txt-on-pri)}
.btn-pri:hover{background:var(--pri-hover)}
.btn-pri:disabled{background:var(--txt-muted);cursor:default}
.btn-sm{padding:5px 12px;font-size:.78rem}
.btn-out{background:none;border:1px solid var(--border);color:var(--txt)}
.btn-out:hover{background:var(--bg)}
.chk{display:flex;align-items:center;gap:4px;font-size:.85rem;cursor:pointer}
.card{background:var(--card);border-radius:10px;border:1px solid var(--border);padding:20px;margin-bottom:14px}
.spin{width:18px;height:18px;border:2px solid var(--info-bd);border-top:2px solid var(--pri);border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

.job{padding:14px;border-radius:8px;background:var(--info-soft-bg);border:1px solid var(--info-bd);color:var(--info-soft-fg);display:flex;align-items:center;gap:10px;margin-bottom:14px}
.job.ok{background:var(--ok-soft-bg);border-color:var(--ok-bd);color:var(--ok-soft-fg)}
.job.err{background:var(--err-soft-bg);border-color:var(--err-bd);color:var(--err-soft-fg)}
.empty{text-align:center;padding:40px;color:var(--dim)}

.setup-overlay{position:fixed;inset:0;background:var(--scrim);display:flex;align-items:center;justify-content:center;z-index:100}
.setup-box{background:var(--card-elev);border-radius:12px;padding:32px;max-width:480px;width:90%;color:var(--txt);box-shadow:var(--shadow-modal)}
.setup-box h2{margin-bottom:16px}
.setup-box label{display:block;font-size:.8rem;font-weight:600;color:var(--dim);margin:12px 0 4px;text-transform:uppercase}
.setup-box input{width:100%;padding:10px;border:1px solid var(--border);border-radius:8px;font-size:.9rem;background:var(--card);color:var(--txt)}
.setup-box .note{font-size:.75rem;color:var(--dim);margin-top:2px}

.notif-bell{position:relative;background:none;border:1.5px solid rgba(255,255,255,.35);color:#fff;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;padding:0}
.notif-bell:hover{border-color:#fff;background:rgba(255,255,255,.12)}
.notif-badge{position:absolute;top:-4px;right:-4px;background:var(--err);color:#fff;font-size:.65rem;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;line-height:1;box-shadow:var(--shadow-xs)}
.notif-badge.hidden{display:none}
.notif-dropdown{position:absolute;top:42px;right:36px;background:var(--card-elev);border-radius:10px;box-shadow:var(--shadow-lg);width:480px;z-index:55;overflow:hidden;display:none}
.notif-dropdown.open{display:block}
.notif-dropdown-hdr{padding:14px 16px 10px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.notif-dropdown-hdr h3{font-size:.9rem;margin:0;color:var(--txt)}
.notif-dropdown-hdr .notif-count{font-size:.75rem;color:var(--dim)}
.notif-list{max-height:420px;overflow-y:auto;padding:6px 0}
.notif-item{display:flex;flex-direction:column;gap:6px;padding:10px 16px;border-bottom:1px solid var(--border);transition:background .1s}
.notif-item:last-child{border-bottom:none}
.notif-item:hover{background:var(--card-hover)}
a.notif-item-id{font-size:.85rem;font-weight:700;color:var(--pri) !important;cursor:pointer;display:block;word-break:break-all;line-height:1.4;padding:2px 0}
a.notif-item-id:hover{text-decoration:underline}
.notif-item-row{display:flex;align-items:center;gap:8px}
.notif-item-meta{font-size:.72rem;color:var(--dim);flex:1}
.notif-item-rate{font-size:.72rem;font-weight:700;padding:2px 7px;border-radius:4px;white-space:nowrap}
.notif-item-rate.rate-ok{background:var(--ok-soft-bg);color:var(--ok)}
.notif-item-rate.rate-warn{background:var(--warn-soft-bg);color:var(--warn-strong)}
.notif-item-rate.rate-err{background:var(--err-soft-bg);color:var(--err)}
.notif-item-addr{background:none;border:1px solid var(--border);border-radius:6px;padding:4px 10px;font-size:.72rem;font-weight:600;color:var(--dim);cursor:pointer;white-space:nowrap;transition:all .15s}
.notif-item-addr:hover{border-color:var(--ok);color:var(--ok);background:var(--ok-soft-bg)}
.notif-item-addr.addressed{border-color:var(--ok);color:var(--ok);background:var(--ok-soft-bg);cursor:default;pointer-events:none}
.notif-empty{padding:32px 16px;text-align:center;color:var(--dim);font-size:.85rem}

.toast-container{position:fixed;bottom:20px;right:20px;z-index:200;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{background:var(--toast-bg);color:var(--toast-fg);padding:14px 20px;border-radius:10px;font-size:.85rem;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:10px;pointer-events:auto;cursor:pointer;transform:translateX(120%);animation:toast-in .35s ease forwards;max-width:380px}
.toast.hiding{animation:toast-out .3s ease forwards}
/* Notification bell — yellow accent, intentionally not themed; reads on
   both the dark toast (light theme) and the light toast (dark theme). */
.toast-icon{flex-shrink:0;width:20px;height:20px;color:#fbbf24}
.toast-body{flex:1}
.toast-close{background:none;border:none;color:color-mix(in srgb,var(--toast-fg) 60%,transparent);font-size:1.1rem;cursor:pointer;padding:0 0 0 8px;line-height:1}
.toast-close:hover{color:var(--toast-fg)}
@keyframes toast-in{from{transform:translateX(120%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes toast-out{from{transform:translateX(0);opacity:1}to{transform:translateX(120%);opacity:0}}

.btn-address{background:var(--ok-soft-bg);border:1px solid var(--ok-bd);color:var(--ok-strong);padding:8px 18px;border-radius:8px;font-weight:600;font-size:.85rem;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:6px}
.btn-address:hover{background:color-mix(in srgb,var(--ok-soft-bg) 80%,var(--ok));border-color:var(--ok)}
.btn-address:disabled{opacity:.6;cursor:default}
.btn-address.addressed{background:var(--ok-soft-bg);border-color:var(--ok);color:var(--ok-strong);cursor:default}