.ko-dashboard{--blue:#087fd3;--navy:#06365d;--line:#cfe5f6;--text:#07365f;--muted:#52708b;max-width:1280px;margin:20px auto;font-family:Arial,Helvetica,sans-serif;color:var(--text);box-sizing:border-box}.ko-dashboard *{box-sizing:border-box}.ko-card{background:linear-gradient(135deg,#fff,#f4fbff);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:0 8px 28px rgba(13,83,132,.07)}.ko-webcam{border-radius:14px;overflow:hidden;margin-bottom:14px;position:relative}.ko-webcam-bar{position:absolute;z-index:3;top:12px;left:14px;right:14px;color:#fff;display:flex;gap:14px;align-items:center;text-shadow:0 1px 4px #000}.ko-webcam-bar b{background:rgba(3,45,79,.85);padding:8px 12px;border-radius:8px}.ko-webcam-bar b i{display:inline-block;width:10px;height:10px;background:#ff3344;border-radius:50%;margin-right:7px}.ko-webcam-bar time{margin-left:auto;background:rgba(3,45,79,.85);padding:8px 12px;border-radius:8px}.ko-webcam-frame{height:min(39vw,440px);min-height:260px;background:linear-gradient(#87c9f3,#1f75a6);overflow:hidden}.ko-webcam-frame iframe{width:100%;height:100%;border:0}.ko-placeholder{height:100%;display:grid;place-items:center;color:white}.ko-top-grid{display:grid;grid-template-columns:1.03fr 1fr;gap:14px}.ko-card h2{font-size:18px;margin:0 0 14px}.ko-wind-layout{display:grid;grid-template-columns:1.15fr .9fr;gap:18px}.ko-compass{width:280px;height:280px;max-width:100%;margin:auto;position:relative}.ko-compass-ring{position:absolute;inset:25px;border:6px solid var(--blue);border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 38px,#d6e9f8 39px 40px),linear-gradient(90deg,transparent 49.7%,#c8e0f2 50%,transparent 50.3%),linear-gradient(transparent 49.7%,#c8e0f2 50%,transparent 50.3%)}.ko-cardinal{position:absolute;font-weight:700}.n{top:0;left:49%}.s{bottom:0;left:49%}.e{right:0;top:49%}.w{left:0;top:49%}.ne{right:28px;top:30px}.nw{left:28px;top:30px}.se{right:28px;bottom:30px}.sw{left:28px;bottom:30px}.ko-compass-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;background:#074d80;color:white;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:4}.ko-compass-center b{font-size:20px}.ko-compass-arrow{position:absolute;z-index:3;left:calc(50% - 3px);top:45px;width:6px;height:95px;background:var(--blue);transform-origin:50% 95px;transition:.4s}.ko-compass-arrow:before{content:"";position:absolute;top:-15px;left:-8px;border-left:11px solid transparent;border-right:11px solid transparent;border-bottom:25px solid var(--blue)}.ko-wind-big{text-align:center;font-weight:800;margin-top:3px}.ko-wind-big b{font-size:43px}.ko-wind-big span{font-size:22px}.ko-wind-big.green{color:#16863d}.ko-wind-big.orange{color:#ed7800}.ko-wind-big.red{color:#dc2525}.ko-wind-big.magenta{color:#d000a8}.ko-wind-big.neutral{color:#087fd3}.ko-wind-caption{text-align:center}.ko-condition{margin:12px auto 6px;max-width:260px;text-align:center;padding:6px;border-radius:20px;font-weight:800;background:#e8f2fa}.ko-condition.green{background:#70df62}.ko-condition.orange{background:#ffad3d}.ko-condition.red{background:#ff5d5d;color:white}.ko-condition.magenta{background:#d000a8;color:white}.ko-condition-copy{text-align:center;font-size:13px}.ko-live-metrics{border-left:1px solid var(--line);padding-left:18px}.ko-live-metrics p{border-bottom:1px solid var(--line);padding:8px 0;margin:0}.ko-live-metrics span{display:block;color:var(--muted);font-size:12px}.ko-live-metrics b{font-size:16px}.ko-live-metrics i{font-style:normal}.ko-card-title{display:flex;justify-content:space-between;align-items:center;gap:12px}.ko-card-title span{font-size:12px;color:var(--muted)}.ko-map-wrap{height:450px;position:relative;overflow:hidden;border-radius:10px;background:#d8eefb}#ko-map-3d{width:100%;height:100%}.ko-map-arrow{position:absolute;left:48%;bottom:25%;font-size:58px;color:#10a8ff;text-shadow:0 2px 3px #fff;transform-origin:center}.ko-map-wind{position:absolute;left:57%;bottom:27%;background:rgba(3,48,82,.82);color:#fff;padding:8px 10px;border-radius:8px;font-weight:700}.ko-compare,.ko-history,.ko-summary{margin-top:14px}.ko-stations{display:grid;grid-template-columns:1fr 1fr;gap:14px}.ko-station{background:#eef8ff;border-radius:12px;padding:14px;position:relative}.ko-station:nth-child(2){background:#effbf8}.ko-station h3{margin:0 0 12px;font-size:17px}.ko-station h3 small{font-weight:400}.ko-station time{position:absolute;right:14px;top:14px;font-size:11px;color:var(--muted)}.ko-station-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.ko-station-grid p{display:flex;justify-content:space-between;border-top:1px solid #d4e8f4;margin:0;padding:9px 0;font-size:13px}.ko-history button{border:0;background:#087fd3;color:#fff;border-radius:18px;padding:9px 18px;font-weight:700;cursor:pointer}.ko-day-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.ko-day-stats>div{border:1px solid var(--line);border-radius:10px;padding:12px 18px}.ko-day-stats span{display:block;font-size:12px;font-weight:700}.ko-day-stats b{font-size:30px;margin-right:5px}.ko-day-stats>div:nth-child(1) b{color:#16863d}.ko-day-stats>div:nth-child(2) b{color:#087fd3}.ko-day-stats>div:nth-child(3) b{color:#ed7800}.ko-history-panel{display:none;margin-top:14px}.ko-history-panel.open{display:block}.ko-history-panel canvas{width:100%;height:250px}.ko-legend{display:flex;justify-content:center;gap:22px;font-size:12px;margin:6px}.ko-history-panel a{display:block;text-align:right;font-size:12px}.ko-summary{display:grid;grid-template-columns:2fr .7fr .7fr;gap:20px;align-items:center}.ko-summary p{margin:0;color:var(--muted);line-height:1.45}.ko-summary span{display:block;font-size:11px}.ko-ads{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}.ko-ads a{height:150px;border-radius:14px;background:linear-gradient(120deg,#06365d,#087fd3);background-size:cover;background-position:center;display:flex;align-items:flex-end;padding:20px;text-decoration:none}.ko-ads span{color:#fff;font-size:25px;font-weight:800;text-transform:uppercase;text-shadow:0 2px 8px #000}.ko-dashboard .ko-cardinal{line-height:1}.ko-dashboard .ko-cardinal.n,.ko-dashboard .ko-cardinal.s,.ko-dashboard .ko-cardinal.e,.ko-dashboard .ko-cardinal.w{position:absolute}@media(max-width:900px){.ko-top-grid,.ko-stations{grid-template-columns:1fr}.ko-map-wrap{height:390px}.ko-summary{grid-template-columns:1fr}.ko-wind-layout{grid-template-columns:1fr 1fr}}@media(max-width:620px){.ko-dashboard{margin:0}.ko-webcam-frame{height:58vw;min-height:220px}.ko-webcam-bar span{display:none}.ko-webcam-bar{font-size:11px}.ko-wind-layout{grid-template-columns:1fr}.ko-live-metrics{border-left:0;border-top:1px solid var(--line);padding:10px 0 0}.ko-day-stats,.ko-ads{grid-template-columns:1fr}.ko-station-grid{grid-template-columns:1fr}.ko-station time{position:static;display:block;margin-bottom:8px}.ko-card-title{align-items:flex-start}.ko-map-wrap{height:330px}.ko-legend{flex-wrap:wrap}.ko-ads a{height:120px}}
.ko-dashboard .ko-top-grid{grid-template-columns:1fr}.ko-shore{margin:18px 0 0;padding:16px;border:1px solid #cfe5f6;border-radius:12px;text-align:center;background:#fff}.ko-shore-title{display:block;font-size:11px;letter-spacing:1px;font-weight:700;color:#52708b}.ko-shore-status{margin:9px auto;padding:9px 16px;border-radius:9px;font-size:18px;font-weight:800}.ko-shore-status.green{background:#dcfce7;color:#166534}.ko-shore-status.yellow{background:#fef3c7;color:#854d0e}.ko-shore-status.red{background:#fee2e2;color:#b91c1c}.ko-shore-status.neutral{background:#eef2f6;color:#526579}.ko-shore p{font-size:13px;margin:6px 0}.ko-shore small{display:block;color:#52708b;font-size:11px;line-height:1.5}

.ko-shore-status.orange{background:#ffedd5;color:#9a3412}

/* Blocco vento orizzontale compatto */
.ko-dashboard .ko-wind-card{padding:20px 24px}
.ko-dashboard .ko-wind-card h2{margin-bottom:16px}
.ko-dashboard .ko-wind-layout{grid-template-columns:minmax(420px,1.1fr) minmax(340px,1fr);gap:24px;align-items:center}
.ko-dashboard .ko-wind-layout>div:first-child{display:grid;grid-template-columns:180px minmax(210px,1fr);column-gap:20px;align-items:center}
.ko-dashboard .ko-compass{grid-column:1;grid-row:1 / span 6;width:180px;height:180px}
.ko-dashboard .ko-compass-ring{inset:20px;border-width:4px}
.ko-dashboard .ko-compass-arrow{top:30px;height:60px;transform-origin:50% 60px}
.ko-dashboard .ko-compass-center{width:60px;height:60px}
.ko-dashboard .ko-compass-center b{font-size:17px}
.ko-dashboard .ko-cardinal{font-size:12px}
.ko-dashboard .ko-cardinal.ne,.ko-dashboard .ko-cardinal.nw{top:20px}
.ko-dashboard .ko-cardinal.se,.ko-dashboard .ko-cardinal.sw{bottom:20px}
.ko-dashboard .ko-cardinal.ne,.ko-dashboard .ko-cardinal.se{right:18px}
.ko-dashboard .ko-cardinal.nw,.ko-dashboard .ko-cardinal.sw{left:18px}
.ko-dashboard .ko-wind-big,.ko-dashboard .ko-wind-caption,.ko-dashboard .ko-condition,.ko-dashboard .ko-condition-copy,.ko-dashboard .ko-shore{grid-column:2}
.ko-dashboard .ko-wind-big{margin:0;line-height:1.15}
.ko-dashboard .ko-wind-big b{font-size:40px}
.ko-dashboard .ko-wind-caption{font-size:12px}
.ko-dashboard .ko-condition{margin:8px auto 4px;width:100%;font-size:13px;padding:7px 12px}
.ko-dashboard .ko-condition-copy{font-size:12px}
.ko-dashboard .ko-shore{margin-top:10px;padding:10px 12px}
.ko-dashboard .ko-shore-title{font-size:10px;letter-spacing:.6px}
.ko-dashboard .ko-shore-status{font-size:16px;margin:6px 0;padding:6px 10px}
.ko-dashboard .ko-shore p{font-size:12px;line-height:1.35;margin:0}
.ko-dashboard .ko-shore small{font-size:10px;margin-top:5px}
.ko-dashboard .ko-live-metrics{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;padding-left:24px;align-self:stretch;align-content:center}
.ko-dashboard .ko-live-metrics p{display:flex;flex-direction:column;justify-content:center;padding:10px 0;min-width:0}
.ko-dashboard .ko-live-metrics span{font-size:12px;margin-bottom:3px}
.ko-dashboard .ko-live-metrics b{font-size:17px;white-space:nowrap}
@media(max-width:1000px){
.ko-dashboard .ko-wind-layout{grid-template-columns:1fr;gap:16px}
.ko-dashboard .ko-wind-layout>div:first-child{grid-template-columns:180px 1fr}
.ko-dashboard .ko-live-metrics{border-left:0;border-top:1px solid var(--line);padding:4px 0 0;grid-template-columns:repeat(4,1fr);gap:0 16px}
}
@media(max-width:620px){
.ko-dashboard .ko-wind-card{padding:16px}
.ko-dashboard .ko-wind-layout>div:first-child{grid-template-columns:1fr}
.ko-dashboard .ko-compass{grid-column:1;grid-row:auto}
.ko-dashboard .ko-wind-big,.ko-dashboard .ko-wind-caption,.ko-dashboard .ko-condition,.ko-dashboard .ko-condition-copy,.ko-dashboard .ko-shore{grid-column:1}
.ko-dashboard .ko-live-metrics{grid-template-columns:1fr 1fr}
}