@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Fraunces:ital,wght@0,300;0,600;1,300&display=swap');

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'IBM Plex Mono',monospace;background:#f0f4ee;color:#2a3a28;min-height:100vh}

.app{max-width:900px;padding:1.5rem 1.25rem;margin:0 auto}

.hdr{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid #c8d8c0}
.hdr-title{font-family:'Fraunces',serif;font-size:1.6rem;font-weight:300;color:#3a7a1a;letter-spacing:-0.02em}
.hdr-title span{font-style:italic}
.hdr-right{display:flex;align-items:center;gap:12px}
.hdr-time{font-size:10px;color:#6a8a60;letter-spacing:0.1em}
.hdr-back{font-size:10px;color:#6a8a60;text-decoration:none;letter-spacing:0.08em}
.hdr-back:hover{color:#3a7a1a}

.sec-label{font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:#7a9a70;margin-bottom:0.6rem;margin-top:1.5rem;display:flex;align-items:center;gap:8px}
.sec-label::after{content:'';flex:1;height:1px;background:#c8d8c0}

.global-bar{background:#ffffff;border:1px solid #c8d8c0;border-radius:6px;padding:0.9rem 1rem;margin-bottom:0.5rem}
.global-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.global-row+.global-row{margin-top:0.75rem;padding-top:0.75rem;border-top:1px solid #dce8d4}
.global-label{font-size:11px;color:#2a3a28;display:flex;flex-direction:column;gap:2px}
.global-sub{font-size:9px;color:#6a8a60}
.global-right{display:flex;align-items:center;gap:10px}

.ovr-panel{margin-top:0.75rem;padding-top:0.75rem;border-top:1px dashed #dce8d4}

.seg{display:inline-flex;border:1px solid #b0c4a8;border-radius:5px;overflow:hidden;flex-shrink:0}
.seg button{font-size:10px;padding:5px 12px;border:0;background:#f8faf6;color:#6a8a60;cursor:pointer;font-family:'IBM Plex Mono',monospace;letter-spacing:0.04em;transition:all .15s}
.seg button+button{border-left:1px solid #b0c4a8}
.seg button.act{background:#3a7a1a;color:#fff}

.day-picker{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.day-chk{display:flex;align-items:center;font-size:10px;color:#6a8a60;background:#f8faf6;border:1px solid #c8d8c0;border-radius:5px;padding:5px 9px;cursor:pointer;transition:all .15s;user-select:none}
.day-chk input{display:none}
.day-chk.on{background:#d4edba;color:#2a6010;border-color:#8ac860}
.day-chk:hover{border-color:#8aaa80}

.seq-btn{font-size:10px;padding:6px 16px;border-radius:4px;border:1px solid #8ac860;background:#e8f4e0;color:#2a5a10;cursor:pointer;font-family:'IBM Plex Mono',monospace;letter-spacing:0.06em;transition:all .15s}
.seq-btn:hover{background:#d4edba}
.seq-btn.stop{border-color:#c04040;background:#fbeaea;color:#903030}
.seq-btn.stop:hover{background:#f4d4d4}
.seq-btn:disabled{opacity:.4;cursor:default}

.tog{position:relative;width:38px;height:20px;flex-shrink:0}
.tog input{opacity:0;width:0;height:0;position:absolute}
.tog-sl{position:absolute;inset:0;background:#d0dcc8;border:1px solid #b0c4a8;border-radius:10px;cursor:pointer;transition:all .2s}
.tog-sl:before{content:'';position:absolute;width:14px;height:14px;left:2px;top:2px;background:#8aa880;border-radius:50%;transition:transform .2s}
input:checked+.tog-sl{background:#c0e0a0;border-color:#5a9a30}
input:checked+.tog-sl:before{background:#3a7a1a;transform:translateX(18px)}

.pill{font-size:9px;padding:2px 7px;border-radius:3px;letter-spacing:0.08em;font-weight:600}
.pill-on{background:#d4edba;color:#2a6010;border:1px solid #8ac860}
.pill-off{background:#e8e8e8;color:#7a8a78;border:1px solid #c8c8c8}
.pill-seed{background:#fff0c0;color:#8a5a00;border:1px solid #e0c040}

.tw-fields{display:flex;align-items:center;gap:8px}
.tw-sep{font-size:10px;color:#6a8a60}
input[type=time],input[type=text].tw-input{background:#f8faf6;border:1px solid #b0c4a8;border-radius:4px;color:#2a3a28;font-family:'IBM Plex Mono',monospace;font-size:11px;padding:4px 8px;width:80px}
input[type=time]:focus,input[type=text].tw-input:focus{outline:none;border-color:#5a9a30}

.zone{background:#ffffff;border:1px solid #c8d8c0;border-radius:6px;padding:0.85rem 1rem;margin-bottom:0.4rem;transition:border-color .2s}
.zone.z-on{border-color:#5a9a30;background:#fafff6}
.zone.z-seed{border-color:#d0a000;background:#fffdf0}
.zone-top{display:flex;align-items:center;gap:10px}
.zone-num{font-size:9px;color:#8aaa80;min-width:16px}
.zone-name{font-size:12px;color:#1a2a18;flex:1;font-weight:500}
.zone-right{display:flex;align-items:center;gap:8px;flex-shrink:0}

.mode-row{display:flex;gap:4px;margin-top:0.6rem;padding-top:0.6rem;border-top:1px solid #dce8d4;padding-left:26px}
.mbtn{font-size:9px;padding:3px 9px;border-radius:3px;border:1px solid #c8d8c0;background:transparent;color:#6a8a60;cursor:pointer;letter-spacing:0.06em;font-family:'IBM Plex Mono',monospace;transition:all .15s}
.mbtn:hover{border-color:#8aaa80;color:#2a5a10}
.mbtn.act-manual{background:#e8f4e0;color:#2a5a10;border-color:#8ac860}
.mbtn.act-seed{background:#fff0c0;color:#7a5000;border-color:#d0a000}

.seed-row{display:flex;align-items:center;gap:8px;margin-top:0.5rem;padding-left:26px}
.seed-lbl{font-size:9px;color:#6a8a60;white-space:nowrap;min-width:70px}
input[type=range]{-webkit-appearance:none;appearance:none;height:3px;background:#c8d8c0;border-radius:2px;outline:none;flex:1}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#3a7a1a;cursor:pointer}
.seed-val{font-size:10px;color:#2a5a10;min-width:36px;text-align:right}

.sdot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.sdot-on{background:#3a7a1a;box-shadow:0 0 5px #6ab840}
.sdot-off{background:#c8d8c0}
.sdot-seed{background:#c8900a;box-shadow:0 0 5px #e0b020}

.zone-divider{display:flex;align-items:center;gap:8px;margin:1rem 0 0.5rem}
.zone-divider::before,.zone-divider::after{content:'';flex:1;height:1px;background:#c8d8c0}
.zone-divider span{font-size:9px;color:#8aaa80;letter-spacing:0.15em;white-space:nowrap}

.log-card{background:#ffffff;border:1px solid #c8d8c0;border-radius:6px;padding:0.75rem 1rem}
.log-line{font-size:10px;color:#4a6a40;padding:4px 0;border-bottom:1px solid #e8f0e4}
.log-line:last-child{border:none}
.log-ts{color:#8aaa80;margin-right:6px}
.log-act{color:#2a5a10}

.spinner{display:inline-block;width:10px;height:10px;border:1px solid #c8d8c0;border-top-color:#3a7a1a;border-radius:50%;animation:spin .6s linear infinite;vertical-align:middle;margin-left:4px}
@keyframes spin{to{transform:rotate(360deg)}}

.toast{position:fixed;bottom:1.2rem;right:1.2rem;background:#ffffff;border:1px solid #5a9a30;border-radius:5px;padding:.6rem 1rem;font-size:11px;color:#2a6010;opacity:0;transform:translateY(8px);transition:all .25s;pointer-events:none;z-index:99;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.toast.show{opacity:1;transform:translateY(0)}
.toast.err{border-color:#c04040;color:#903030}

/* Aktive soner på én linje i vanlig nettleser (ikke mobil) */
@media (min-width: 701px) {
  #night-zones { flex-wrap: nowrap; }
  #night-zones .day-chk { white-space: nowrap; padding: 5px 7px; font-size: 9px; }
}