*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0f1117;--bg2: #181c27;--bg3: #1e2333;--border: #2a3050;--border-bright: #3d4f7c;--accent: #A91A4D;--accent-dim: #b33662;--accent-glow: #a91a4c52;--green: #22c55e;--green-dim: rgba(34,197,94,.12);--yellow: #eab308;--yellow-dim: rgba(234,179,8,.12);--red: #ef4444;--red-dim: rgba(239,68,68,.12);--text: #e8ecf4;--text-muted: #7a8aaa;--text-dim: #4a5570;--font-display: "Barlow Condensed", sans-serif;--font-body: "Barlow", sans-serif;--radius: 6px;--radius-lg: 12px;--shadow: 0 4px 24px rgba(0,0,0,.4)}html,body,#root{height:100%;min-width:100vw;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}.headerlogodiv{display:flex;justify-content:center;align-items:center;height:100%}.headerlogo{max-width:100px;max-height:100%;object-fit:contain}a{color:inherit;text-decoration:none}button{cursor:pointer;font-family:var(--font-body)}input,select,textarea{font-family:var(--font-body);font-size:max(16px,1em)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg2)}::-webkit-scrollbar-thumb{background:var(--border-bright);border-radius:3px}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:translate(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.fade-in{animation:fadeIn .3s ease forwards}.nav{display:flex;align-items:center;gap:8px;padding:0 24px;height:var(--nav-h);background:var(--bg2);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}.nav-brand{font-family:var(--font-display);font-size:20px;font-weight:800;letter-spacing:1px;margin-right:16px;white-space:nowrap}.nav-brand .accent{color:var(--accent)}.nav-links{display:flex;gap:4px;flex:1}.nav-link{display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--radius);color:var(--text-muted);font-weight:500;font-size:14px;transition:all .15s;text-decoration:none;white-space:nowrap}.nav-link.active{background:var(--accent-glow);color:var(--accent)}.nav-logout{padding:6px 14px;background:transparent;border:1px solid var(--border);border-radius:var(--radius);color:var(--text-muted);font-size:13px;cursor:pointer;transition:all .15s;white-space:nowrap}.bottom-nav{display:none}@media (max-width: 600px){.nav{padding:0 16px;justify-content:space-between}.nav-brand{font-size:17px;margin-right:0}.nav-links{display:none}.nav-logout{padding:6px 10px;font-size:12px}.bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;height:var(--bottom-nav-h);background:var(--bg2);border-top:1px solid var(--border);z-index:200}.bottom-nav-link{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--text-muted);font-size:10px;font-weight:600;text-decoration:none;padding:8px 0;transition:color .15s;-webkit-tap-highlight-color:transparent}.bottom-nav-link.active{color:var(--accent)}.bottom-nav-icon{font-size:20px;line-height:1}.page-wrap{padding-bottom:calc(var(--bottom-nav-h) + 80px)!important}}.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;background:radial-gradient(ellipse at 50% 40%,#1a2040,#0f1117 70%)}.login-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:48px 40px;width:100%;max-width:380px;box-shadow:0 20px 60px #00000080;text-align:center}@media (max-width: 480px){.login-card{padding:36px 24px}}.tm-wrap{max-width:860px;margin:0 auto;padding:32px 24px 120px}.tm-header{margin-bottom:28px}.tm-title{font-family:var(--font-display);font-size:32px;font-weight:800;letter-spacing:1px;color:var(--text)}.tm-sub{color:var(--text-muted);margin-top:4px}.tm-success{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;background:var(--green-dim);border:1px solid var(--green);border-radius:var(--radius);padding:14px 18px;margin-bottom:24px}.tm-success-btns{display:flex;gap:8px;flex-shrink:0}.tm-grid{display:flex;flex-direction:column;gap:16px}.tm-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px 24px}.tm-card-title{font-family:var(--font-display);font-size:16px;font-weight:700;letter-spacing:.5px;color:var(--text);margin-bottom:16px;display:flex;align-items:center;gap:10px}.tm-step{width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0}.tm-row{display:flex;gap:16px}.tm-field{display:flex;flex-direction:column;gap:5px;flex:1}.tm-field label{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px}.tm-field .field-error{font-size:11px;color:var(--red)}.tm-input{padding:10px 12px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:14px;outline:none;width:100%;transition:border-color .15s}.tm-input:focus{border-color:var(--accent)}.tm-input.error{border-color:var(--red)}.tm-footer{position:fixed;left:0;right:0;bottom:0;padding:12px 24px;background:var(--bg2);border-top:1px solid var(--border);display:flex;justify-content:center;z-index:50}.tm-submit-btn{padding:14px 48px;background:var(--accent);color:#fff;border:none;border-radius:var(--radius);font-family:var(--font-display);font-size:17px;font-weight:700;letter-spacing:.5px;cursor:pointer;transition:background .2s;width:100%;max-width:480px}.tm-submit-btn:disabled{opacity:.6}.tm-pdf-btn{padding:8px 16px;background:var(--accent);border:none;border-radius:var(--radius);color:#fff;font-weight:600;font-size:13px;cursor:pointer}.tm-new-btn{padding:8px 16px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-weight:600;font-size:13px;cursor:pointer}@media (max-width: 600px){.tm-wrap{padding:20px 16px 140px}.tm-title{font-size:26px}.tm-card{padding:16px}.tm-row{flex-direction:column;gap:12px}.tm-footer{padding:10px 16px;bottom:54px}.tm-submit-btn{font-size:15px;padding:13px 24px}}.mon-wrap{padding:32px 24px;max-width:1200px;margin:0 auto}.mon-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;flex-wrap:wrap;gap:8px}.mon-title{font-family:var(--font-display);font-size:32px;font-weight:800;letter-spacing:1px}.mon-live{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-muted)}.mon-live-dot{width:8px;height:8px;border-radius:50%;background:var(--green);animation:pulse 2s infinite;display:inline-block}.mon-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}.mon-sarake{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}.mon-sarake-header{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border)}.mon-sarake-viiva{width:4px;height:30px;border-radius:2px;flex-shrink:0}.mon-sarake-title{font-family:var(--font-display);font-size:17px;font-weight:800;letter-spacing:.5px}.mon-sarake-pvm{font-size:12px;color:var(--text-muted);margin-top:1px}.mon-badge{margin-left:auto;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:14px;font-weight:700;flex-shrink:0}.mon-kortit{padding:10px;display:flex;flex-direction:column;gap:10px}.mon-empty{color:var(--text-dim);font-size:13px;padding:16px 4px;text-align:center}.mon-kortti{padding:12px 14px;border-radius:var(--radius);border:1px solid transparent;display:flex;flex-direction:column;gap:5px}.mon-kortti-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}.mon-pyora{font-family:var(--font-display);font-size:16px;font-weight:700;letter-spacing:.3px;color:var(--text);word-break:break-word}.mon-huolto{font-size:12px;color:var(--text-muted);font-weight:500}.mon-aika{font-size:11px;color:var(--text-dim)}.mon-tila-tag{display:flex;align-items:center;gap:4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;flex-shrink:0}.mon-tila-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.mon-btn{margin-top:4px;padding:6px 10px;border-radius:var(--radius);font-weight:700;font-size:12px;cursor:pointer;width:100%;border:1px solid;transition:opacity .15s}.mon-btn:active{opacity:.7}.mon-btn-yellow{background:var(--yellow-dim);border-color:var(--yellow);color:var(--yellow)}.mon-btn-green{background:var(--green-dim);border-color:var(--green);color:var(--green)}@media (max-width: 900px){.mon-columns{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.mon-wrap{padding:16px}.mon-title{font-size:26px}.mon-columns{grid-template-columns:1fr;gap:12px}}.hl-wrap{padding:32px 24px;max-width:1200px;margin:0 auto}.hl-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px}.hl-title{font-family:var(--font-display);font-size:32px;font-weight:800;letter-spacing:1px}.hl-filters{display:flex;gap:6px;flex-wrap:wrap}.hl-filter-btn{padding:6px 12px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-muted);font-size:13px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .15s;-webkit-tap-highlight-color:transparent}.hl-filter-btn.active{background:var(--accent-glow);border-color:var(--accent);color:var(--accent)}.hl-filter-count{background:var(--bg3);border-radius:10px;padding:1px 7px;font-size:11px;font-weight:700}.hl-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}.hl-lista{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}.hl-empty{padding:32px 24px;color:var(--text-muted);text-align:center}.hl-rivi{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s;gap:12px;-webkit-tap-highlight-color:transparent}.hl-rivi:last-child{border-bottom:none}.hl-rivi:hover{background:var(--bg3)}.hl-rivi.selected{background:var(--accent-glow);border-left:3px solid var(--accent)}.hl-rivi-left{flex:1;min-width:0}.hl-pyora{font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:.3px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hl-huolto{font-size:12px;color:var(--text-muted);margin-bottom:2px}.hl-asiakas{font-size:11px;color:var(--text-dim)}.hl-rivi-right{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0}.hl-tila-tag{font-size:10px;font-weight:700;padding:3px 9px;border-radius:10px;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}.hl-pvm{font-size:11px;color:var(--text-muted);text-align:right}.hl-detail{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;position:sticky;top:calc(var(--nav-h) + 16px)}.hl-detail-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}.hl-detail-pyora{font-family:var(--font-display);font-size:21px;font-weight:800;word-break:break-word}.hl-detail-huolto{font-size:13px;color:var(--accent);margin-top:3px;font-weight:500}.hl-close-btn{background:none;border:none;color:var(--text-muted);font-size:16px;cursor:pointer;padding:4px 8px;flex-shrink:0}.hl-info-row{margin-bottom:13px}.hl-info-label{font-size:10px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:2px}.hl-info-value{font-size:13px;color:var(--text);line-height:1.5}.hl-tila-section{border-top:1px solid var(--border);padding-top:14px;margin-bottom:14px}.hl-tila-label{font-size:10px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px}.hl-tila-btns{display:flex;gap:6px}.hl-tila-btn{flex:1;padding:7px 4px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-muted);font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;text-align:center}.hl-actions{display:flex;gap:8px}.hl-pdf-btn{flex:1;padding:9px;background:var(--accent);border:none;border-radius:var(--radius);color:#fff;font-weight:700;font-size:13px;cursor:pointer}.hl-delete-btn{padding:9px 14px;background:var(--red-dim);border:1px solid var(--red);border-radius:var(--radius);color:var(--red);font-weight:600;font-size:13px;cursor:pointer}@media (max-width: 860px){.hl-layout{grid-template-columns:1fr}.hl-detail{position:fixed;right:0;bottom:0;left:0;z-index:150;border-radius:0;overflow-y:auto;padding:24px 20px calc(var(--bottom-nav-h) + 20px);top:0}}@media (max-width: 600px){.hl-wrap{padding:16px 12px}.hl-title{font-size:26px}.hl-rivi{padding:12px 14px}.hl-filters{gap:4px}.hl-filter-btn{padding:5px 10px;font-size:12px}}.loading{padding:48px;color:var(--text-muted);text-align:center;font-size:14px}@media print{body{background:#fff}.no-print{display:none!important}}