:root{
  --bg:#05020c;--panel:rgba(6,8,25,.82);--panel2:rgba(11,10,31,.92);
  --line:rgba(190,122,255,.38);--text:#fff;--muted:#c4c5dc;
  --purple:#a100ff;--violet:#6f31ff;--pink:#ff16c6;--blue:#00a6ff;--cyan:#00dfff;
  --green:#21e884;--orange:#ff9500;--gold:#ffd24a;--red:#ff3131;
  --shadow:0 18px 55px rgba(0,0,0,.48);
  --footer-h:86px;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:Segoe UI,Inter,Arial,sans-serif}
button,input,textarea,select{font:inherit}
button{cursor:pointer;color:inherit}
.wallpaper{position:fixed;inset:0;background:url('assets/maikl_neon_bg.jpg') center/cover no-repeat;z-index:-3}
.shade{position:fixed;inset:0;background:linear-gradient(180deg,rgba(3,1,12,.38),rgba(2,2,11,.72) 40%,rgba(2,2,11,.90));z-index:-2}
.app-shell{height:calc(100vh - var(--footer-h));display:grid;grid-template-columns:180px 1fr;gap:16px;padding:14px 16px 6px}
.sidebar{border:1px solid rgba(177,112,255,.52);background:rgba(7,7,24,.74);backdrop-filter:blur(13px);border-radius:19px;padding:10px;display:flex;flex-direction:column;min-height:0;box-shadow:var(--shadow)}
.brand-home,.side-nav button{border:0;background:transparent;border-radius:12px;padding:10px 12px;text-align:left;display:grid;grid-template-columns:34px 1fr;align-items:center;font-weight:700;font-size:15px}
.brand-home{background:linear-gradient(90deg,#7130ff,#b400ff);box-shadow:0 0 18px rgba(175,0,255,.35)}
.side-nav{display:grid;gap:2px;margin-top:3px}
.side-nav button:hover{background:rgba(118,61,255,.16)}
.side-logo-wrap{margin-top:auto;display:grid;place-items:end center;min-height:120px}
.side-logo-wrap img{max-width:100%;max-height:185px;object-fit:contain;object-position:bottom;filter:drop-shadow(0 8px 24px rgba(0,0,0,.45))}
.main-area{min-width:0;min-height:0;display:flex;flex-direction:column}
.topbar{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:start;min-height:118px}
.main-title{font-size:clamp(44px,5vw,80px);line-height:.9;font-weight:950;letter-spacing:-3px;text-shadow:0 0 25px rgba(255,155,0,.22)}
.main-title #titleMain{background:linear-gradient(#fff3a4,#ffad00 48%,#9a4900);-webkit-background-clip:text;color:transparent;-webkit-text-stroke:1px #ffd96b}
.main-title em{font-style:normal;font-size:.47em;letter-spacing:-1px;background:linear-gradient(90deg,#fff,#bfaaff,#78afff);-webkit-background-clip:text;color:transparent}
.welcome{text-align:center;font-size:clamp(16px,1.6vw,24px);font-weight:800;margin-top:4px}
.top-widgets{display:grid;grid-template-columns:140px 140px 190px;gap:10px}
.status-card{min-height:86px;border:1px solid rgba(170,108,255,.46);background:rgba(7,8,26,.77);backdrop-filter:blur(12px);border-radius:15px;padding:10px 13px;display:flex;align-items:center;gap:10px;text-align:left}
.status-card b{display:block;font-size:22px}.status-card small{display:block;color:#e6e6f0;font-size:12px;margin-top:2px}
.big-icon{font-size:35px;color:#ffd000}.clock{font-size:32px!important}.hello-card{justify-content:space-between}.avatar{width:44px;height:44px;border-radius:50%;border:1px solid #9e96ce;display:grid;place-items:center}
.view{display:none;min-height:0;flex:1}.view.active{display:flex;flex-direction:column;min-height:0}
.top-modules{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:13px}
.top-module{border:1px solid var(--tone);border-radius:17px;min-height:150px;background:linear-gradient(135deg,color-mix(in srgb,var(--tone) 16%,rgba(9,7,27,.9)),rgba(6,6,20,.92));padding:18px;display:grid;grid-template-columns:110px 1fr;align-items:center;text-align:left;box-shadow:0 0 22px color-mix(in srgb,var(--tone) 14%,transparent);transition:.18s}
.top-module:hover{transform:translateY(-5px) scale(1.02);box-shadow:0 0 28px color-mix(in srgb,var(--tone) 32%,transparent);filter:brightness(1.08)}
.top-module .icon{font-size:72px;text-align:center;text-shadow:0 0 22px var(--tone)}
.top-module h3{font-size:23px;margin:0 0 6px}.top-module p{color:#e4deee;margin:0;font-size:13px}
.dashboard-grid{display:grid;grid-template-columns:1.05fr 1.12fr .86fr .84fr;grid-template-rows:1.32fr .92fr;gap:13px;min-height:0;flex:1}
.panel{border:1px solid rgba(172,101,255,.50);background:rgba(7,7,25,.79);backdrop-filter:blur(13px);border-radius:17px;padding:14px;min-height:0;overflow:hidden;box-shadow:var(--shadow)}
.panel h2{margin:0 0 10px;font-size:17px}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.small-action{border:1px solid #655b99;background:transparent;border-radius:10px;padding:5px 8px;font-size:10px}
.phone-panel{grid-column:1;grid-row:1}.youtube-panel{grid-column:2;grid-row:1 / span 2}.games-panel{grid-column:3;grid-row:1}.admin-panel{grid-column:4;grid-row:1 / span 2}.weather-info{grid-column:1;grid-row:2}.favorites-panel{grid-column:3;grid-row:2}.media-visual{display:none}
.phone-content{display:grid;grid-template-columns:125px 1fr;gap:13px;align-items:center}
.fake-qr{height:125px;border:8px solid white;border-radius:12px;background:
repeating-linear-gradient(45deg,#000 0 4px,#fff 4px 8px),
repeating-linear-gradient(-45deg,transparent 0 8px,#000 8px 12px);display:grid;place-items:center;color:#fff;box-shadow:0 0 18px #8d2cff}
.fake-qr span{background:#000;padding:6px;font-weight:950}.phone-content p{font-size:14px;line-height:1.45}.phone-content small{font-size:11px;color:#d3d3e3}
.yt-logo{background:#ff001d;padding:1px 6px;border-radius:6px}.search-row{display:grid;grid-template-columns:1fr 44px;gap:7px}.search-row input{background:#09081b;border:1px solid #665d8d;color:#fff;border-radius:12px;padding:10px}.search-row button{border:1px solid #675c91;border-radius:12px;background:#0c0b20}
.mini-results{display:grid;gap:6px;margin-top:9px;max-height:calc(100% - 70px);overflow:auto;padding-right:5px}
.mini-result{display:grid;grid-template-columns:70px 1fr 34px;gap:8px;align-items:center;border-bottom:1px solid rgba(255,255,255,.08);padding:5px 0}.mini-result img{width:70px;height:42px;object-fit:cover;border-radius:7px}.mini-result b{font-size:12px;display:block}.mini-result small{font-size:10px;color:var(--muted)}.mini-result button{width:32px;height:32px;border-radius:50%;border:1px solid #795bf5;background:#0d0a22}.mini-empty{color:var(--muted);font-size:12px;padding:16px 4px}
.game-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}.game-buttons button{min-height:92px;border-radius:14px;border:1px solid var(--c,#9e46ff);background:linear-gradient(145deg,rgba(124,20,255,.28),rgba(6,8,22,.88));font-size:28px}.game-buttons button:nth-child(2){--c:#00a7ff}.game-buttons button:nth-child(3){--c:#25e958}.game-buttons button:nth-child(4){--c:#ff9c00}.game-buttons span{display:block;font-size:11px;font-weight:850;margin-top:7px}
.admin-shortcuts{display:grid;gap:6px}.admin-shortcuts button{border:1px solid rgba(144,97,225,.42);background:rgba(15,10,37,.7);border-radius:11px;padding:9px 10px;text-align:left;display:flex;justify-content:space-between;font-size:12px}.admin-shortcuts button:hover{background:rgba(103,37,255,.20)}
.weather-big{display:grid;grid-template-columns:1fr 1fr;height:calc(100% - 26px)}.weather-big>div{display:flex;flex-direction:column;justify-content:center;align-items:center}.weather-big>div+div{border-left:1px solid rgba(255,255,255,.12)}.weather-big strong{font-size:42px}.weather-big span{margin-top:5px}
.favorite-list{display:grid;gap:6px}.favorite-list button{border:0;background:transparent;text-align:left;padding:5px;color:#fff;font-size:12px}.favorite-list button:hover{color:#d7a6ff}
.module-view{padding-bottom:4px}.module-head{display:grid;grid-template-columns:130px 1fr 130px;align-items:center;gap:12px;margin-bottom:10px}.module-head>div{text-align:center}.module-head h1{margin:1px 0;font-size:30px}.module-head small{color:#b995ff;letter-spacing:2px}.back-home{border:1px solid #625481;background:rgba(8,8,27,.78);border-radius:11px;padding:9px}
.module-body{flex:1;min-height:0;overflow:auto;border:1px solid rgba(168,100,255,.45);background:rgba(7,7,25,.85);backdrop-filter:blur(15px);border-radius:18px;padding:14px}
.cols{display:grid;grid-template-columns:350px 1fr;gap:13px;height:100%}.sub{border:1px solid rgba(255,255,255,.10);border-radius:14px;background:rgba(255,255,255,.03);padding:13px;min-height:0}.sub h3{margin-top:0}
.filebox{border:1px dashed rgba(255,255,255,.25);border-radius:12px;padding:14px;text-align:center;color:var(--muted)}.filebox input{margin-top:8px}
.list{display:grid;gap:6px;max-height:52vh;overflow:auto;margin-top:10px}.row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:8px}.row b{display:block;font-size:13px}.row small{color:var(--muted)}.row button,.btn{border:1px solid #635682;background:rgba(255,255,255,.04);border-radius:10px;padding:8px 11px}.btn.primary{background:linear-gradient(135deg,#8d23ff,#df13cf);border:0}
.media-frame{width:100%;height:100%;min-height:340px;border:0;border-radius:14px;background:#000;object-fit:contain}.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:8px}.photo-grid figure{margin:0;border:1px solid rgba(255,255,255,.10);border-radius:12px;overflow:hidden}.photo-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}.photo-grid figcaption{padding:6px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
textarea,input[type=text],input[type=url],input[type=password],select{width:100%;background:#080719;border:1px solid #584d78;color:#fff;border-radius:10px;padding:9px}textarea{resize:vertical}
.youtube-layout{display:grid;grid-template-columns:minmax(430px,.9fr) 1.1fr;gap:13px;height:100%}.yt-results{display:grid;gap:7px;max-height:53vh;overflow:auto;padding-right:6px}.yt-row{display:grid;grid-template-columns:110px 1fr auto;gap:9px;align-items:center;border-bottom:1px solid rgba(255,255,255,.08);padding:5px}.yt-row img{width:110px;height:62px;object-fit:cover;border-radius:8px}.yt-row b{font-size:12px}.yt-row small{display:block;color:var(--muted);font-size:10px}.yt-actions{display:grid;gap:4px}.yt-actions button{font-size:10px}
.game-layout{display:grid;grid-template-columns:320px 1fr;gap:14px;height:100%}.wheelbox{display:grid;place-items:center}.pointer{width:0;height:0;border-left:18px solid transparent;border-right:18px solid transparent;border-top:38px solid white;margin-bottom:-13px;z-index:2}.wheel{width:min(330px,48vh);aspect-ratio:1;border-radius:50%;border:8px solid white;background:conic-gradient(#ff19c9 0 45deg,#7835ff 45deg 90deg,#00aaff 90deg 135deg,#00e978 135deg 180deg,#ffd21c 180deg 225deg,#ff8d00 225deg 270deg,#ed4bff 270deg 315deg,#216eff 315deg);transition:transform 4s cubic-bezier(.1,.8,.12,1);box-shadow:0 0 35px rgba(165,49,255,.45);position:relative}.wheel:after{content:"LOOSI";position:absolute;inset:35%;display:grid;place-items:center;border-radius:50%;background:#080719;border:4px solid white;font-weight:950}.result{text-align:center;font-weight:900;font-size:26px;margin-top:10px}.task{text-align:center;font-size:18px;margin-top:7px}
.tools-grid,.docs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}.tool-card{border:1px solid rgba(255,255,255,.10);border-radius:13px;background:rgba(255,255,255,.03);padding:13px}.tool-card h4{margin:0 0 6px}.tool-card p{color:var(--muted);font-size:12px;min-height:35px}
.playerbar{height:var(--footer-h);margin:0 16px 10px 212px;border:1px solid rgba(165,99,255,.55);background:rgba(7,6,25,.92);backdrop-filter:blur(16px);border-radius:17px;display:grid;grid-template-columns:300px 1fr 220px;gap:16px;align-items:center;padding:8px 14px;box-shadow:var(--shadow)}
.now-playing{display:flex;align-items:center;gap:10px;min-width:0}.album-box{width:54px;height:54px;border-radius:11px;background:linear-gradient(135deg,#6e27ff,#d717e7);display:grid;place-items:center;font-size:25px}.now-playing>div:last-child{min-width:0}.now-playing strong,.now-playing span,.now-playing small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.now-playing span{font-size:12px}.now-playing small{font-size:11px;color:#d3cfe1}
.player-center{display:grid;gap:4px}.controls{display:flex;justify-content:center;gap:9px}.controls button{border:0;background:transparent;font-size:17px}.controls .play{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#6721ff,#d117e5);border:2px solid #b564ff;box-shadow:0 0 18px #7f2bff}.volume-area{display:grid;grid-template-columns:auto 1fr auto;gap:7px;align-items:center}input[type=range]{width:100%;accent-color:#9a43ff}
.modal{position:fixed;inset:0;z-index:80;background:rgba(0,0,10,.72);backdrop-filter:blur(9px);display:grid;place-items:center}.hidden{display:none!important}.modal-card{width:min(940px,calc(100vw - 36px));max-height:88vh;overflow:auto;border:1px solid rgba(177,101,255,.55);border-radius:18px;background:#09091b;padding:18px}.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.admin-section{border:1px solid rgba(255,255,255,.10);border-radius:13px;padding:13px}.admin-section h3{margin-top:0}.field{display:grid;gap:5px;margin-bottom:9px}.field label{font-size:11px;color:var(--muted);font-weight:700}.toggle{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.07)}.preview{max-width:100%;max-height:160px;object-fit:contain;border:1px solid rgba(255,255,255,.1);border-radius:11px;background:#050511}
.toast{position:fixed;right:22px;bottom:104px;z-index:100;background:#14102b;border:1px solid #8755d3;border-radius:11px;padding:10px 13px;opacity:0;transform:translateY(8px);transition:.2s;pointer-events:none}.toast.show{opacity:1;transform:none}
html,*{scrollbar-width:thin;scrollbar-color:#36a8ff rgba(255,255,255,.08)}::-webkit-scrollbar{width:11px;height:11px}::-webkit-scrollbar-track{background:rgba(255,255,255,.08);border-radius:10px}::-webkit-scrollbar-thumb{background:linear-gradient(#6ecbff,#258fff);border-radius:10px;border:2px solid rgba(4,3,15,.7)}::-webkit-scrollbar-corner{background:rgba(255,255,255,.05)}

@media(max-width:1500px){
  :root{--footer-h:80px}
  .app-shell{grid-template-columns:160px 1fr;gap:12px;padding:10px 12px 5px}
  .playerbar{margin-left:184px;margin-right:12px}
  .topbar{min-height:102px}.main-title{font-size:52px}.top-widgets{grid-template-columns:120px 120px 160px}.status-card{min-height:74px}.top-module{min-height:125px;grid-template-columns:82px 1fr;padding:13px}.top-module .icon{font-size:54px}.top-module h3{font-size:19px}.dashboard-grid{gap:10px}.panel{padding:11px}.game-buttons button{min-height:72px}.fake-qr{height:105px}.phone-content{grid-template-columns:105px 1fr}
}
@media(max-width:1100px){
  html,body{overflow:auto}.app-shell{height:auto;min-height:100vh;grid-template-columns:130px 1fr}.playerbar{position:sticky;bottom:0;margin-left:142px}.top-widgets{display:none}.top-modules{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto}.phone-panel,.youtube-panel,.games-panel,.admin-panel,.weather-info,.favorites-panel{grid-column:auto;grid-row:auto}.youtube-panel,.admin-panel{min-height:320px}.cols,.youtube-layout,.game-layout{grid-template-columns:1fr}.admin-grid{grid-template-columns:1fr}
}


/* v2.1 – näidispildile lähem nähtav peo/neoon-taust */
.wallpaper{
  filter:saturate(1.12) contrast(1.04);
}
.shade{
  background:
    linear-gradient(180deg,rgba(2,0,10,.14) 0%,rgba(3,1,14,.31) 22%,rgba(3,2,15,.55) 58%,rgba(2,2,11,.75) 100%);
}
.topbar,.top-modules,.dashboard-grid{
  position:relative;
  z-index:1;
}


/* v2.2 – peo-/laseritaust ülaservas päriselt nähtav */
.wallpaper{
  background-image:url('assets/maikl_neon_bg.jpg') !important;
  background-position:top center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  filter:saturate(1.35) brightness(1.22) contrast(1.08) !important;
}
.shade{
  background:
    linear-gradient(
      180deg,
      rgba(2,0,10,.02) 0%,
      rgba(2,0,10,.08) 12%,
      rgba(3,1,14,.22) 28%,
      rgba(3,2,15,.52) 58%,
      rgba(2,2,11,.76) 100%
    ) !important;
}
/* eraldi helendus aitab laseritel ülal läbi tulla */
.topbar:before{
  content:"";
  position:fixed;
  left:0;right:0;top:0;
  height:230px;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(circle at 17% 5%,rgba(208,20,255,.22),transparent 34%),
    radial-gradient(circle at 73% 4%,rgba(0,134,255,.22),transparent 34%);
}

/* Moodulites pole enam dubleerivat pealkirjariba */
.module-view{
  padding:0 !important;
  min-height:0;
  flex:1;
}
.module-body{
  height:100%;
  min-height:0;
  overflow:auto;
  padding:14px;
  border-radius:18px;
}

.module-head{display:none!important}


/* v2.3 projektiüla-taust ja kokkuklapitav vasak menüü */
:root{
  --sidebar-collapsed: 86px;
  --sidebar-expanded: 182px;
}
.wallpaper{
  background-image:url('assets/maikl_project_bg.jpg') !important;
  background-position:center top !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
}
.shade{
  background: linear-gradient(180deg,
    rgba(8,5,25,.06) 0%,
    rgba(8,5,25,.12) 22%,
    rgba(8,5,25,.24) 42%,
    rgba(8,5,25,.50) 68%,
    rgba(7,6,18,.72) 100%
  ) !important;
}
.sidebar{
  width:var(--sidebar-collapsed) !important;
  overflow:hidden;
  transition:width .26s ease !important;
}
.sidebar:hover,
.sidebar:focus-within,
.sidebar.open{
  width:var(--sidebar-expanded) !important;
}
.main{
  grid-template-columns: var(--sidebar-collapsed) 1fr !important;
}
.sidebar .menu-item{
  justify-content:flex-start !important;
  gap:14px !important;
}
.sidebar .menu-label,
.sidebar .brand-text,
.sidebar .side-footer,
.sidebar .menu-item small{
  white-space:nowrap;
  opacity:0;
  transition:opacity .2s ease;
}
.sidebar:hover .menu-label,
.sidebar:focus-within .menu-label,
.sidebar.open .menu-label,
.sidebar:hover .brand-text,
.sidebar:focus-within .brand-text,
.sidebar.open .brand-text,
.sidebar:hover .side-footer,
.sidebar:focus-within .side-footer,
.sidebar.open .side-footer,
.sidebar:hover .menu-item small,
.sidebar:focus-within .menu-item small,
.sidebar.open .menu-item small{
  opacity:1;
}
.sidebar:not(:hover):not(:focus-within):not(.open) .menu-item{
  justify-content:center !important;
}
.sidebar:not(:hover):not(:focus-within):not(.open) .menu-label,
.sidebar:not(:hover):not(:focus-within):not(.open) .menu-item small,
.sidebar:not(:hover):not(:focus-within):not(.open) .brand-text,
.sidebar:not(:hover):not(:focus-within):not(.open) .side-footer{
  display:none !important;
}
.left-corner-art{
  left:10px !important;
  bottom:10px !important;
  max-width:60px !important;
}
.sidebar:hover .left-corner-art,
.sidebar:focus-within .left-corner-art,
.sidebar.open .left-corner-art{
  max-width:120px !important;
}


/* v2.4 – uus mockup-taust + klõpsatav vasak menüü */
:root{
  --sidebar-collapsed: 82px;
  --sidebar-expanded: 250px;
}

/* taust täpselt mockupi stiilis */
.wallpaper{
  background-image:url('assets/media_mockup_bg.jpg') !important;
  background-position:center top !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
}
.shade{
  background:
    radial-gradient(circle at 18% 12%, rgba(255,0,170,.10) 0%, rgba(255,0,170,0) 18%),
    radial-gradient(circle at 82% 10%, rgba(0,195,255,.11) 0%, rgba(0,195,255,0) 18%),
    linear-gradient(180deg, rgba(8,6,22,.12) 0%, rgba(8,6,22,.28) 42%, rgba(8,6,22,.58) 100%) !important;
}

/* ainult clickiga avatav menüü */
.main{
  grid-template-columns: var(--sidebar-collapsed) 1fr !important;
  transition: grid-template-columns .24s ease !important;
}
.sidebar{
  width: var(--sidebar-collapsed) !important;
  overflow: hidden !important;
  transition: width .24s ease, box-shadow .24s ease !important;
  cursor: pointer;
}
.sidebar.open{
  width: var(--sidebar-expanded) !important;
  box-shadow: 0 10px 40px rgba(0,0,0,.30) !important;
}
.main.sidebar-open{
  grid-template-columns: var(--sidebar-expanded) 1fr !important;
}

/* ära ava hoveriga */
.sidebar:hover{
  width: var(--sidebar-collapsed) !important;
}
.sidebar.open:hover{
  width: var(--sidebar-expanded) !important;
}

/* Tekstid ainult lahtises olekus */
.sidebar .menu-label,
.sidebar .brand-text,
.sidebar .side-footer,
.sidebar .menu-item small{
  white-space: nowrap;
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  transform: translateX(-8px);
}
.sidebar.open .menu-label,
.sidebar.open .brand-text,
.sidebar.open .side-footer,
.sidebar.open .menu-item small{
  opacity: 1;
  transform: none;
}
.sidebar:not(.open) .menu-label,
.sidebar:not(.open) .brand-text,
.sidebar:not(.open) .side-footer,
.sidebar:not(.open) .menu-item small{
  display: none !important;
}
.sidebar .menu-item{
  justify-content: center !important;
  gap: 12px !important;
}
.sidebar.open .menu-item{
  justify-content: flex-start !important;
  gap: 14px !important;
}
.sidebar .logo-wrap{
  justify-content: center !important;
}
.sidebar.open .logo-wrap{
  justify-content: flex-start !important;
}

/* Vasak all taust/logo oleks näha */
.left-corner-art{
  left: 10px !important;
  bottom: 12px !important;
  max-width: 62px !important;
  opacity: .98 !important;
  transition: max-width .24s ease, opacity .24s ease !important;
}
.sidebar.open .left-corner-art{
  max-width: 220px !important;
}

/* Natuke rohkem ruumi logole avatud menüüs */
.sidebar.open .side-footer{
  padding-bottom: 8px !important;
}

/* Kui olemas burger */
.sidebar-toggle{
  display:flex !important;
  cursor:pointer !important;
}

/* Veidi ilusam aktiivne glow menüül */
.sidebar.open,
.sidebar{
  background: linear-gradient(180deg, rgba(8,10,35,.74), rgba(10,8,28,.66)) !important;
  backdrop-filter: blur(8px);
}


/* ===== v2.5 HEADER + SIDEBAR LOCK FIX ===== */
:root{
  --sidebar-open-w: 260px;
  --sidebar-closed-w: 86px;
}

/* top hero banner like mockup */
.topbar{
  position: relative !important;
  overflow: hidden !important;
  min-height: 180px !important;
  padding: 18px 18px 18px !important;
  border: 1px solid rgba(172,112,255,.38) !important;
  border-radius: 26px !important;
  background: rgba(7, 5, 20, .44) !important;
  backdrop-filter: blur(2px);
}
.topbar::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(22,8,40,.40), rgba(8,6,20,.08)),
    url('assets/maikl_project_bg.jpg') center center / cover no-repeat;
  opacity:.98;
  z-index:0;
}
.topbar::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(7,4,20,.08), rgba(7,4,20,.20));
  z-index:1;
}
.title-wrap,.top-widgets{
  position:relative; z-index:2;
}

/* sticky sidebar with lock/open state */
.app-shell{
  --_sidebarW: var(--sidebar-open-w);
  grid-template-columns: var(--_sidebarW) 1fr !important;
  transition: grid-template-columns .24s ease !important;
}
.app-shell.sidebar-collapsed{
  --_sidebarW: var(--sidebar-closed-w);
}
.sidebar{
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  transition: width .24s ease, transform .24s ease !important;
  padding-top: 42px !important;
}
#sideToggle{
  position:absolute;
  top:10px; left:10px;
  width:32px; height:32px;
  border-radius:10px;
  border:1px solid rgba(180,125,255,.45);
  background:rgba(19,12,38,.78);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
  z-index:5;
}
#sideToggle:hover{background:rgba(120,53,255,.45)}

.brand-home,.side-nav button{
  position:relative;
  overflow:hidden;
  min-height: 38px !important;
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  padding: 0 12px !important;
  justify-content:flex-start !important;
  white-space: nowrap;
}
.brand-home span,.side-nav button span{
  opacity:1; transition: opacity .16s ease, max-width .16s ease, margin .16s ease;
  max-width: 180px; overflow:hidden;
}
.app-shell.sidebar-collapsed .brand-home,
.app-shell.sidebar-collapsed .side-nav button{
  justify-content:center !important;
  gap:0 !important;
  padding: 0 6px !important;
}
.app-shell.sidebar-collapsed .brand-home span,
.app-shell.sidebar-collapsed .side-nav button span{
  opacity:0 !important;
  max-width:0 !important;
  margin:0 !important;
}
.app-shell.sidebar-collapsed .side-logo-wrap{
  min-height: 110px !important;
}
.side-logo-wrap img{
  transition: max-width .24s ease, opacity .24s ease !important;
  width:auto !important;
  object-fit: contain !important;
  object-position: center bottom !important;
}
.app-shell.sidebar-collapsed .side-logo-wrap img{
  max-width: 58px !important;
  opacity: .96 !important;
}
.app-shell:not(.sidebar-collapsed) .side-logo-wrap img{
  max-width: 190px !important;
}

/* little more room because topbar now has image */
.main-area{
  overflow:hidden !important;
}

/* ensure top title sits nicely */
.title-wrap{
  padding: 2px 0 0 4px !important;
}
.main-title{
  margin-top: 2px !important;
}
.welcome{
  margin-top: 10px !important;
  text-shadow: 0 3px 10px rgba(0,0,0,.55);
}

/* on smaller windows keep still visible */
@media (max-width: 1400px){
  .topbar{min-height:160px !important}
  .app-shell{gap:12px !important;padding:12px !important}
}


/* ===== v2.6 STABLE HEADER + CLICK MENU + AUTOSAVE NOTES ===== */

/* Header default image with people. Admin can override via inline style from JS. */
.topbar{
  position:relative !important;
  min-height:178px !important;
  overflow:hidden !important;
  background:
    linear-gradient(180deg,rgba(4,2,13,.12),rgba(4,2,13,.34)),
    url('assets/header_people.jpg') center 35% / cover no-repeat !important;
}
.topbar::before,.topbar::after{
  pointer-events:none !important;
}
.topbar::before{
  background:linear-gradient(90deg,rgba(10,4,25,.20),rgba(5,3,18,.02),rgba(8,4,25,.14)) !important;
  opacity:1 !important;
}
.topbar::after{
  background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(5,3,15,.16)) !important;
}

/* Toggle sits under MAIKL title, never inside the sidebar. */
.header-menu-toggle{
  margin-top:10px;
  border:1px solid rgba(187,126,255,.65);
  background:rgba(8,7,27,.76);
  color:#fff;
  border-radius:12px;
  min-width:116px;
  padding:8px 13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:850;
  box-shadow:0 7px 22px rgba(0,0,0,.30);
}
.header-menu-toggle:hover{
  background:rgba(118,42,255,.40);
  transform:translateY(-1px);
}

/* Sidebar is controlled ONLY by .menu-open on app-shell. No hover/focus auto collapse. */
.app-shell{
  --side-w:0px !important;
  grid-template-columns:var(--side-w) 1fr !important;
  transition:grid-template-columns .25s ease !important;
}
.app-shell.menu-open{
  --side-w:260px !important;
}
.sidebar,
.sidebar:hover,
.sidebar:focus-within,
.sidebar.open,
.app-shell.sidebar-collapsed .sidebar{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  overflow:hidden !important;
  opacity:0;
  pointer-events:none;
  transform:translateX(-18px);
  transition:opacity .20s ease,transform .25s ease !important;
  padding:10px !important;
}
.app-shell.menu-open .sidebar,
.app-shell.menu-open .sidebar:hover,
.app-shell.menu-open .sidebar:focus-within{
  opacity:1 !important;
  pointer-events:auto !important;
  transform:none !important;
  width:100% !important;
}

/* Always show labels while menu is open. Disable old collapsed selectors. */
.app-shell.menu-open .brand-home span,
.app-shell.menu-open .side-nav button span{
  display:inline !important;
  opacity:1 !important;
  max-width:190px !important;
  transform:none !important;
  margin:0 !important;
}
.app-shell.menu-open .brand-home,
.app-shell.menu-open .side-nav button{
  display:grid !important;
  grid-template-columns:34px 1fr !important;
  justify-content:initial !important;
  text-align:left !important;
  gap:0 !important;
  padding:10px 12px !important;
}
.app-shell.menu-open .side-logo-wrap{
  min-height:170px !important;
}
.app-shell.menu-open .side-logo-wrap img{
  max-width:220px !important;
  max-height:205px !important;
  opacity:1 !important;
}

/* Hide old auto menu button if it was inserted by v2.5. */
#sideToggle{display:none !important}

/* Homepage notes box */
.home-notes-panel{
  display:flex !important;
  flex-direction:column !important;
}
.home-notes-area{
  flex:1;
  min-height:145px;
  resize:none !important;
  background:rgba(4,5,17,.64) !important;
  border:1px solid rgba(147,100,220,.35) !important;
  border-radius:12px !important;
  color:#fff !important;
  padding:11px !important;
  line-height:1.45;
}
.home-notes-area:focus{
  border-color:#9d54ff !important;
  outline:none;
  box-shadow:0 0 0 2px rgba(157,84,255,.12);
}
.home-notes-foot{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:7px;
  font-size:10px;
  color:var(--muted);
}
.autosave-state{
  font-size:9px;
  color:#68e9ac;
  letter-spacing:.7px;
  font-weight:850;
}

/* Ensure default homepage placement remains where PEOMÄNGUD used to be. */
.home-notes-panel{grid-column:3;grid-row:1}

/* responsive sidebar width */
@media(max-width:1100px){
  .app-shell.menu-open{--side-w:250px !important}
}


/* ===== v2.7 LEFT LOGO + PLAYERBAR FLOW ===== */

/* Vasaku menüü alumine pilt: alati laiuse järgi, proportsioon säilib, alumisse serva */
.side-logo-wrap{
  margin-top:auto !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:center !important;
  width:100% !important;
  min-height:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}
.side-logo-wrap img{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center bottom !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
}

/* Kui menüü avatud 260 px, kasuta pildile kogu sisulaiust */
.app-shell.menu-open .side-logo-wrap img{
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
}

/* Vali lugu / playerbar ei ole enam eraldi "fikseeritud" tunne.
   Ta liigub koos põhisisuga ja võtab sama laiuse nagu muu sisu. */
.playerbar{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  width:auto !important;
  margin:8px 16px 10px !important;
  min-height:72px !important;
  height:auto !important;
  grid-template-columns:minmax(220px, 320px) 1fr minmax(170px, 220px) !important;
  padding:8px 14px !important;
  border-radius:16px !important;
  transition:margin-left .25s ease,width .25s ease,transform .25s ease !important;
}

/* Menüü avamisel joondub pleier ülejäänud sisuga */
body:has(.app-shell.menu-open) .playerbar{
  margin-left:292px !important;
}
body:not(:has(.app-shell.menu-open)) .playerbar{
  margin-left:16px !important;
}

/* Natuke kompaktsem, et ei jääks teistest plokkidest pikem ja raskem */
.now-playing{
  min-height:54px !important;
}
.album-box{
  width:48px !important;
  height:48px !important;
}
.controls .play{
  width:44px !important;
  height:44px !important;
}

/* Väiksematel ekraanidel liigub loomulikult kaasa */
@media(max-width:1100px){
  .playerbar{
    margin-left:12px !important;
    margin-right:12px !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
  }
}


/* ===== v2.8 FULL HEIGHT SIDEBAR + CLEAN HEADER + PLAYER SLIDESHOW ===== */

/* kogu rakendus on ühe täisekraani ruudustik */
.app-shell{
  height:100vh !important;
  min-height:100vh !important;
  padding:12px 16px 10px !important;
  align-items:stretch !important;
}
.main-area{
  height:100% !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
}

/* Vasak riba päriselt alla servani */
.sidebar{
  height:100% !important;
  min-height:0 !important;
  align-self:stretch !important;
  padding:10px 10px 0 !important;
  border-radius:18px !important;
}

/* Logo kast täiesti äärest ääreni ja allservas */
.side-logo-wrap{
  margin-top:auto !important;
  margin-left:-10px !important;
  margin-right:-10px !important;
  margin-bottom:0 !important;
  width:calc(100% + 20px) !important;
  min-height:0 !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:stretch !important;
  padding:0 !important;
  overflow:hidden !important;
  border-radius:0 0 17px 17px !important;
}
.side-logo-wrap img{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  height:auto !important;
  max-height:250px !important;
  object-fit:contain !important;
  object-position:center bottom !important;
  margin:0 !important;
  padding:0 !important;
}
.app-shell.menu-open .side-logo-wrap img{
  width:100% !important;
  max-width:none !important;
  max-height:290px !important;
}

/* Header: ainult tekstivaba inimeste/laserite pilt taustal */
.topbar{
  min-height:158px !important;
  background:
    linear-gradient(180deg,rgba(3,2,12,.05),rgba(3,2,12,.25)),
    url('assets/header_people.jpg') center 48% / cover no-repeat !important;
}
.topbar::before{
  background:linear-gradient(90deg,rgba(7,3,20,.14),rgba(3,2,12,.00),rgba(7,3,20,.10)) !important;
}
.topbar::after{
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(5,3,15,.10)) !important;
}

/* Ilm ja kell kitsamad, aga veidi kõrgemad */
.top-widgets{
  grid-template-columns:112px 112px 176px !important;
  gap:8px !important;
}
.status-card{
  min-height:98px !important;
  padding:10px 11px !important;
  border-radius:14px !important;
}
.status-card b{font-size:19px !important}
.status-card .clock{font-size:28px !important}
.big-icon{font-size:29px !important}

/* playerbar on nüüd main-area sees ja liigub loomulikult koos sisuga */
.playerbar{
  position:relative !important;
  margin:8px 0 0 !important;
  width:100% !important;
  min-height:76px !important;
  height:76px !important;
  flex:0 0 76px !important;
  overflow:hidden !important;
  grid-template-columns:minmax(230px,300px) 1fr minmax(170px,210px) !important;
  background:rgba(7,6,25,.92) !important;
}
.playerbar > *:not(.player-bg){
  position:relative;
  z-index:2;
}
.player-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:.25;
  transition:opacity .65s ease, background-image .65s ease;
}
.playerbar::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(90deg,rgba(5,4,18,.80),rgba(5,4,18,.50),rgba(5,4,18,.76));
  pointer-events:none;
}

/* EQ mänguribal */
.player-eq{
  height:18px;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:3px;
  margin-bottom:1px;
}
.player-eq i{
  width:4px;
  min-height:3px;
  height:4px;
  border-radius:3px 3px 1px 1px;
  background:linear-gradient(180deg,#ff33dd,#8a39ff 55%,#00bfff);
  opacity:.70;
  transform-origin:bottom;
}
body.audio-playing .player-eq i{
  animation:eqBounce .62s ease-in-out infinite alternate;
}
body.audio-playing .player-eq i:nth-child(2n){animation-duration:.44s}
body.audio-playing .player-eq i:nth-child(3n){animation-duration:.78s}
body.audio-playing .player-eq i:nth-child(4n){animation-delay:.13s}
body.audio-playing .player-eq i:nth-child(5n){animation-delay:.27s}
@keyframes eqBounce{
  from{height:4px}
  to{height:18px}
}

/* põhisisu saab pleieri võrra õige kõrguse */
.view{
  flex:1 1 auto !important;
  min-height:0 !important;
}
#homeView.active{
  overflow:hidden !important;
}
.module-view{
  overflow:hidden !important;
}

/* adminis folder-input */
.folder-hint{
  font-size:11px;
  color:var(--muted);
  line-height:1.4;
  margin-top:6px;
}
.player-bg-count{
  font-size:11px;
  color:#6ee7b7;
  margin-top:6px;
}

@media(max-width:1100px){
  html,body{overflow:auto !important}
  .app-shell{height:auto !important;min-height:100vh !important}
  .playerbar{
    height:auto !important;
    min-height:100px !important;
    flex:none !important;
    grid-template-columns:1fr !important;
  }
}


/* ===== v2.9 DEEP LAYOUT FIX ===== */

/* Header returns to the cleaner earlier look: curved crowd silhouette, no baked text. */
.topbar{
  min-height:142px !important;
  max-height:142px !important;
  padding:12px 14px !important;
  background:
    linear-gradient(180deg,rgba(4,2,13,.03),rgba(4,2,13,.16)),
    url('assets/header_people.jpg') center 52% / cover no-repeat !important;
  border-radius:24px !important;
}
.topbar::before{
  background:linear-gradient(90deg,rgba(5,2,18,.10),rgba(5,2,18,0),rgba(5,2,18,.08)) !important;
}
.topbar::after{
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(5,3,15,.06)) !important;
}

/* Small, tall status boxes */
.top-widgets{
  grid-template-columns:94px 100px 142px !important;
  gap:7px !important;
}
.status-card{
  min-height:84px !important;
  max-height:84px !important;
  padding:8px 9px !important;
  border-radius:13px !important;
}
.status-card b{font-size:16px !important}
.status-card .clock{font-size:24px !important}
.status-card small{font-size:9px !important}
.big-icon{font-size:23px !important}
.avatar{width:33px !important;height:33px !important}

/* Compact header title so crowd artwork remains visible. */
.main-title{font-size:clamp(36px,4vw,58px) !important}
.welcome{font-size:17px !important;margin-top:2px !important}
.header-menu-toggle{margin-top:5px !important;padding:5px 10px !important;min-width:100px !important;font-size:11px !important}

/* Player is aligned, fully visible and never drops below the viewport. */
.app-shell{
  height:100vh !important;
  min-height:100vh !important;
  max-height:100vh !important;
  overflow:hidden !important;
}
.main-area{height:100% !important;min-height:0 !important;overflow:hidden !important}
.playerbar{
  width:100% !important;
  box-sizing:border-box !important;
  min-height:72px !important;
  height:72px !important;
  flex:0 0 72px !important;
  margin:7px 0 0 !important;
  grid-template-columns:minmax(215px,285px) 1fr minmax(155px,195px) !important;
  border-radius:15px !important;
}
.now-playing{min-height:50px !important}
.album-box{width:46px !important;height:46px !important}
.player-center{display:grid !important;grid-template-rows:44px 8px !important;gap:3px !important;align-items:center !important}
.controls{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  height:44px !important;
}
.controls .play{width:42px !important;height:42px !important;flex:0 0 42px !important}

/* EQ sits inline beside the play button. */
.player-eq{
  width:112px !important;
  height:25px !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:center !important;
  gap:3px !important;
  margin:0 6px !important;
  flex:0 0 112px !important;
}
.player-eq i{width:4px !important;max-height:23px !important}
@keyframes eqBounce{from{height:4px}to{height:23px}}

/* Slideshow is clearly visible. */
.player-bg{
  opacity:.38 !important;
  transition:opacity .35s ease !important;
  background-position:center center !important;
  background-size:cover !important;
}
.player-bg.changing{opacity:.08 !important}
.playerbar::after{
  background:linear-gradient(90deg,rgba(5,4,18,.72),rgba(5,4,18,.36),rgba(5,4,18,.68)) !important;
}

/* fit everything above player on common laptop displays */
@media(max-height:900px) and (min-width:1101px){
  .topbar{min-height:122px !important;max-height:122px !important}
  .main-title{font-size:44px !important}
  .welcome{font-size:15px !important}
  .top-modules{margin-bottom:8px !important;gap:9px !important}
  .top-module{min-height:106px !important;padding:10px !important;grid-template-columns:70px 1fr !important}
  .top-module .icon{font-size:46px !important}
  .top-module h3{font-size:17px !important}
  .dashboard-grid{gap:8px !important}
  .panel{padding:9px !important}
  .playerbar{height:66px !important;min-height:66px !important;flex-basis:66px !important}
}

/* Admin no longer has login/password concepts. */
.admin-section h3{letter-spacing:.2px}


/* ===== v3.0 FINAL LAYOUT / HEADER LAYER / QR / PLAYER ===== */

/* Header image is a background layer that continues behind the top cards. */
.main-area{
  position:relative !important;
  isolation:isolate;
  --header-image:url('assets/header_people.jpg');
}
.main-area::before{
  content:"";
  position:absolute;
  z-index:0;
  left:0;right:0;top:0;
  height:235px;
  border:1px solid rgba(172,112,255,.34);
  border-radius:24px;
  background:
    linear-gradient(180deg,rgba(4,2,13,.02) 0%,rgba(4,2,13,.10) 60%,rgba(4,2,13,.28) 100%),
    var(--header-image) center 52% / cover no-repeat;
  pointer-events:none;
}
.topbar{
  position:relative !important;
  z-index:2 !important;
  min-height:120px !important;
  max-height:120px !important;
  border:none !important;
  border-radius:24px !important;
  background:transparent !important;
  backdrop-filter:none !important;
  overflow:visible !important;
}
#homeView,.module-view,.playerbar{
  position:relative;
  z-index:2;
}
.top-modules{
  position:relative;
  z-index:3;
  margin-top:-7px !important;
}

/* Only weather + clock remain at top right. */
.top-widgets{
  grid-template-columns:90px 96px !important;
  gap:7px !important;
}
.status-card{
  min-height:76px !important;
  max-height:76px !important;
  padding:7px 8px !important;
}
.status-card b{font-size:15px !important}
.status-card .clock{font-size:22px !important}
.status-card small{font-size:8.5px !important;line-height:1.2}
.big-icon{font-size:21px !important}

/* Real QR */
.real-qr-wrap{
  display:flex;
  flex-direction:column;
  gap:5px;
  align-items:center;
}
.real-qr{
  width:125px;
  height:125px;
  display:block;
  object-fit:contain;
  border:7px solid white;
  border-radius:11px;
  background:#fff;
  box-shadow:0 0 17px rgba(147,60,255,.52);
}
.qr-refresh{
  border:1px solid rgba(154,95,255,.55);
  background:rgba(12,9,35,.75);
  color:#fff;
  border-radius:8px;
  padding:4px 8px;
  font-size:10px;
}
.phone-info{min-width:0}
.phone-url{
  display:block;
  color:#69c8ff;
  font-size:10px;
  line-height:1.3;
  word-break:break-all;
  margin-top:7px;
}
.phone-requests{
  margin-top:8px;
  display:grid;
  gap:4px;
  font-size:10px;
}
.phone-request{
  display:grid;
  grid-template-columns:1fr auto;
  gap:5px;
  align-items:center;
}
.phone-request span{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.phone-request button{
  border:1px solid rgba(145,94,232,.45);
  background:rgba(255,255,255,.04);
  color:#fff;
  border-radius:7px;
  padding:3px 6px;
  font-size:9px;
}
.phone-empty{color:var(--muted)}

/* Definitive player alignment: neutralize all older menu-dependent margins. */
body .app-shell .main-area .playerbar,
body:has(.app-shell.menu-open) .playerbar,
body:not(:has(.app-shell.menu-open)) .playerbar,
body:has(.app-shell.sidebar-collapsed) .playerbar{
  position:relative !important;
  display:grid !important;
  left:0 !important;
  right:0 !important;
  bottom:auto !important;
  transform:none !important;
  width:100% !important;
  max-width:100% !important;
  margin:7px 0 0 0 !important;
  box-sizing:border-box !important;
  justify-self:stretch !important;
  align-self:stretch !important;
}
.playerbar{
  min-height:68px !important;
  height:68px !important;
  flex:0 0 68px !important;
  grid-template-columns:minmax(205px,270px) minmax(0,1fr) minmax(145px,185px) !important;
  overflow:hidden !important;
}
.player-center{min-width:0 !important}
.controls{min-width:0 !important}

/* Equalizer stays inline and compact. */
.player-eq{
  width:92px !important;
  flex:0 0 92px !important;
  height:22px !important;
  margin:0 4px !important;
}
.player-eq i{width:3px !important}
@keyframes eqBounce{from{height:3px}to{height:20px}}

/* player slideshow visibility */
.player-bg{
  opacity:.42 !important;
  background-position:center center !important;
  background-size:cover !important;
}
.player-bg.changing{opacity:.08 !important}


/* ===== v3.0.1 top cards overlap fix ===== */
/* Lase headeri peal veidi üle ulatuda, aga ära lõika kaarte maha */
.main-area,
.home-layout,
.topbar,
.top-modules{
  overflow: visible !important;
}

.main-area::before{
  height: 248px !important;
}

.topbar{
  min-height: 128px !important;
  max-height: none !important;
  margin-bottom: 2px !important;
}

.top-modules{
  position: relative !important;
  z-index: 4 !important;
  margin-top: -4px !important;   /* veidi headeri peale */
  padding-top: 10px !important;  /* jätab ülaserva nähtavaks */
  margin-bottom: 13px !important;
}

.top-module{
  position: relative !important;
  z-index: 4 !important;
  transform: none !important;
}

.top-module:hover{
  transform: translateY(-4px) scale(1.015) !important;
}

/* Kui ekraan on kitsam, vähenda kattumist veel */
@media (max-width: 1400px){
  .main-area::before{ height: 238px !important; }
  .topbar{ min-height: 122px !important; }
  .top-modules{ margin-top: 0 !important; padding-top: 8px !important; }
}


/* ===== v3.1 user layout changes ===== */

/* 1. Vasaku menüü alumine pilt täidab KOGU allesjäänud kõrguse.
   Ka kitsas/püstine pilt venib kogu alale; object-fit:cover täidab ala äärest ääreni. */
.sidebar{
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
}
.side-nav{
  flex:0 0 auto !important;
}
.side-logo-wrap{
  flex:1 1 auto !important;
  min-height:0 !important;
  width:calc(100% + 20px) !important;
  margin-left:-10px !important;
  margin-right:-10px !important;
  margin-bottom:0 !important;
  display:flex !important;
  align-items:stretch !important;
  justify-content:stretch !important;
  overflow:hidden !important;
}
.side-logo-wrap img,
.app-shell.menu-open .side-logo-wrap img{
  width:100% !important;
  height:100% !important;
  min-height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center bottom !important;
  display:block !important;
}

/* 2. Slaidid on MUUSIKA moodulis, mitte alumise playeri taustal. */
.music-stage{
  position:relative !important;
  overflow:hidden !important;
  min-height:100% !important;
  padding:0 !important;
  display:grid !important;
  place-items:center !important;
  background:#050611 !important;
}
.music-slide-bg{
  position:absolute;
  inset:0;
  background-position:center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  opacity:.78;
  transform:scale(1.015);
  transition:opacity .35s ease, transform 5s linear;
}
.music-slide-bg.has-slides{transform:scale(1.045)}
.music-slide-bg.changing{opacity:.12 !important}
.music-stage-shade{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 55%,rgba(30,8,58,.06),rgba(3,4,14,.65) 70%),
    linear-gradient(180deg,rgba(4,4,16,.18),rgba(4,4,16,.48));
}
.music-stage-content{
  position:relative;
  z-index:2;
  text-align:center;
  text-shadow:0 3px 14px rgba(0,0,0,.8);
}
.music-stage-content h2{margin:10px 0 5px;font-size:28px}
.music-stage-content p{margin:0;color:#eee}
.music-stage-eq{
  height:70px;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:5px;
}
.music-stage-eq i{
  width:8px;
  height:12px;
  border-radius:5px 5px 2px 2px;
  background:linear-gradient(180deg,#ff32d8,#9635ff 55%,#00bcff);
  box-shadow:0 0 10px rgba(160,42,255,.6);
}
body.audio-playing .music-stage-eq i{animation:musicEq 0.7s ease-in-out infinite alternate}
body.audio-playing .music-stage-eq i:nth-child(2n){animation-duration:.45s}
body.audio-playing .music-stage-eq i:nth-child(3n){animation-duration:.85s}
body.audio-playing .music-stage-eq i:nth-child(5n){animation-delay:.2s}
@keyframes musicEq{from{height:10px}to{height:64px}}

/* Alumisel ribal ei ole enam slaiditausta. */
.playerbar{
  background:rgba(7,6,25,.96) !important;
}
.playerbar::after{display:none !important}

/* 3. Kellale pikem kast, et aeg + kuupäev alati mahuvad. */
.top-widgets{
  grid-template-columns:92px 132px !important;
}
.top-widgets .status-card:nth-child(2){
  min-width:132px !important;
  padding-left:11px !important;
  padding-right:11px !important;
}
.top-widgets .status-card:nth-child(2) .clock{
  white-space:nowrap !important;
  font-size:24px !important;
}
.top-widgets .status-card:nth-child(2) small{
  white-space:nowrap !important;
}

/* 4. QR natuke suurem */
.real-qr{
  width:148px !important;
  height:148px !important;
}
.phone-content{
  grid-template-columns:150px 1fr !important;
}

/* 5. MAIKL MEEDIAKESKUS suurem */
.main-title{
  font-size:clamp(48px,5.2vw,76px) !important;
  letter-spacing:-2px !important;
}
.main-title em{
  font-size:.50em !important;
}

/* Kitsamal ekraanil hoia siiski kõik ilusti sees. */
@media(max-width:1400px){
  .main-title{font-size:52px !important}
  .top-widgets{grid-template-columns:86px 122px !important}
  .top-widgets .status-card:nth-child(2){min-width:122px !important}
  .real-qr{width:132px !important;height:132px !important}
  .phone-content{grid-template-columns:134px 1fr !important}
}


/* ===== v3.1.1 CLOCK BOX FIT FIX ===== */

/* Kellakast laiem ja sisu kompaktsem, et kõik jääks kasti sisse */
.top-widgets{
  grid-template-columns:92px 158px !important;
}

.top-widgets .status-card:nth-child(2){
  min-width:158px !important;
  width:158px !important;
  max-width:158px !important;
  min-height:76px !important;
  max-height:76px !important;
  padding:7px 12px !important;
  display:grid !important;
  grid-template-rows:auto auto auto !important;
  align-content:center !important;
  justify-items:start !important;
  gap:1px !important;
  overflow:hidden !important;
}

.top-widgets .status-card:nth-child(2) .clock{
  display:block !important;
  width:100% !important;
  font-size:25px !important;
  line-height:1 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:clip !important;
  letter-spacing:-.5px !important;
}

.top-widgets .status-card:nth-child(2) #dateText,
.top-widgets .status-card:nth-child(2) #weekdayText{
  display:block !important;
  width:100% !important;
  font-size:9px !important;
  line-height:1.15 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  margin:0 !important;
}

/* väiksematel ekraanidel säilib piisav laius */
@media(max-width:1400px){
  .top-widgets{
    grid-template-columns:86px 148px !important;
  }
  .top-widgets .status-card:nth-child(2){
    min-width:148px !important;
    width:148px !important;
    max-width:148px !important;
  }
  .top-widgets .status-card:nth-child(2) .clock{
    font-size:23px !important;
  }
}


/* ===== v3.2 MAIKL – ChromeOS/PWA + layout + camera + radio ===== */

/* Leht võimalikult servast servani. Suletud menüü ei jäta vasakule tühja grid-gap'i. */
.app-shell{
  padding:4px 6px 8px 4px !important;
  gap:0 !important;
  column-gap:0 !important;
  --side-w:0px !important;
}
.app-shell.menu-open{
  --side-w:260px !important;
  column-gap:7px !important;
}
.main-area{
  width:100% !important;
  min-width:0 !important;
}

/* Vasak menüü: poolläbipaistev, taustapilt jääb läbi näha. */
.sidebar,
.app-shell.menu-open .sidebar{
  background:linear-gradient(180deg,rgba(9,9,30,.72),rgba(7,6,24,.60)) !important;
  backdrop-filter:blur(7px) !important;
  border-color:rgba(178,116,255,.42) !important;
}
.brand-home,.side-nav button{
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease !important;
  border:1px solid transparent !important;
}
.brand-home.active,.side-nav button.active{
  background:linear-gradient(90deg,rgba(116,42,255,.74),rgba(180,15,224,.55)) !important;
  border-color:rgba(198,135,255,.68) !important;
  box-shadow:0 0 16px rgba(145,45,255,.25) !important;
}
.brand-home:not(.active),.side-nav button:not(.active){
  background:rgba(16,13,40,.18) !important;
}
.brand-home:not(.active):hover,.side-nav button:not(.active):hover{
  background:rgba(97,48,190,.25) !important;
}

/* Peomängude nool täpselt ratta keskele. */
.wheelbox{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.wheelbox>div{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
}
.pointer{
  align-self:center !important;
  margin-left:0 !important;
  margin-right:0 !important;
  transform:translateX(0) !important;
}

/* Admin */
.admin-login{max-width:420px;margin:auto;padding:12px}
.admin-login-actions{display:flex;gap:8px;margin-top:12px}
.admin-login-state{color:#ff8f9e;margin-top:8px;min-height:18px}
.admin-sticky-head{
  position:sticky;top:-18px;z-index:8;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin:-18px -18px 14px;padding:14px 18px;
  background:rgba(9,9,27,.97);border-bottom:1px solid rgba(175,108,255,.34);
}
.admin-sticky-head h2{margin:0}
.admin-sticky-head>div,.admin-button-row{display:flex;gap:7px;flex-wrap:wrap}
.admin-save-foot{display:flex;justify-content:center;padding:16px 0 2px}
.admin-save-foot .btn{min-width:260px}
.admin-weather-preview{
  margin-top:9px;padding:8px 10px;border-radius:10px;
  background:rgba(58,29,100,.24);color:#cdaeff;font-size:12px
}

/* Pildid + veebikaamera */
.photos-layout{
  display:grid;grid-template-columns:minmax(340px,.8fr) 1.2fr;
  gap:13px;height:100%;min-height:0
}
.camera-panel{display:flex;flex-direction:column;min-height:0}
.camera-preview{
  width:100%;aspect-ratio:16/9;max-height:42vh;
  object-fit:cover;background:#02030a;border:1px solid rgba(150,92,235,.34);
  border-radius:14px;margin-bottom:10px
}
.camera-actions{display:flex;flex-wrap:wrap;gap:7px;margin:8px 0}
.camera-actions button:disabled{opacity:.42;cursor:not-allowed}
.recorded-video{width:100%;max-height:230px;background:#000;border-radius:12px;margin:8px 0}
.photo-grid-rich{align-content:start}
.photo-card{position:relative;background:rgba(7,7,23,.70)!important}
.photo-card figcaption{
  min-height:34px;white-space:normal!important;line-height:1.25!important;
  font-size:12px!important;color:#fff!important
}
.photo-actions{display:flex;gap:5px;padding:0 7px 8px}
.photo-actions .btn{font-size:9px;padding:5px 7px;text-decoration:none}

/* Raadio */
.radio-layout{
  display:grid;grid-template-columns:300px 1fr;gap:13px;height:100%;min-height:0
}
.radio-list-panel{overflow:auto}
.radio-list{display:grid;gap:6px}
.radio-station{
  min-height:45px;border:1px solid rgba(129,84,194,.32);
  background:rgba(255,255,255,.025);border-radius:11px;
  display:grid;grid-template-columns:34px 1fr;align-items:center;text-align:left;
  padding:7px 10px;color:#fff
}
.radio-station.active{
  border-color:#9c52ff;background:rgba(124,43,255,.23);
  box-shadow:0 0 14px rgba(133,42,255,.20)
}
.radio-stage{position:relative!important;overflow:hidden!important;display:grid!important;place-items:center!important;padding:0!important}
.radio-slide-bg{position:absolute;inset:0;background:center/cover no-repeat;opacity:.76;transition:opacity .35s}
.radio-slide-bg.changing{opacity:.10}
.radio-stage-shade{position:absolute;inset:0;background:radial-gradient(circle,rgba(19,8,48,.18),rgba(3,4,14,.72))}
.radio-stage-content{position:relative;z-index:2;text-align:center;padding:24px;text-shadow:0 3px 14px #000}
.radio-stage-content h2{font-size:34px;margin:10px 0 4px}
.radio-controls{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:16px}
.radio-controls input{width:min(260px,45vw)}
.radio-eq{height:80px;display:flex;align-items:flex-end;justify-content:center;gap:5px}
.radio-eq i{width:7px;height:10px;border-radius:5px;background:linear-gradient(#ff35db,#8c39ff,#00b9ff)}
body.audio-playing .radio-eq i{animation:radioEq .7s ease-in-out infinite alternate}
body.audio-playing .radio-eq i:nth-child(2n){animation-duration:.48s}
body.audio-playing .radio-eq i:nth-child(3n){animation-duration:.91s}
@keyframes radioEq{from{height:8px}to{height:70px}}

/* ChromeOS / PWA install layout */
@media(max-width:1100px){
  .photos-layout,.radio-layout{grid-template-columns:1fr}
  .camera-preview{max-height:none}
}


/* ===== v3.3 YouTube without Google Cloud + camera timer ===== */

/* YouTube: left control box narrow, video area dominant. */
.youtube-layout.youtube-noapi-layout{
  grid-template-columns:285px minmax(0,1fr) !important;
  gap:12px !important;
  height:100% !important;
  min-height:0 !important;
}
.youtube-sidebox{
  min-width:0 !important;
  padding:13px !important;
  overflow:auto !important;
}
.youtube-sidebox h3{margin-bottom:6px !important}
.youtube-sidebox .field{display:grid !important;gap:6px !important;margin-top:12px !important}
.youtube-sidebox .search-row{
  grid-template-columns:minmax(0,1fr) 42px !important;
}
.yt-link-field input{width:100% !important}
.yt-open-main{
  width:100% !important;
  margin-top:9px !important;
  min-height:42px !important;
}
.yt-help{
  display:grid;
  gap:4px;
  margin-top:14px;
  padding:10px;
  border-radius:12px;
  border:1px solid rgba(141,87,226,.27);
  background:rgba(255,255,255,.025);
  color:var(--muted);
  font-size:11px;
}
.yt-help b{color:#fff;margin-bottom:3px}
.youtube-playerbox{
  min-width:0 !important;
  min-height:0 !important;
  padding:7px !important;
  display:flex !important;
}
.yt-big-viewer{
  width:100% !important;
  height:100% !important;
  min-height:58vh !important;
  border:0 !important;
  border-radius:14px !important;
  background:#020208 !important;
}
div.yt-big-viewer{
  display:grid !important;
  place-items:center !important;
}
.yt-empty{
  display:grid;
  justify-items:center;
  gap:7px;
  color:var(--muted);
  text-align:center;
}
.yt-empty strong{color:#fff;font-size:22px}
.yt-empty-icon{
  display:grid;
  place-items:center;
  width:76px;height:76px;
  border-radius:50%;
  background:linear-gradient(135deg,#ff154f,#b800ff);
  color:#fff;
  font-size:34px;
  padding-left:5px;
  box-shadow:0 0 26px rgba(255,22,126,.28);
}

/* Camera preview countdown overlay. */
.camera-preview-wrap{
  position:relative;
  width:100%;
  border-radius:14px;
  overflow:hidden;
  background:#02030a;
  margin-bottom:10px;
}
.camera-preview-wrap .camera-preview{
  margin:0 !important;
  border-radius:14px !important;
  display:block !important;
}
.camera-countdown{
  position:absolute;
  inset:0;
  z-index:4;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.24);
  color:#fff;
  font-size:clamp(72px,12vw,150px);
  font-weight:950;
  line-height:1;
  text-shadow:0 5px 25px #000,0 0 25px rgba(188,70,255,.85);
  backdrop-filter:blur(1px);
}
.camera-countdown.hidden{display:none !important}
.camera-photo-card img{
  display:block;
  width:100%;
  border-radius:10px;
}
.camera-photo-card .photo-actions{padding-top:7px !important}

/* On medium screens still keep player larger than controls. */
@media(max-width:1150px) and (min-width:760px){
  .youtube-layout.youtube-noapi-layout{
    grid-template-columns:245px minmax(0,1fr) !important;
  }
}
@media(max-width:759px){
  .youtube-layout.youtube-noapi-layout{
    grid-template-columns:1fr !important;
  }
  .yt-big-viewer{min-height:48vh !important}
}


/* ===== v3.4 YouTube playlist + transparent sidebar ===== */

/* Vasak menüü veel läbipaistvam */
.sidebar,
.app-shell.menu-open .sidebar{
  background:
    linear-gradient(180deg,rgba(8,8,28,.46),rgba(6,5,22,.34)) !important;
  backdrop-filter:blur(5px) !important;
  -webkit-backdrop-filter:blur(5px) !important;
  border-color:rgba(178,116,255,.34) !important;
}
.brand-home:not(.active),
.side-nav button:not(.active){
  background:rgba(13,10,36,.10) !important;
}
.brand-home:not(.active):hover,
.side-nav button:not(.active):hover{
  background:rgba(98,49,190,.20) !important;
}

/* YouTube playlist */
.yt-main-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin-top:9px;
}
.yt-main-actions .btn{min-height:40px}
.yt-playlist-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:16px 0 7px;
  padding-top:10px;
  border-top:1px solid rgba(156,91,238,.25);
}
.yt-playlist-head strong{
  font-size:12px;
  letter-spacing:.6px;
}
.yt-clear-btn{
  padding:5px 8px !important;
  font-size:9px !important;
}
.yt-playlist{
  display:grid;
  gap:5px;
  max-height:37vh;
  overflow:auto;
  padding-right:2px;
}
.yt-playlist-row{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 28px;
  gap:6px;
  align-items:center;
  min-height:48px;
  padding:5px 6px;
  border:1px solid rgba(145,88,222,.24);
  border-radius:10px;
  background:rgba(255,255,255,.025);
}
.yt-playlist-row.last-played{
  border-color:rgba(172,82,255,.70);
  background:rgba(123,42,236,.17);
}
.yt-playlist-play,
.yt-playlist-delete{
  border:0;
  border-radius:8px;
  color:#fff;
}
.yt-playlist-play{
  width:32px;height:32px;
  background:linear-gradient(135deg,#ff174f,#b700ff);
}
.yt-playlist-delete{
  width:26px;height:26px;
  background:rgba(255,77,105,.14);
  color:#ff9aaa;
}
.yt-playlist-info{
  min-width:0;
  display:grid;
  gap:2px;
}
.yt-playlist-info b{
  font-size:11px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.yt-playlist-info small{
  color:var(--muted);
  font-size:8.5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.yt-playlist-empty{
  padding:12px;
  text-align:center;
  color:var(--muted);
  font-size:11px;
  border:1px dashed rgba(140,85,210,.24);
  border-radius:10px;
}


/* ===== v3.4.1 definitive sidebar transparency + YouTube playlist ===== */

/* Kogu menüü taust tõesti poolläbipaistev. */
html body .app-shell .sidebar,
html body .app-shell.menu-open .sidebar{
  background:rgba(7,6,24,.28) !important;
  background-image:linear-gradient(180deg,rgba(10,8,32,.24),rgba(6,5,20,.14)) !important;
  backdrop-filter:blur(2px) !important;
  -webkit-backdrop-filter:blur(2px) !important;
  box-shadow:0 10px 32px rgba(0,0,0,.18) !important;
  border-color:rgba(190,132,255,.30) !important;
}
html body .sidebar .brand-home:not(.active),
html body .sidebar .side-nav button:not(.active){
  background:rgba(11,8,30,.08) !important;
  box-shadow:none !important;
}
html body .sidebar .brand-home.active,
html body .sidebar .side-nav button.active{
  background:linear-gradient(90deg,rgba(112,35,240,.58),rgba(181,10,224,.42)) !important;
}
html body .sidebar .side-logo-wrap{
  background:transparent !important;
}

/* YouTube: playlist alati nähtav, mängija suur. */
.youtube-playlist-layout{
  display:grid !important;
  grid-template-columns:300px minmax(0,1fr) !important;
  gap:12px !important;
  height:100% !important;
  min-height:0 !important;
}
.youtube-sidebox{
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
  overflow:hidden !important;
}
.youtube-sidebox .field{
  margin-top:8px !important;
}
.yt-search-external{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:6px;
  margin-top:10px;
}
.yt-playlist{
  flex:1 1 auto !important;
  min-height:120px !important;
  max-height:none !important;
  overflow:auto !important;
  display:grid !important;
  align-content:start !important;
  gap:6px !important;
}
.yt-playlist-head{
  margin-top:12px !important;
}
.yt-playlist-row{
  display:grid !important;
  grid-template-columns:34px minmax(0,1fr) 28px !important;
}
.youtube-playerbox{
  display:flex !important;
  min-width:0 !important;
  min-height:0 !important;
  padding:7px !important;
}
.yt-big-viewer{
  width:100% !important;
  height:100% !important;
  min-height:62vh !important;
}
@media(max-width:1000px){
  .youtube-playlist-layout{
    grid-template-columns:260px minmax(0,1fr) !important;
  }
}


/* ===== v3.4.3 sidebar wallpaper + YouTube title state ===== */

/* Menüü sees kuvatakse päriselt sama taustapilt, mitte ainult läbipaistev värv. */
html body .app-shell .sidebar,
html body .app-shell.menu-open .sidebar{
  background-color:transparent !important;
  background-image:
    linear-gradient(180deg,rgba(6,5,20,.10),rgba(6,5,20,.08)),
    var(--sidebar-wallpaper) !important;
  background-size:100% 100%,cover !important;
  background-position:center,center !important;
  background-repeat:no-repeat,no-repeat !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:0 8px 26px rgba(0,0,0,.12) !important;
}
html body .sidebar .brand-home:not(.active),
html body .sidebar .side-nav button:not(.active){
  background:rgba(6,5,20,.04) !important;
  box-shadow:none !important;
}
html body .sidebar .brand-home:not(.active):hover,
html body .sidebar .side-nav button:not(.active):hover{
  background:rgba(82,38,160,.18) !important;
}
html body .sidebar .brand-home.active,
html body .sidebar .side-nav button.active{
  background:linear-gradient(90deg,rgba(111,33,240,.64),rgba(183,10,224,.46)) !important;
}
.yt-title-state{
  min-height:14px;
  margin-top:4px;
  color:#9ee8ff;
  font-size:9px;
}


/* ===== v3.4.4 clean transparent sidebar + compact YouTube playlist ===== */

/* Menüü enda taustapilt on täielikult eemaldatud.
   Alt paistab ainult kogu lehe .wallpaper ehk Adminis valitud taust. */
html body .app-shell .sidebar,
html body .app-shell.menu-open .sidebar{
  background:none !important;
  background-color:rgba(5,4,18,.10) !important;
  background-image:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:none !important;
  border-color:rgba(196,144,255,.24) !important;
}

html body .sidebar::before,
html body .sidebar::after{
  content:none !important;
  display:none !important;
  background:none !important;
}

html body .sidebar .brand-home:not(.active),
html body .sidebar .side-nav button:not(.active){
  background:rgba(5,4,18,.05) !important;
  background-image:none !important;
  box-shadow:none !important;
}

html body .sidebar .brand-home:not(.active):hover,
html body .sidebar .side-nav button:not(.active):hover{
  background:rgba(95,45,175,.18) !important;
}

html body .sidebar .brand-home.active,
html body .sidebar .side-nav button.active{
  background:linear-gradient(90deg,rgba(111,33,240,.62),rgba(183,10,224,.44)) !important;
}

/* Playlist on kompaktsem: nime sisestamise rida puudub. */
.youtube-sidebox{
  padding-top:10px !important;
}
.youtube-sidebox h3{
  margin:0 0 10px !important;
}
.yt-main-actions{
  margin-top:10px !important;
}
.yt-playlist-head{
  margin-top:10px !important;
}


/* ===== v3.5 FOTOBOKS + SOOVID/JÄRJEKORD + HOME PLAYLIST ===== */

/* FOTOBOKS eraldi suure moodulina */
.photobooth-layout{
  display:grid;
  grid-template-columns:minmax(420px,1.08fr) minmax(320px,.92fr);
  gap:13px;
  height:100%;
  min-height:0;
}
.photobooth-gallery{
  min-height:0;
  overflow:auto;
}
.photobooth-gallery .photo-grid{
  margin-top:9px;
}
.photos-gallery-only{
  height:100%;
  min-height:0;
  overflow:auto;
}

/* SOOVID / JÄRJEKORD – peo juhtimiskeskus */
.party-queue{
  display:grid;
  grid-template-columns:1fr 1.15fr 1fr;
  gap:12px;
  height:100%;
  min-height:0;
}
.queue-column{
  display:flex !important;
  flex-direction:column;
  min-width:0;
  min-height:0;
  overflow:hidden;
}
.queue-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:9px;
}
.queue-head h3{
  margin:0 !important;
  font-size:15px;
}
.queue-count{
  min-width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:rgba(127,52,255,.23);
  border:1px solid rgba(169,100,255,.42);
  font-size:11px;
  font-weight:800;
}
.queue-list{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  display:grid;
  align-content:start;
  gap:6px;
  padding-right:2px;
}
.queue-row{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 30px;
  align-items:center;
  gap:7px;
  min-height:49px;
  padding:6px 7px;
  border:1px solid rgba(150,93,226,.25);
  border-radius:11px;
  background:rgba(255,255,255,.025);
}
.queue-row:not(:has(.queue-delete)):not(:has(.queue-add)){
  grid-template-columns:34px minmax(0,1fr);
}
.queue-play,.queue-delete,.queue-add{
  border:0;
  border-radius:8px;
  color:#fff;
  width:30px;
  height:30px;
}
.queue-play{
  background:linear-gradient(135deg,#ff174f,#aa00ff);
}
.queue-delete{
  background:rgba(255,67,99,.14);
  color:#ff9aaa;
}
.queue-add{
  background:rgba(31,195,137,.16);
  color:#7fffc4;
  font-size:18px;
}
.queue-info{
  min-width:0;
  display:grid;
  gap:2px;
}
.queue-info b{
  font-size:11px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.queue-info small{
  color:var(--muted);
  font-size:9px;
}
.queue-empty{
  padding:15px 10px;
  text-align:center;
  color:var(--muted);
  font-size:11px;
  border:1px dashed rgba(152,92,226,.24);
  border-radius:11px;
}
.queue-open-module{
  margin-top:8px;
  width:100%;
}

/* Avalehe YouTube playlist */
.home-youtube-playlist{
  display:grid;
  gap:5px;
  max-height:100%;
  overflow:auto;
}
.home-playlist-row{
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  gap:7px;
  align-items:center;
  width:100%;
  min-height:38px;
  border:1px solid rgba(150,90,226,.22);
  border-radius:10px;
  background:rgba(255,255,255,.025);
  color:#fff;
  text-align:left;
  padding:5px 7px;
}
.home-playlist-row:hover{
  background:rgba(117,45,219,.17);
}
.home-play-icon{
  width:27px;height:27px;
  display:grid;place-items:center;
  border-radius:8px;
  background:linear-gradient(135deg,#ff174f,#b700ff);
}
.home-play-title{
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:11px;
  font-weight:700;
}

@media(max-width:1180px){
  .party-queue{
    grid-template-columns:1fr 1fr;
  }
  .music-queue-column{
    grid-column:1/-1;
  }
  .photobooth-layout{
    grid-template-columns:1fr;
  }
}


/* ===== v3.5.3 phone request -> YouTube playlist ===== */
.queue-add.added,
.queue-add:disabled{
  background:rgba(35,210,138,.20) !important;
  color:#9effcb !important;
  border:1px solid rgba(97,255,186,.28) !important;
  opacity:1 !important;
  cursor:default !important;
}


/* ===== v3.6 PEOMÄNGUD + ADMIN BACKUP + RADIO ===== */

.game-layout-v36{
  grid-template-columns:minmax(300px,.82fr) minmax(480px,1.18fr) !important;
  gap:13px !important;
}
.game-setup{
  min-height:0 !important;
  overflow:auto !important;
}
.game-music-box{
  margin-top:12px;
  padding:10px;
  border:1px solid rgba(156,94,230,.28);
  border-radius:12px;
  background:rgba(255,255,255,.025);
}
.game-music-box input{
  width:100%;
  margin-top:7px;
}
.game-help{
  margin-top:9px;
}
.game-stage>div{
  width:100%;
}
.game-timer-panel{
  width:min(420px,88%);
  margin:12px auto 0;
  padding:10px 14px;
  border:1px solid rgba(255,184,44,.42);
  border-radius:14px;
  background:rgba(18,10,28,.58);
  text-align:center;
}
.game-timer-label{
  font-size:10px;
  letter-spacing:1px;
  color:#ffd886;
  font-weight:800;
}
.game-timer{
  font-size:clamp(36px,4vw,62px);
  line-height:1;
  font-weight:950;
  margin:5px 0 8px;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 22px rgba(255,171,31,.35);
}
.game-timer-bar{
  height:7px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.09);
}
.game-timer-bar i{
  display:block;
  height:100%;
  width:100%;
  background:linear-gradient(90deg,#ffb21c,#ff3f91,#9a32ff);
  transition:width .35s linear;
}
.game-music-now{
  margin:10px auto 0;
  width:min(520px,92%);
  min-height:30px;
  display:grid;
  place-items:center;
  color:#d8ccff;
  font-size:11px;
}
.game-actions{
  display:flex;
  gap:7px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:9px;
}

/* Admini varukoopia */
.admin-backup-section{
  border-color:rgba(57,214,162,.34) !important;
  background:linear-gradient(135deg,rgba(20,77,65,.12),rgba(61,24,102,.14)) !important;
}
.admin-backup-actions{
  margin-top:10px;
}
.admin-backup-actions .btn{
  min-height:40px;
}

#radioStatus a{
  color:#aee9ff;
  font-weight:800;
  text-decoration:underline;
}

@media(max-width:1050px){
  .game-layout-v36{
    grid-template-columns:1fr !important;
  }
}


/* ===== v3.6.1 Märkmik redesign ===== */
.home-notes-panel{
  padding:18px 18px 14px !important;
  display:flex;
  flex-direction:column;
  min-height:320px;
}
.notes-card-head{
  align-items:center;
  margin-bottom:8px;
}
.notes-card-head h2{
  margin:0;
  letter-spacing:.02em;
}
.notes-add-btn{
  margin-left:auto;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  color:#fff;
  border-radius:16px;
  padding:10px 14px;
  font-weight:800;
  cursor:pointer;
  transition:.2s ease;
  box-shadow:0 0 0 1px rgba(164,93,255,.15) inset;
}
.notes-add-btn:hover,.notes-add-btn.active{
  transform:translateY(-1px);
  background:linear-gradient(180deg,rgba(198,115,255,.28),rgba(94,37,163,.25));
  box-shadow:0 10px 28px rgba(154,77,255,.18);
}
.notes-add-btn.small{padding:8px 12px;border-radius:14px;font-size:13px}
.notes-add-btn.ghost{
  background:rgba(255,255,255,.04);
}
.notes-card-list{
  margin-top:4px;
  flex:1;
  display:flex;
  flex-direction:column;
}
.notes-card-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
  cursor:pointer;
  transition:.2s ease;
}
.notes-card-row:hover{
  transform:translateX(2px);
}
.notes-card-main{min-width:0}
.notes-card-titleline{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:15px;
}
.notes-card-titleline strong,
.notes-list-title strong{
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.notes-card-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#7a89b8;
  margin-top:9px;
  flex:0 0 auto;
}
.notes-card-dot.pinned{background:#ffbe2e; box-shadow:0 0 12px rgba(255,190,46,.45)}
.notes-card-date{
  margin-left:16px;
  margin-top:6px;
  font-size:12px;
  color:#99a7cc;
}
.notes-card-actions{
  display:flex;
  gap:6px;
  align-items:center;
}
.note-icon-btn{
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  color:#d8d9ef;
  cursor:pointer;
  transition:.2s ease;
}
.note-icon-btn:hover,.note-icon-btn.active{
  color:#ffcf4d;
  background:rgba(255,255,255,.08);
}
.note-icon-btn.menu{color:#aab4d6}
.notes-view-all{
  margin-top:10px;
  border:none;
  background:none;
  color:#b9c8ef;
  text-align:left;
  font-weight:700;
  padding:0;
  cursor:pointer;
}
.notes-empty{
  color:#aeb8d3;
  font-size:14px;
  padding:18px 4px;
}
.notes-empty.large{
  padding:24px;
  text-align:center;
}
.notes-page{
  display:grid;
  grid-template-columns:minmax(300px,380px) minmax(0,1fr);
  gap:16px;
  min-height:65vh;
}
.notes-board,.notes-editor-card{
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(8,16,34,.88),rgba(6,10,24,.92));
  border-radius:22px;
  padding:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.04);
}
.notes-board{
  height:100%;
  display:flex;
  flex-direction:column;
}
.notes-board-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}
.notes-board-head h3{
  margin:0;
  font-size:28px;
  letter-spacing:.02em;
}
.notes-search-wrap{margin-bottom:12px}
.notes-search-input{
  width:100%;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:#fff;
  padding:0 14px;
  outline:none;
}
.notes-search-input::placeholder{color:#98a4c8}
.notes-list{
  overflow:auto;
  padding-right:4px;
}
.notes-list-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  padding:14px 12px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  background:rgba(255,255,255,.02);
  margin-bottom:10px;
  cursor:pointer;
  transition:.18s ease;
}
.notes-list-row:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.04);
}
.notes-list-row.active{
  border-color:rgba(185,93,255,.55);
  background:linear-gradient(180deg,rgba(185,93,255,.14),rgba(120,54,190,.08));
  box-shadow:0 10px 28px rgba(145,61,255,.14);
}
.notes-list-main{min-width:0}
.notes-list-title{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:16px;
  margin-bottom:5px;
}
.notes-list-preview{
  color:#c3cbea;
  font-size:13px;
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  opacity:.9;
}
.notes-list-date{
  margin-top:7px;
  color:#8ea0cf;
  font-size:12px;
}
.notes-list-tools{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.notes-editor-card{
  min-height:100%;
  display:flex;
  flex-direction:column;
}
.notes-editor-head{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  margin-bottom:14px;
}
.notes-editor-meta,.notes-editor-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.notes-date-chip{
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:#eaf0ff;
  font-weight:700;
  font-size:12px;
}
.notes-date-chip.subtle{color:#9eadce}
.note-title-input{
  width:100%;
  border:none;
  outline:none;
  background:transparent;
  color:#fff;
  font-size:clamp(22px,2vw,32px);
  font-weight:900;
  margin-bottom:10px;
}
.note-body-input{
  flex:1;
  min-height:380px;
  resize:vertical;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:#fff;
  border-radius:18px;
  outline:none;
  padding:16px 18px;
  font-size:16px;
  line-height:1.6;
}
.note-body-input::placeholder,.note-title-input::placeholder{color:#8fa0c6}
.notes-editor-foot{
  margin-top:12px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:#9db0da;
  font-weight:700;
  font-size:12px;
}
@media (max-width: 1100px){
  .notes-page{
    grid-template-columns:1fr;
  }
  .note-body-input{min-height:260px}
}


/* =====================================================================
   MAIKL v4.0 – peo juhtimiskeskus
   ===================================================================== */

/* ---- Avalehe NÜÜD MÄNGIB ---- */
.now-playing-panel{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  margin:0 0 12px !important;
  padding:12px 16px !important;
  min-height:78px;
  border-color:rgba(165,94,255,.38) !important;
  background:
    radial-gradient(circle at 10% 50%,rgba(151,52,255,.18),transparent 38%),
    linear-gradient(100deg,rgba(8,9,28,.86),rgba(11,7,31,.78)) !important;
}
.now-playing-main{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.now-playing-icon{
  width:52px;height:52px;
  flex:0 0 52px;
  display:grid;place-items:center;
  border-radius:16px;
  background:linear-gradient(135deg,#6e27ff,#e51dd5);
  font-size:25px;
  box-shadow:0 0 24px rgba(157,47,255,.28);
}
.now-playing-copy{
  display:grid;
  gap:2px;
  min-width:0;
}
.now-playing-copy small{
  color:#a99bc8;
  font-size:9px;
  font-weight:900;
  letter-spacing:1px;
}
.now-playing-copy strong{
  font-size:17px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.now-playing-copy span{
  color:var(--muted);
  font-size:10px;
}
.now-playing-controls{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.now-playing-controls>button{
  min-width:38px;
  height:38px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px;
  background:rgba(255,255,255,.045);
  color:#fff;
  font-weight:900;
}
.now-playing-controls>button.primary{
  background:linear-gradient(135deg,#7929ff,#e220ce);
}
.master-volume-wrap{
  display:flex;
  align-items:center;
  gap:5px;
  padding:0 8px;
  height:38px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(255,255,255,.025);
}
.master-volume-wrap input{width:88px}
.party-mode-btn{
  min-width:105px !important;
  border-color:rgba(255,199,60,.24) !important;
  background:rgba(255,177,35,.09) !important;
}
.panic-stop-btn{
  min-width:105px !important;
  border-color:rgba(255,74,95,.48) !important;
  background:linear-gradient(135deg,rgba(208,19,48,.82),rgba(116,5,31,.86)) !important;
  box-shadow:0 0 18px rgba(255,40,69,.12);
}

/* ---- Globaalne STOPP / peomood ---- */
.global-safety-dock{
  position:fixed;
  z-index:9997;
  right:12px;
  bottom:84px;
  display:flex;
  gap:6px;
  pointer-events:auto;
}
.global-safety-dock button{
  height:39px;
  border-radius:13px;
  border:1px solid rgba(255,255,255,.13);
  color:#fff;
  font-weight:950;
  box-shadow:0 9px 26px rgba(0,0,0,.34);
}
.global-party-btn{
  width:42px;
  background:linear-gradient(135deg,#6825e8,#cb1ac8);
}
.global-panic-btn{
  min-width:88px;
  background:linear-gradient(135deg,#e0203d,#8e0929);
  border-color:rgba(255,102,119,.55) !important;
}

/* ---- PEOMOOD / kiosk ---- */
body.party-mode .sidebar,
body.party-mode #headerMenuToggle,
body.party-mode .admin-panel{
  display:none !important;
}
body.party-mode .app-shell,
body.party-mode .app-shell.menu-open{
  --side-w:0px !important;
  grid-template-columns:0 minmax(0,1fr) !important;
  padding-left:4px !important;
}
body.party-mode .main-area{
  grid-column:1/-1 !important;
}
body.party-mode .topbar{
  min-height:96px !important;
}
body.party-mode .global-safety-dock{
  bottom:14px;
}

/* ---- Avalehe kaartide suurused/haldus ---- */
.dashboard-grid [data-home-card]{
  min-width:0;
}
.dashboard-grid .home-size-small{
  grid-column:span 1 !important;
}
.dashboard-grid .home-size-normal{
  grid-column:span 1 !important;
}
.dashboard-grid .home-size-wide{
  grid-column:span 2 !important;
}
.now-playing-panel.home-size-small{max-width:620px}
.now-playing-panel.home-size-wide{width:100%}

.home-layout-admin{
  display:grid;
  gap:6px;
  margin-top:10px;
}
.home-layout-row{
  display:grid;
  grid-template-columns:minmax(140px,1fr) 84px 105px 38px 38px;
  gap:6px;
  align-items:center;
  padding:7px 8px;
  border:1px solid rgba(255,255,255,.065);
  border-radius:11px;
  background:rgba(255,255,255,.025);
}
.home-layout-name{
  font-size:11px;
  font-weight:800;
}
.home-layout-row label{
  font-size:10px;
  color:#cfc8e6;
}
.home-layout-row select{
  min-width:0;
}

/* ---- Telefonisoovid / järjekord ---- */
.phone-queue-row{
  grid-template-columns:minmax(0,1fr) !important;
  gap:7px !important;
  padding:9px !important;
}
.phone-queue-row.played{
  opacity:.48;
  filter:saturate(.55);
  background:rgba(255,255,255,.015) !important;
}
.phone-request-actions{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}
.btn.mini{
  min-height:29px !important;
  height:auto !important;
  padding:5px 8px !important;
  font-size:8.5px !important;
  border-radius:8px !important;
}
.btn.mini.danger{
  color:#ffabb7;
  border-color:rgba(255,75,101,.25);
  background:rgba(255,51,82,.08);
}
.btn.mini.added,
.btn.mini:disabled{
  color:#8fffc4;
  background:rgba(50,210,143,.10);
  opacity:.85;
}

/* ---- YouTube playlist lohistamine ---- */
.yt-playlist-row{
  grid-template-columns:22px 34px minmax(0,1fr) 48px 28px !important;
}
.yt-drag-handle{
  color:#786f91;
  font-weight:900;
  cursor:grab;
  user-select:none;
  text-align:center;
}
.yt-playlist-row.dragging{
  opacity:.42;
}
.yt-playlist-row.drag-over{
  border-color:#bb63ff !important;
  box-shadow:0 0 16px rgba(171,74,255,.18);
}
.yt-order-tools{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
}
.yt-order-tools button{
  border:0;
  border-radius:6px;
  background:rgba(255,255,255,.055);
  color:#c9c5dd;
  height:24px;
  font-size:11px;
}

/* ---- Peomängud 4.0 ---- */
.game-layout-v40{
  grid-template-columns:minmax(320px,.78fr) minmax(500px,1.22fr) !important;
  gap:13px !important;
}
.game-task-library-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:10px;
}
.game-task-library-head h3{margin:0 !important}
.game-task-library-head span{
  color:#9ba9cf;
  font-size:10px;
}
.game-task-preview-list{
  display:grid;
  gap:5px;
  margin:7px 0 9px;
  max-height:205px;
  overflow:auto;
}
.game-task-preview{
  display:grid;
  gap:2px;
  padding:7px 8px;
  border-radius:9px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.055);
  font-size:10px;
}
.game-task-preview small{color:#9caad0}
.game-stage-topline{
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:34px;
  margin-bottom:3px;
  color:#a995d0;
  font-size:10px;
  font-weight:900;
  letter-spacing:.8px;
}
#gameStagePanel:fullscreen{
  width:100vw !important;
  height:100vh !important;
  border:none !important;
  border-radius:0 !important;
  background:
    radial-gradient(circle at 50% 10%,rgba(146,42,255,.30),transparent 40%),
    linear-gradient(180deg,#080313,#030208) !important;
  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
}
#gameStagePanel:fullscreen>div{
  width:min(1100px,94vw) !important;
  max-height:96vh;
}
#gameStagePanel:fullscreen .wheel{
  width:min(42vh,420px) !important;
  height:min(42vh,420px) !important;
}
#gameStagePanel:fullscreen .result{
  font-size:clamp(34px,5vw,72px) !important;
}
#gameStagePanel:fullscreen .task{
  font-size:clamp(20px,2.6vw,40px) !important;
}
#gameStagePanel:fullscreen .game-timer{
  font-size:clamp(64px,9vw,130px) !important;
}

/* ---- Fotoboks efektid / slaidiseanss ---- */
.camera-effect-select{
  min-width:130px;
  height:36px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background:#0c0a1e;
  color:#fff;
}
.camera-preview.effect-grayscale{filter:grayscale(1) contrast(1.08)}
.camera-preview.effect-neon{filter:contrast(1.18) saturate(1.65) hue-rotate(8deg)}
.camera-preview.effect-party{
  filter:saturate(1.15);
  outline:5px solid rgba(255,57,176,.42);
  outline-offset:-6px;
}
.photo-slide-toggle{
  display:flex;
  align-items:center;
  gap:6px;
  color:#b9b2cf;
  font-size:10px;
}
.photobooth-slideshow{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:15px;
  overflow:hidden;
  background:#03030a;
  border:1px solid rgba(162,90,240,.25);
  margin:7px 0 10px;
}
.photobooth-slideshow img{
  width:100%;
  height:100%;
  object-fit:contain;
  background:#000;
}
#photoboothSlideEmpty{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#8f9abb;
  font-size:12px;
}
.panel-head.compact{margin-top:4px}

/* ---- Märkmiku kategooriad/tähtajad ---- */
.note-meta-controls{
  display:grid;
  grid-template-columns:minmax(140px,190px) minmax(190px,250px);
  gap:10px;
  margin-bottom:12px;
}
.note-meta-controls label{
  display:grid;
  gap:5px;
  color:#9cabc9;
  font-size:10px;
  font-weight:800;
}
.note-meta-controls select,
.note-meta-controls input{
  min-height:38px;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.035);
  color:#fff;
  padding:0 10px;
}
.note-due-home{
  color:#ffd174;
  font-weight:800;
}

/* ---- Admin 4.0 ---- */
.admin-wide-section{
  grid-column:1/-1;
}
.admin-radio-list,.admin-game-list{
  display:grid;
  gap:6px;
  margin:9px 0;
}
.admin-radio-row{
  display:grid;
  grid-template-columns:150px minmax(180px,1.2fr) minmax(160px,1fr) minmax(150px,.9fr) 118px 76px;
  gap:6px;
  align-items:center;
  padding:7px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:11px;
  background:rgba(255,255,255,.025);
}
.admin-radio-row input{
  min-width:0;
}
.toggle.compact{
  min-height:34px !important;
  padding:5px 7px !important;
  font-size:9px !important;
}
.admin-game-row{
  display:grid;
  grid-template-columns:minmax(250px,1.5fr) 92px 105px 120px 76px;
  gap:7px;
  align-items:center;
  padding:7px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:11px;
  background:rgba(255,255,255,.025);
}
.admin-game-row textarea{
  min-width:0;
  resize:vertical;
}
.admin-game-row label{
  display:grid;
  gap:3px;
  color:#aeb8d1;
  font-size:9px;
}
.admin-game-row input[type="number"]{
  width:100%;
}

/* ---- Radio link / staatuse täiendus ---- */
.radio-list-panel .panel-head{
  align-items:center;
}
.radio-station{
  min-height:42px;
}

/* ---- väiksemad ekraanid ---- */
@media(max-width:1200px){
  .now-playing-panel{
    grid-template-columns:1fr !important;
  }
  .now-playing-controls{
    justify-content:flex-start;
  }
  .admin-radio-row{
    grid-template-columns:1fr 1fr;
  }
  .admin-game-row{
    grid-template-columns:1fr 110px 110px;
  }
  .game-layout-v40{
    grid-template-columns:1fr !important;
  }
}
@media(max-width:760px){
  .note-meta-controls{grid-template-columns:1fr}
  .home-layout-row{
    grid-template-columns:1fr 80px 100px;
  }
  .home-layout-row .btn{display:none}
  .global-safety-dock{right:6px;bottom:76px}
  .now-playing-controls .master-volume-wrap{width:100%}
}

/* v4.0 admin game folder field */
.admin-game-row{
  grid-template-columns:minmax(240px,1.45fr) 86px 100px 110px minmax(130px,.8fr) 76px !important;
}
@media(max-width:1200px){
  .admin-game-row{
    grid-template-columns:1fr 100px 105px !important;
  }
}


/* v4.0 avalehe paigutus on Administ juhitav: eemalda vanad fikseeritud grid-positsioonid */
.dashboard-grid{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  grid-template-rows:none !important;
  grid-auto-flow:row dense !important;
  grid-auto-rows:minmax(145px,auto) !important;
  align-content:start !important;
  overflow:auto !important;
}
.dashboard-grid>[data-home-card]{
  grid-column:auto !important;
  grid-row:auto !important;
  min-height:165px;
}
.dashboard-grid>.home-size-small{
  grid-column:span 1 !important;
  min-height:150px;
}
.dashboard-grid>.home-size-normal{
  grid-column:span 1 !important;
  min-height:210px;
}
.dashboard-grid>.home-size-wide{
  grid-column:span 2 !important;
  min-height:165px;
}
.dashboard-grid>.now-playing-panel.home-size-wide{
  grid-column:span 2 !important;
  min-height:82px;
}
@media(max-width:1250px){
  .dashboard-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
}
@media(max-width:960px){
  .dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media(max-width:650px){
  .dashboard-grid{grid-template-columns:1fr !important}
  .dashboard-grid>.home-size-wide{grid-column:span 1 !important}
}

.dashboard-grid .media-visual[data-home-card="media"]{
  display:block;
}


/* ===== WINDOWS EDITION v4.0.1 – KIIRLINGID ===== */
.quick-links-panel{
  min-height:150px;
}
.quick-links-count{
  min-width:26px;height:26px;
  display:grid;place-items:center;
  border-radius:9px;
  background:rgba(164,70,255,.13);
  color:#d9b8ff;
  font-size:10px;
  font-weight:900;
}
.quick-links-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
  margin-top:8px;
}
.quick-link-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 28px;
  gap:5px;
  min-width:0;
}
.quick-link-open,
.quick-link-remove{
  border:1px solid rgba(177,111,255,.20);
  background:rgba(17,11,36,.52);
  color:#fff;
  border-radius:10px;
  min-height:35px;
}
.quick-link-open{
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 9px;
  min-width:0;
  text-align:left;
}
.quick-link-open span{color:#c06cff;font-weight:900}
.quick-link-open b{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:10px;
}
.quick-link-open:hover{
  background:rgba(108,35,201,.30);
  border-color:rgba(194,118,255,.45);
}
.quick-link-remove{
  padding:0;
  color:#cbbbd5;
  font-size:17px;
}
.quick-link-remove:hover{color:#fff;background:rgba(230,50,110,.24)}
.quick-links-add{
  display:grid;
  grid-template-columns:.75fr 1.35fr auto;
  gap:6px;
  margin-top:9px;
}
.quick-links-add input{
  min-width:0;
  height:34px;
  padding:6px 8px;
  border-radius:9px;
  font-size:9px;
}
.quick-links-add button{
  border:0;
  border-radius:9px;
  padding:0 11px;
  color:#fff;
  font-size:9px;
  font-weight:900;
  background:linear-gradient(135deg,#8f34ee,#d424c0);
}
@media(max-width:900px){
  .quick-links-list{grid-template-columns:1fr}
  .quick-links-add{grid-template-columns:1fr}
  .quick-links-add button{height:34px}
}


/* ===== WINDOWS PORTABLE v4.0.7 ===== */
/* Avalehe NÜÜD MÄNGIB kaart eemaldatud; alumine meediapleier jääb alles. */
.now-playing-panel[data-home-card="nowPlaying"]{
  display:none !important;
}


/* =====================================================================
   WINDOWS PORTABLE v4.0.8 – KIIRLINKIDE KESKUS
   ===================================================================== */
.quick-links-home{
  min-height:150px;
}
.quick-links-home .panel-head{
  margin-bottom:8px;
}
.quick-links-add-home{
  min-width:68px;
}
.quick-links-home-list{
  display:grid;
  gap:6px;
}
.quick-link-home-row{
  width:100%;
  min-width:0;
  display:grid;
  grid-template-columns:28px minmax(0,1fr) 18px;
  align-items:center;
  gap:8px;
  border:1px solid rgba(182,118,255,.18);
  background:rgba(13,9,31,.34);
  color:#fff;
  border-radius:10px;
  padding:7px 8px;
  text-align:left;
}
.quick-link-home-row:hover{
  background:rgba(98,38,168,.23);
  border-color:rgba(196,131,255,.42);
}
.quick-link-home-icon{
  width:27px;height:27px;
  display:grid;place-items:center;
  border-radius:8px;
  background:rgba(153,63,245,.15);
  color:#cc8cff;
  font-weight:900;
}
.quick-link-home-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:1px;
}
.quick-link-home-copy b{
  font-size:10px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.quick-link-home-copy small{
  color:#948ca8;
  font-size:7.5px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.quick-link-home-arrow{
  color:#b78ad9;
  font-size:16px;
}
.quick-links-home-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:8px;
  color:#817991;
  font-size:8px;
}
.quick-links-home-foot button{
  border:0;
  background:transparent;
  color:#c28aff;
  font-size:8px;
  font-weight:900;
  cursor:pointer;
}

.quick-center-layout{
  display:grid;
  grid-template-columns:minmax(260px,.72fr) minmax(430px,1.6fr);
  gap:12px;
  min-height:calc(100vh - 220px);
}
.quick-center-add-card,
.quick-center-list-card{
  min-height:0;
}
.quick-center-heading small,
.quick-center-panel-head small{
  color:#ad79db;
  font-size:9px;
  letter-spacing:1px;
  font-weight:900;
}
.quick-center-heading h3,
.quick-center-panel-head h3{
  margin:3px 0 0;
}
.quick-center-add-btn{
  width:100%;
  min-height:42px;
  margin:4px 0 12px;
}
.quick-center-panel-head{
  align-items:flex-start;
  margin-bottom:10px;
}
.quick-center-stats{
  border:1px solid rgba(183,119,255,.22);
  background:rgba(153,61,237,.10);
  color:#d7b0f9;
  border-radius:10px;
  padding:7px 10px;
  font-size:9px;
  font-weight:800;
}
.quick-center-list{
  display:grid;
  gap:8px;
  max-height:calc(100vh - 305px);
  overflow:auto;
  padding-right:4px;
}
.quick-center-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 82px;
  gap:7px;
}
.quick-center-open,
.quick-center-delete{
  border:1px solid rgba(180,113,255,.19);
  border-radius:11px;
  color:#fff;
}
.quick-center-open{
  min-width:0;
  min-height:54px;
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  align-items:center;
  gap:10px;
  background:rgba(14,10,32,.50);
  padding:7px 10px;
  text-align:left;
}
.quick-center-open:hover{
  background:rgba(93,33,160,.26);
  border-color:rgba(193,120,255,.43);
}
.quick-center-icon{
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:10px;
  background:linear-gradient(135deg,rgba(130,52,235,.30),rgba(220,37,190,.16));
  color:#d498ff;
  font-size:17px;
  font-weight:900;
}
.quick-center-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.quick-center-copy b{
  font-size:12px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.quick-center-copy small{
  color:#8f879f;
  font-size:8px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.quick-center-delete{
  background:rgba(96,18,50,.18);
  color:#dcb8c8;
  font-size:8px;
  font-weight:900;
}
.quick-center-delete:hover{
  background:rgba(188,31,87,.25);
  color:#fff;
  border-color:rgba(236,89,139,.40);
}
@media(max-width:900px){
  .quick-center-layout{grid-template-columns:1fr}
  .quick-center-list{max-height:none}
}


/* =====================================================================
   MAIKL v4.0.9 FINAL – KIIRLINKIDE TEKST SUUREM
   ===================================================================== */

/* Avalehe kompaktne Kiirlingid kast */
.quick-link-home-copy b{
  font-size:13px !important;
  line-height:1.2 !important;
}
.quick-link-home-copy small{
  font-size:9.5px !important;
  line-height:1.25 !important;
}
.quick-link-home-icon{
  font-size:16px !important;
}
.quick-links-home-foot{
  font-size:9.5px !important;
}
.quick-links-home-foot button{
  font-size:9.5px !important;
}
.quick-links-add-home{
  font-size:10px !important;
}

/* Kiirlinkide keskuse suur nimekiri */
.quick-center-copy b{
  font-size:15px !important;
  line-height:1.25 !important;
}
.quick-center-copy small{
  font-size:10px !important;
  line-height:1.3 !important;
}
.quick-center-delete{
  font-size:9.5px !important;
}
.quick-center-stats{
  font-size:10px !important;
}
.quick-center-heading small,
.quick-center-panel-head small{
  font-size:10px !important;
}


/* =====================================================================
   MAIKL v4.1.0 LEDPROFF FINAL
   Premium Ledproff showroom header + left decorative storefront image.
   ===================================================================== */

:root{
  --ledproff-blue:#31b3ff;
  --ledproff-green:#42ff8a;
  --ledproff-violet:#9a43ff;
  --ledproff-warm:#ff9f36;
}

/* Header image layer */
.main-area{
  --header-image:url('assets/ledproff_header.jpg');
}
.main-area::before{
  height:215px !important;
  border-radius:24px !important;
  border:1px solid rgba(130,195,255,.24) !important;
  background:
    radial-gradient(circle at 79% 34%,rgba(44,255,126,.11),transparent 19%),
    radial-gradient(circle at 62% 28%,rgba(47,152,255,.14),transparent 20%),
    linear-gradient(90deg,rgba(3,8,20,.68) 0%,rgba(4,9,24,.44) 44%,rgba(5,7,18,.30) 100%),
    var(--header-image) center 56%/cover no-repeat !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 18px 45px rgba(0,0,0,.28) !important;
}

/* Header content: premium, simple, readable */
.topbar{
  min-height:148px !important;
  max-height:148px !important;
  padding:22px 24px 20px 30px !important;
  align-items:flex-start !important;
}
.title-wrap{
  padding-top:4px !important;
  max-width:68% !important;
}
.main-title{
  font-size:clamp(46px,4.7vw,72px) !important;
  line-height:.95 !important;
  letter-spacing:-2px !important;
  text-shadow:
    0 2px 3px rgba(0,0,0,.68),
    0 0 22px rgba(49,179,255,.10) !important;
}
.main-title #titleMain{
  color:#fff !important;
  font-weight:950 !important;
}
.main-title em{
  color:#dce8f7 !important;
  font-style:normal !important;
  font-weight:800 !important;
  letter-spacing:.5px !important;
  font-size:.43em !important;
  margin-left:10px !important;
}
.welcome{
  margin-top:10px !important;
  font-size:15px !important;
  line-height:1.25 !important;
  color:#e6edf7 !important;
  font-weight:650 !important;
  letter-spacing:.2px !important;
  text-shadow:0 2px 8px rgba(0,0,0,.7) !important;
}

/* Header menu button looks like a small showroom control */
.header-menu-toggle{
  margin-top:14px !important;
  background:rgba(3,10,24,.52) !important;
  border:1px solid rgba(117,201,255,.34) !important;
  box-shadow:0 8px 22px rgba(0,0,0,.22) !important;
  backdrop-filter:blur(8px) !important;
}

/* Weather/clock stay on the cleaner right side */
.top-widgets{
  margin-top:1px !important;
  gap:10px !important;
}
.status-card{
  background:rgba(4,10,23,.56) !important;
  border:1px solid rgba(141,198,255,.25) !important;
  box-shadow:0 10px 26px rgba(0,0,0,.22) !important;
  backdrop-filter:blur(10px) !important;
}
.status-card:hover{
  border-color:rgba(105,221,255,.48) !important;
}

/* Main module cards overlap header by a controlled amount */
.top-modules{
  margin-top:-17px !important;
  position:relative !important;
  z-index:5 !important;
}
.top-module{
  background:linear-gradient(145deg,rgba(6,12,29,.88),rgba(11,8,28,.76)) !important;
  border-color:rgba(120,174,255,.20) !important;
  box-shadow:0 14px 34px rgba(0,0,0,.22) !important;
}
.top-module:hover{
  transform:translateY(-3px) scale(1.012) !important;
  border-color:rgba(118,217,255,.42) !important;
}

/* Sidebar stays dark/glass; Ledproff storefront fills bottom decorative area. */
.sidebar{
  background:linear-gradient(180deg,rgba(3,7,17,.86),rgba(3,7,18,.75)) !important;
  border-color:rgba(114,182,255,.22) !important;
  backdrop-filter:blur(10px) !important;
}
.side-nav button,
.brand-home{
  background:rgba(4,8,18,.10) !important;
}
.side-nav button:hover,
.brand-home:hover{
  background:rgba(40,112,160,.12) !important;
}
.side-nav button.active,
.brand-home.active{
  background:linear-gradient(90deg,rgba(33,112,176,.28),rgba(112,47,182,.18)) !important;
  box-shadow:
    inset 3px 0 0 rgba(63,193,255,.95),
    inset 0 0 0 1px rgba(80,193,255,.24),
    0 0 18px rgba(52,181,255,.10) !important;
}

/* Decorative storefront image at the lower left */
.side-logo-wrap{
  margin-top:auto !important;
  min-height:310px !important;
  overflow:hidden !important;
  border-radius:16px !important;
  position:relative !important;
  background:
    linear-gradient(180deg,rgba(3,7,17,.18),rgba(3,7,17,.52)) !important;
  border:1px solid rgba(105,179,236,.12) !important;
}
.side-logo-wrap::after{
  content:"LEDPROFF";
  position:absolute;
  left:14px;
  bottom:13px;
  z-index:2;
  color:#fff;
  font-weight:950;
  font-size:17px;
  letter-spacing:1.5px;
  text-shadow:0 2px 12px rgba(0,0,0,.9);
}
.side-logo-wrap img{
  width:100% !important;
  height:100% !important;
  min-height:310px !important;
  object-fit:cover !important;
  object-position:center bottom !important;
  opacity:.90 !important;
  filter:saturate(.92) contrast(1.05) brightness(.82) !important;
  border-radius:15px !important;
}

/* Keep text/cards readable over photographic header. */
.dashboard-grid .panel{
  background:linear-gradient(145deg,rgba(5,8,24,.90),rgba(8,6,24,.83)) !important;
  border-color:rgba(138,93,214,.28) !important;
}

/* Slight amber accent borrowed from the storefront without taking over MAIKL neon UI. */
.quick-link-home-icon,
.quick-center-icon{
  box-shadow:inset 0 0 0 1px rgba(255,160,54,.12) !important;
}


.info-screen-event p{display:none}
  .info-screen-weather{min-width:165px;padding:9px 11px}
  .info-screen-weather>span{font-size:27px}
  .info-screen-weather strong{font-size:20px}
  .info-screen-side-image{display:none}
  .info-screen-center{inset:31% 4% 22%}
  .info-screen-now{width:88vw;padding:14px 16px}
  .info-screen-hint{display:none}
}


/* =====================================================================
   MAIKL v4.1.2 LEDPROFF – VISUAL TWEAKS
   - ülemised 4 kasti rohkem allapoole
   - kergem / läbipaistvam taust
   - tugevam hover-kuma
   ===================================================================== */

:root{
  --led-card-bg: rgba(7, 16, 34, .34);
  --led-card-border: rgba(116, 198, 255, .22);
  --led-card-shadow: 0 20px 52px rgba(0,0,0,.18);
  --led-card-hover-border: rgba(131, 212, 255, .55);
  --led-card-hover-glow:
      0 0 0 1px rgba(129, 215, 255, .20),
      0 0 26px rgba(73, 170, 255, .26),
      0 0 58px rgba(108, 66, 255, .18),
      0 28px 70px rgba(0,0,0,.26);
}

#homeView{
  overflow: visible !important;
}

/* Terve ülemine plokk rohkem allapoole */
.top-modules{
  margin-top: 48px !important;
  padding-top: 8px !important;
  transform: none !important;
  align-items: stretch !important;
}

/* Ülemiste moodulikastide enda välimus */
.top-module,
.home-card,
.module-card{
  background: linear-gradient(180deg, rgba(9,19,41,.42), rgba(8,15,31,.28)) !important;
  border: 1px solid var(--led-card-border) !important;
  box-shadow: var(--led-card-shadow) !important;
  backdrop-filter: blur(8px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.05) !important;
  overflow: visible !important;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    background .22s ease !important;
}

/* kui kasutusel sisemised ankrud/klikialad */
.top-module > a,
.home-card > a,
.module-card > a,
.top-module .card-link,
.home-card .card-link,
.module-card .card-link{
  border-radius: inherit !important;
}

/* hover/active palju tugevam kuma */
.top-module:hover,
.top-module:focus-within,
.home-card:hover,
.home-card:focus-within,
.module-card:hover,
.module-card:focus-within{
  transform: translateY(-5px) scale(1.018) !important;
  border-color: var(--led-card-hover-border) !important;
  box-shadow: var(--led-card-hover-glow) !important;
  background: linear-gradient(180deg, rgba(10,22,47,.44), rgba(8,16,33,.30)) !important;
}

/* ikoon ja pealkiri hoveris ka natuke kirkamaks */
.top-module:hover .icon,
.home-card:hover .icon,
.module-card:hover .icon,
.top-module:focus-within .icon,
.home-card:focus-within .icon,
.module-card:focus-within .icon{
  filter: drop-shadow(0 0 12px rgba(86,191,255,.45));
}

.top-module:hover h3,
.home-card:hover h3,
.module-card:hover h3,
.top-module:focus-within h3,
.home-card:focus-within h3,
.module-card:focus-within h3{
  text-shadow: 0 0 14px rgba(107,201,255,.24);
}

/* kui kastidel on sees eraldi pseudo-overlays, tee need kergemaks */
.top-module::before,
.home-card::before,
.module-card::before{
  opacity: .35 !important;
}

/* LEDPROFF INFOEKRAAN / SCREENSAVER */
.info-screen{
  position:fixed;
  inset:0;
  z-index:10050;
  overflow:hidden;
  background:#020711;
  color:#fff;
  opacity:1;
  visibility:visible;
  transition:opacity .45s ease,visibility .45s ease;
}
.info-screen.hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.info-screen:not(.hidden){cursor:none}
.info-screen-bg{
  position:absolute;
  inset:-2%;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:0;
  transform:scale(1.035);
  transition:opacity 1.35s ease,transform 10s linear;
}
.info-screen-bg.active{
  opacity:1;
  transform:scale(1);
}
.info-screen-shade{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 68% 30%,rgba(49,179,255,.13),transparent 25%),
    radial-gradient(circle at 77% 47%,rgba(66,255,138,.07),transparent 18%),
    linear-gradient(90deg,rgba(2,7,18,.78),rgba(2,8,21,.34) 57%,rgba(2,5,13,.70)),
    linear-gradient(180deg,rgba(2,5,15,.58),rgba(2,5,15,.08) 40%,rgba(2,5,15,.66));
}
.info-screen-top,
.info-screen-bottom{
  position:absolute;
  z-index:3;
  left:clamp(30px,4.2vw,78px);
  right:clamp(30px,4.2vw,78px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.info-screen-top{top:clamp(30px,4vh,58px)}
.info-screen-bottom{bottom:clamp(28px,4vh,56px);align-items:flex-end}
.info-screen-event small{
  display:block;
  color:#84d6ff;
  font-size:clamp(10px,1vw,15px);
  font-weight:950;
  letter-spacing:3px;
  text-shadow:0 2px 16px #000;
}
.info-screen-event h1{
  margin:5px 0 0;
  max-width:58vw;
  color:#fff;
  font-size:clamp(42px,6.5vw,108px);
  line-height:.92;
  letter-spacing:-3px;
  text-transform:uppercase;
  text-shadow:0 6px 32px rgba(0,0,0,.75),0 0 34px rgba(49,179,255,.15);
}
.info-screen-event p{
  margin:12px 0 0;
  color:#e1ebf7;
  font-size:clamp(12px,1.25vw,20px);
  font-weight:650;
  text-shadow:0 3px 16px rgba(0,0,0,.85);
}
.info-screen-weather{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:210px;
  padding:12px 16px;
  border:1px solid rgba(105,196,255,.24);
  border-radius:20px;
  background:rgba(4,10,24,.46);
  backdrop-filter:blur(12px);
  box-shadow:0 14px 42px rgba(0,0,0,.26);
}
.info-screen-weather>span{font-size:38px}
.info-screen-weather>div{display:grid;gap:1px}
.info-screen-weather strong{font-size:28px}
.info-screen-weather small{font-size:12px;font-weight:850;color:#f0f5fb}
.info-screen-weather em{font-size:10px;color:#aab9ca;font-style:normal}
.info-screen-center{
  position:absolute;
  z-index:3;
  inset:29% 34% 21% 5%;
  display:grid;
  place-items:center;
  pointer-events:none;
}
.info-screen-now{
  width:min(720px,58vw);
  padding:18px 24px;
  border:1px solid rgba(104,190,255,.26);
  border-radius:26px;
  background:linear-gradient(100deg,rgba(4,10,23,.62),rgba(10,10,28,.47));
  backdrop-filter:blur(11px);
  box-shadow:0 24px 70px rgba(0,0,0,.32);
}
.info-screen-now>small{
  display:block;
  margin-bottom:7px;
  color:#9bdcff;
  font-size:11px;
  font-weight:950;
  letter-spacing:2px;
}
.info-screen-now-row{
  display:flex;
  align-items:center;
  gap:17px;
}
.info-screen-now-row>span{
  width:68px;height:68px;
  flex:0 0 68px;
  display:grid;place-items:center;
  border-radius:20px;
  font-size:31px;
  background:linear-gradient(135deg,#168fe0,#7431db);
  box-shadow:0 0 34px rgba(49,179,255,.22);
}
.info-screen-now-row>div{display:grid;gap:3px;min-width:0}
.info-screen-now-row strong{
  font-size:clamp(24px,3.3vw,52px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.info-screen-now-row em{
  color:#bdcad8;
  font-style:normal;
  font-size:clamp(11px,1.1vw,16px);
}
.info-screen-side-image{
  position:absolute;
  z-index:4;
  right:clamp(34px,4.3vw,84px);
  top:53%;
  transform:translateY(-50%);
  width:min(28vw,430px);
  height:min(58vh,650px);
  padding:8px;
  border-radius:28px;
  border:1px solid rgba(91,190,255,.24);
  background:rgba(3,9,22,.34);
  box-shadow:0 24px 80px rgba(0,0,0,.35),0 0 34px rgba(49,179,255,.08);
  backdrop-filter:blur(9px);
  overflow:hidden;
}
.info-screen-side-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center bottom;
  border-radius:20px;
  filter:saturate(.92) contrast(1.05) brightness(.86);
}
.info-screen-clock{
  display:grid;
  gap:2px;
  text-shadow:0 4px 24px rgba(0,0,0,.78);
}
.info-screen-clock strong{
  font-size:clamp(56px,8vw,126px);
  line-height:.82;
  font-variant-numeric:tabular-nums;
}
.info-screen-clock span{
  margin-top:9px;
  color:#eef4fb;
  font-size:clamp(13px,1.4vw,21px);
  font-weight:750;
  text-transform:capitalize;
}
.info-screen-hint{
  padding:9px 13px;
  border-radius:999px;
  color:#b7c5d4;
  background:rgba(4,10,22,.42);
  border:1px solid rgba(111,190,255,.13);
  font-size:10px;
  backdrop-filter:blur(8px);
}
body.info-screen-active{
  overflow:hidden !important;
}
body.info-screen-active .global-safety-dock{
  display:none !important;
}
@media(max-width:850px){
  .top-modules{margin-top:38px !important}
  .info-screen-side-image{
    width:30vw;
    height:45vh;
    right:22px;
  }
  .info-screen-center{
    right:34%;
  }
}
@media(max-width:650px){
  .top-modules{margin-top:26px !important}
  .top-module:hover,
  .home-card:hover,
  .module-card:hover{
    transform: translateY(-2px) scale(1.01) !important;
  }
  .info-screen-event h1{font-size:clamp(34px,10vw,60px)}
  .info-screen-event p{display:none}
  .info-screen-weather{min-width:165px;padding:9px 11px}
  .info-screen-weather>span{font-size:27px}
  .info-screen-weather strong{font-size:20px}
  .info-screen-side-image{display:none}
  .info-screen-center{inset:31% 4% 22%}
  .info-screen-now{width:88vw;padding:14px 16px}
  .info-screen-hint{display:none}
}


/* =====================================================================
   MAIKL v4.1.3 – tugevam glow, kastid allapoole, heledam header/logo
   ===================================================================== */
:root{
  --led-card-bg: rgba(8,18,38,.28);
  --led-card-border: rgba(137, 215, 255, .28);
  --led-card-shadow: 0 18px 48px rgba(0,0,0,.18);
  --led-card-hover-border: rgba(157, 224, 255, .82);
  --led-card-hover-glow:
      0 0 0 1px rgba(159, 229, 255, .34),
      0 0 18px rgba(88, 195, 255, .42),
      0 0 44px rgba(67, 173, 255, .34),
      0 0 86px rgba(112, 73, 255, .28),
      0 28px 70px rgba(0,0,0,.25);
}

/* kogu ülemine kaartide ala veel allapoole */
.top-modules{
  margin-top: 72px !important;
  padding-top: 10px !important;
}

/* kastidele ümber tugevam kuma ka siis, kui hoverit pole */
.top-module,
.home-card,
.module-card{
  background: linear-gradient(180deg, rgba(9,20,42,.34), rgba(8,16,33,.22)) !important;
  border: 1px solid var(--led-card-border) !important;
  box-shadow:
      0 0 0 1px rgba(140,220,255,.10),
      0 0 18px rgba(78,184,255,.12),
      0 0 42px rgba(92,61,255,.08),
      var(--led-card-shadow) !important;
  backdrop-filter: blur(7px) saturate(1.04) !important;
  -webkit-backdrop-filter: blur(7px) saturate(1.04) !important;
}
.top-module:hover,
.top-module:focus-within,
.home-card:hover,
.home-card:focus-within,
.module-card:hover,
.module-card:focus-within{
  transform: translateY(-6px) scale(1.022) !important;
  border-color: var(--led-card-hover-border) !important;
  box-shadow: var(--led-card-hover-glow) !important;
  background: linear-gradient(180deg, rgba(10,22,47,.40), rgba(8,16,33,.24)) !important;
}

/* headeri taust rohkem läbi paistma */
.hero-header,
.main-header,
header.hero,
header.main-header,
.header,
.top-header{
  background:
    linear-gradient(180deg, rgba(10,20,38,.42), rgba(7,14,28,.26)) !important;
  backdrop-filter: blur(7px) saturate(1.02) !important;
  -webkit-backdrop-filter: blur(7px) saturate(1.02) !important;
  box-shadow: 0 10px 34px rgba(0,0,0,.12) !important;
}
.hero-header::before,
.main-header::before,
header.hero::before,
header.main-header::before,
.header::before,
.top-header::before{
  opacity: .35 !important;
}

/* vasaku all oleva taustapildi tumedus väiksemaks */
.left-bottom-logo,
.bottom-left-logo,
.sidebar-logo,
.left-panel-logo,
.left-logo-wallpaper,
.logo-wallpaper,
.left-watermark,
.side-watermark{
  opacity: .88 !important;
  filter: brightness(.98) saturate(.96) contrast(1.04) !important;
}

/* kui pilt on pseudoelemendiga */
.left-panel::after,
.left-sidebar::after,
.sidebar::after,
.sidepanel::after,
.left-box::after{
  opacity: .82 !important;
  filter: brightness(.98) saturate(.96) contrast(1.03) !important;
}

/* kui tumendav kiht on olemas, tee seda nõrgemaks */
.left-panel::before,
.left-sidebar::before,
.sidebar::before,
.sidepanel::before,
.left-box::before{
  opacity: .18 !important;
}

/* ka avalehe üldine sisu veidi allapoole, et ülemised ribad ei kaoks */
.home-main,
.home-content,
.dashboard-main,
.main-content{
  padding-top: max(18px, env(safe-area-inset-top)) !important;
}

@media(max-width:850px){
  .top-modules{ margin-top: 58px !important; }
}
@media(max-width:650px){
  .top-modules{ margin-top: 42px !important; }
}



/* =====================================================================
   MAIKL v4.1.4 – PÜSIV MUUSIKAKAUST
   ===================================================================== */
.music-folder-box{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  padding:10px;
  margin-bottom:10px;
  border:1px solid rgba(111,201,255,.20);
  border-radius:14px;
  background:rgba(6,13,28,.32);
}
.music-folder-box small{
  grid-column:1/-1;
  color:#aeb9c9;
  font-size:9px;
  line-height:1.45;
}
.music-folder-state{
  display:inline-flex;
  align-items:center;
  max-width:52%;
  padding:5px 8px;
  border-radius:999px;
  border:1px solid rgba(157,174,205,.18);
  background:rgba(7,11,22,.30);
  color:#adb7c5;
  font-size:8px;
  font-weight:850;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.music-folder-state.ok{
  color:#8fffc2;
  border-color:rgba(74,255,154,.24);
  background:rgba(29,119,72,.15);
}
.music-folder-state.warn{
  color:#ffd58b;
  border-color:rgba(255,187,78,.24);
  background:rgba(135,85,18,.14);
}
.music-file-fallback{
  opacity:.78;
}
@media(max-width:720px){
  .music-folder-box{grid-template-columns:1fr}
  .music-folder-state{max-width:100%}
}


/* =====================================================================
   MAIKL v4.1.5 – YOUTUBE AUTO-NEXT + MUUSIKA JÄRJEKORRA MUUTMINE
   ===================================================================== */
.music-queue-row{
  grid-template-columns:24px 34px minmax(0,1fr) auto !important;
  align-items:center;
}
.queue-drag-handle{
  display:grid;
  place-items:center;
  width:22px;
  min-height:34px;
  color:#8eb5d2;
  cursor:grab;
  user-select:none;
  font-weight:900;
  letter-spacing:-3px;
}
.queue-drag-handle:active{cursor:grabbing}
.queue-order-tools{
  display:flex;
  gap:4px;
}
.queue-order-tools button{
  width:28px;
  height:28px;
  padding:0;
  border:1px solid rgba(115,197,255,.22);
  border-radius:8px;
  background:rgba(11,20,39,.54);
  color:#cfe8ff;
  cursor:pointer;
  font-weight:900;
}
.queue-order-tools button:hover{
  border-color:rgba(113,214,255,.65);
  box-shadow:0 0 14px rgba(71,181,255,.24);
}
.music-queue-row.dragging{
  opacity:.48;
}
.music-queue-row.drag-over{
  border-color:rgba(113,214,255,.72) !important;
  box-shadow:inset 0 0 0 1px rgba(113,214,255,.22),0 0 18px rgba(66,169,255,.18);
}


/* =====================================================================
   MAIKL v4.1.7 – PÄRIS YOUTUBE VIDEO + ALUMINE VIDEO-DOCK
   ===================================================================== */
.persistent-youtube-host{
  position:fixed;
  z-index:8800;
  overflow:hidden;
  background:#000;
  border:1px solid rgba(118,207,255,.40);
  box-shadow:
    0 0 0 1px rgba(124,212,255,.14),
    0 0 24px rgba(60,177,255,.22),
    0 20px 60px rgba(0,0,0,.40);
  transition:
    left .22s ease,
    top .22s ease,
    width .22s ease,
    height .22s ease,
    bottom .22s ease,
    right .22s ease,
    border-radius .22s ease;
}
.persistent-youtube-host.hidden{
  display:none !important;
}
.persistent-youtube-host iframe,
#persistentYoutubePlayer{
  width:100% !important;
  height:100% !important;
  border:0 !important;
  display:block;
}
.persistent-youtube-host.youtube-stage-mode{
  border-radius:14px;
}
.persistent-youtube-host.youtube-dock-mode{
  left:auto !important;
  top:auto !important;
  right:18px !important;
  bottom:92px !important;
  width:min(360px,30vw) !important;
  aspect-ratio:16/9;
  height:auto !important;
  border-radius:14px;
}
.youtube-dock-badge{
  position:absolute;
  z-index:2;
  left:8px;
  right:8px;
  top:8px;
  display:none;
  align-items:center;
  gap:7px;
  max-width:calc(100% - 16px);
  padding:5px 8px;
  border-radius:9px;
  color:#fff;
  background:rgba(2,7,16,.72);
  backdrop-filter:blur(8px);
  pointer-events:none;
}
.youtube-dock-mode .youtube-dock-badge{
  display:flex;
}
.youtube-dock-badge span{
  color:#7bd4ff;
  font-size:11px;
}
.youtube-dock-badge b{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:10px;
}
.yt-live-placeholder{
  width:100%;
  min-height:100%;
  display:grid;
  place-items:center;
  align-content:center;
  gap:6px;
  color:#a9bdd0;
  background:rgba(2,7,16,.38);
}
.yt-live-placeholder>span{
  font-size:38px;
  color:#4fbaff;
}
.yt-live-placeholder>b{
  max-width:82%;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:#fff;
  font-size:15px;
}
.yt-live-placeholder>small{
  font-size:9px;
}
@media(max-width:800px){
  .persistent-youtube-host.youtube-dock-mode{
    right:10px !important;
    bottom:88px !important;
    width:min(280px,45vw) !important;
  }
}


/* =====================================================================
   MAIKL v4.1.8 – YOUTUBE VIDEO MUSTA EKRAANI PARANDUS
   ===================================================================== */

/* Päris YouTube iframe peab olema nähtav ja klikitav. */
.persistent-youtube-host{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  overflow:hidden !important;
  background:#000 !important;
}
.persistent-youtube-host.hidden{
  display:none !important;
}
.persistent-youtube-host:not(.hidden){
  display:block !important;
}

/* YouTube API asendab DIV-i IFRAME-iga – mõlemad peavad täitma hosti. */
#persistentYoutubePlayer,
#persistentYoutubePlayer iframe,
.persistent-youtube-host > iframe{
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-width:100% !important;
  min-height:100% !important;
  max-width:none !important;
  max-height:none !important;
  opacity:1 !important;
  visibility:visible !important;
  filter:none !important;
  transform:none !important;
  pointer-events:auto !important;
  border:0 !important;
}

/* YouTube lehel on päris video kõige pealmine kiht. */
.persistent-youtube-host.youtube-stage-mode{
  z-index:9000 !important;
  opacity:1 !important;
}

/* Teistes moodulites väike liikuv video alumise playeri kohal. */
.persistent-youtube-host.youtube-dock-mode{
  z-index:9000 !important;
  opacity:1 !important;
}

/* Placeholder ise ei tohi päris video peale jääda. */
#ytViewer .yt-live-placeholder{
  opacity:.20 !important;
}

/* Väike pealkirjariba ei kata videot. */
.youtube-dock-badge{
  pointer-events:none !important;
}


/* =====================================================================
   MAIKL v4.1.9 – HEADER LAIEMAKS + AVALEHE SISU ALLAPOOLE
   ===================================================================== */

/* Header täidab rohkem ala ja tundub avaram */
.main-area::before{
  height:260px !important;
  left:0 !important;
  right:0 !important;
  width:auto !important;
  border-radius:24px !important;
  background-position:center 52% !important;
}

/* Headeri sisu kasutab suuremat kõrgust */
.topbar{
  min-height:182px !important;
  max-height:182px !important;
  padding:24px 26px 22px 32px !important;
}

/* Pealkirja plokile rohkem ruumi */
.title-wrap{
  max-width:72% !important;
}

/* Parempoolsed vidinad natuke laiemalt */
.top-widgets{
  gap:12px !important;
}

/* Avalehe kogu sisu nihkub allapoole */
#homeView{
  padding-top:34px !important;
}

/* Neli ülemist suurt kasti veel allapoole */
.top-modules{
  margin-top:96px !important;
  padding-top:12px !important;
}

/* Ülejäänud avalehe grid jätkab loomulikult allpool */
.dashboard-grid{
  margin-top:22px !important;
}

/* Väiksematel ekraanidel mõõdukam nihe */
@media(max-width:1100px){
  .main-area::before{
    height:242px !important;
  }
  .topbar{
    min-height:170px !important;
    max-height:170px !important;
  }
  .top-modules{
    margin-top:82px !important;
  }
}
@media(max-width:850px){
  .main-area::before{
    height:225px !important;
  }
  #homeView{
    padding-top:24px !important;
  }
  .top-modules{
    margin-top:66px !important;
  }
}
@media(max-width:650px){
  .main-area::before{
    height:205px !important;
  }
  .topbar{
    min-height:150px !important;
    max-height:150px !important;
    padding:18px 18px 16px 20px !important;
  }
  #homeView{
    padding-top:18px !important;
  }
  .top-modules{
    margin-top:46px !important;
  }
}


/* =====================================================================
   MAIKL v4.2.0 – HEADER 50% KÕRGEMAKS
   ===================================================================== */

/* Headeri taustapilt veel palju kõrgem */
.main-area::before{
  height:390px !important;
  left:0 !important;
  right:0 !important;
  width:auto !important;
  border-radius:24px !important;
  background-position:center 50% !important;
  opacity:.52 !important;
}

/* Headeri sisu kõrgem ja avaram */
.topbar{
  min-height:255px !important;
  max-height:255px !important;
  padding:32px 28px 28px 34px !important;
  align-items:flex-start !important;
}

/* Tekstid ja vidinad jäävad kõrgemas headeris kenasti paika */
.title-wrap{
  max-width:74% !important;
  padding-top:8px !important;
}
.top-widgets{
  gap:12px !important;
  padding-top:6px !important;
}

/* Avalehe sisu veel allapoole */
#homeView{
  padding-top:78px !important;
}

/* Neli ülemist kasti jäävad nüüd kindlalt headeri alla */
.top-modules{
  margin-top:138px !important;
  padding-top:14px !important;
}

/* Ülejäänud grid jätkub allpool */
.dashboard-grid{
  margin-top:24px !important;
}

/* Respo */
@media(max-width:1100px){
  .main-area::before{ height:355px !important; }
  .topbar{
    min-height:228px !important;
    max-height:228px !important;
  }
  #homeView{ padding-top:64px !important; }
  .top-modules{ margin-top:120px !important; }
}
@media(max-width:850px){
  .main-area::before{ height:315px !important; }
  .topbar{
    min-height:205px !important;
    max-height:205px !important;
  }
  #homeView{ padding-top:48px !important; }
  .top-modules{ margin-top:92px !important; }
}
@media(max-width:650px){
  .main-area::before{ height:265px !important; }
  .topbar{
    min-height:175px !important;
    max-height:175px !important;
    padding:22px 18px 18px 22px !important;
  }
  #homeView{ padding-top:30px !important; }
  .top-modules{ margin-top:62px !important; }
}


/* =====================================================================
   MAIKL v4.2.1 – AVALEHE SISU TAGASI ÜLES
   HEADER JÄÄB v4.2.0 KUJUL PUUTUMATA
   ===================================================================== */

#homeView{
  padding-top:34px !important;
}

.top-modules{
  margin-top:96px !important;
  padding-top:12px !important;
}

.dashboard-grid{
  margin-top:22px !important;
}

@media(max-width:1100px){
  #homeView{ padding-top:34px !important; }
  .top-modules{ margin-top:82px !important; }
}
@media(max-width:850px){
  #homeView{ padding-top:24px !important; }
  .top-modules{ margin-top:66px !important; }
}
@media(max-width:650px){
  #homeView{ padding-top:18px !important; }
  .top-modules{ margin-top:46px !important; }
}


/* =====================================================================
   MAIKL v4.2.4 – CLEAN HEADER FIX
   Base: v4.2.1
   Headeri kõrgust EI muudeta.
   ===================================================================== */

/*
  OLULINE:
  v4.2.0 kasutas .main-area::before opacity:.52.
  See muutis kogu foto läbipaistvaks tumeda lehetausta suhtes.
  Nüüd on foto opacity 1 ning tumendus on ainult 10% overlay.
*/
.main-area::before{
  opacity:1 !important;

  /* Headeri suurus jääb v4.2.0 omaks. */
  height:390px !important;
  left:0 !important;
  right:0 !important;
  width:auto !important;
  border-radius:24px !important;

  /* 90% originaalpilt + ainult 10% musta kihti. */
  background:
    linear-gradient(rgba(0,0,0,.10),rgba(0,0,0,.10)),
    var(--header-image) center 50%/cover no-repeat !important;

  border:1px solid rgba(160,215,255,.25) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 18px 45px rgba(0,0,0,.20) !important;
}

/* Headeri mõõdud jäävad täpselt v4.2.0 tasemele. */
.topbar{
  min-height:255px !important;
  max-height:255px !important;
  padding:32px 28px 28px 34px !important;
  align-items:flex-start !important;
}
.title-wrap{
  max-width:74% !important;
  padding-top:8px !important;
}

/* Päriselt nähtav must vari LEDPROFF teksti ümber. */
.main-title{
  display:inline-block !important;
  padding:8px 14px 9px !important;
  border-radius:14px !important;
  background:rgba(0,0,0,.26) !important;
  box-shadow:
    0 8px 24px rgba(0,0,0,.32),
    inset 0 0 0 1px rgba(255,255,255,.035) !important;

  text-shadow:
    0 2px 1px rgba(0,0,0,1),
    0 4px 7px rgba(0,0,0,.98),
    0 0 14px rgba(0,0,0,.92),
    0 0 28px rgba(0,0,0,.72) !important;
}

/* Span/em saavad oma tugeva varju, et parenti gradient/clip seda ära ei sööks. */
.main-title #titleMain{
  color:#fff !important;
  text-shadow:
    0 2px 1px rgba(0,0,0,1),
    0 4px 7px rgba(0,0,0,.98),
    0 0 14px rgba(0,0,0,.92),
    0 0 28px rgba(0,0,0,.72) !important;
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.95)) !important;
}

.main-title em{
  color:#e5edf8 !important;
  text-shadow:
    0 2px 1px rgba(0,0,0,1),
    0 4px 7px rgba(0,0,0,.98),
    0 0 14px rgba(0,0,0,.92),
    0 0 26px rgba(0,0,0,.70) !important;
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.95)) !important;
}

/* Alatekstile eraldi tume alus + vari. */
.welcome{
  display:block !important;
  width:max-content !important;
  max-width:min(680px,70vw) !important;
  margin-top:10px !important;
  padding:6px 11px !important;
  border-radius:10px !important;
  text-align:left !important;
  background:rgba(0,0,0,.34) !important;
  box-shadow:0 6px 18px rgba(0,0,0,.28) !important;
  text-shadow:
    0 2px 2px rgba(0,0,0,1),
    0 0 9px rgba(0,0,0,.95),
    0 0 18px rgba(0,0,0,.72) !important;
}

/* Avaleht ainult veidi üles. Headeri kõrgust ei puuduta. */
#homeView{
  padding-top:20px !important;
}
.top-modules{
  margin-top:78px !important;
  padding-top:10px !important;
}
.dashboard-grid{
  margin-top:18px !important;
}

@media(max-width:1100px){
  #homeView{padding-top:20px !important}
  .top-modules{margin-top:70px !important}
}
@media(max-width:850px){
  #homeView{padding-top:16px !important}
  .top-modules{margin-top:56px !important}
}
@media(max-width:650px){
  #homeView{padding-top:12px !important}
  .top-modules{margin-top:38px !important}
  .main-title{
    padding:6px 9px 7px !important;
  }
  .welcome{
    max-width:82vw !important;
  }
}



/* =====================================================================
   MAIKL v4.2.6 – CLEAN MENU + QR
   Põhilehe grid/sidebar loogikat EI kirjutata ümber.
   ===================================================================== */

/* MENU nupp jääb vana koha peale: pealkirja all vasakul. */
.header-menu-toggle{
  position:relative !important;
  inset:auto !important;
  margin:10px 0 0 0 !important;
  transform:none !important;
  z-index:6 !important;
}

/* Menüü avamine/sulgemine kohe, ilma kogu grid'i 0.25s reflow animatsioonita. */
.app-shell{
  transition:none !important;
}
.sidebar,
.sidebar:hover,
.sidebar:focus-within,
.sidebar.open,
.app-shell.sidebar-collapsed .sidebar{
  transition:opacity .10s ease,transform .10s ease !important;
}

/* QR põhikaardil tehniline URL peidetud. */
.phone-url-hidden{
  display:none !important;
}
.qr-clickable{
  cursor:pointer !important;
}
.qr-clickable:hover,
.qr-clickable:focus-visible{
  outline:none !important;
  transform:scale(1.025);
  box-shadow:0 0 0 2px rgba(111,211,255,.28),0 0 22px rgba(60,180,255,.18) !important;
}
.qr-more-info{
  display:inline-block;
  border:0;
  background:transparent;
  padding:2px 0;
  color:#8fd9ff;
  font-size:9px;
  font-weight:900;
  letter-spacing:.35px;
  text-align:left;
  cursor:pointer;
}
.qr-more-info:hover{color:#fff}

/* Ainult QR modali stiilid */
.qr-detail-modal{
  z-index:11000 !important;
  padding:22px !important;
  background:rgba(0,0,10,.78) !important;
}
.qr-detail-card{
  position:relative;
  width:min(920px,94vw);
  max-height:90vh;
  overflow:auto;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
  gap:26px;
  align-items:center;
  padding:28px;
  border:1px solid rgba(115,207,255,.28);
  border-radius:24px;
  background:linear-gradient(145deg,#071020,#09091b);
  box-shadow:0 28px 90px rgba(0,0,0,.62);
}
.qr-detail-close{
  position:absolute;
  right:14px;
  top:14px;
  z-index:2;
  width:36px;
  height:36px;
  border-radius:10px;
  border:1px solid rgba(160,210,255,.22);
  background:#0b1220;
  color:#fff;
}
.qr-detail-kicker{
  color:#82d9ff;
  font-size:10px;
  font-weight:950;
  letter-spacing:2px;
}
.qr-detail-copy h2{
  margin:7px 0 10px;
  font-size:32px;
}
.qr-detail-copy>p{
  margin:0 0 16px;
  color:#b9c8d8;
  font-size:13px;
  line-height:1.5;
}
.qr-detail-steps{
  display:grid;
  gap:8px;
}
.qr-detail-steps>div{
  display:grid;
  grid-template-columns:30px 1fr;
  gap:10px;
  align-items:center;
  padding:9px 11px;
  border:1px solid rgba(126,182,235,.13);
  border-radius:12px;
  background:rgba(11,20,36,.72);
}
.qr-detail-steps b{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:8px;
  background:linear-gradient(135deg,#168fe0,#7431db);
}
.qr-detail-steps span{
  color:#d5dfeb;
  font-size:11px;
  line-height:1.35;
}
.qr-detail-url{
  margin-top:15px;
  padding:10px 12px;
  border:1px solid rgba(107,199,255,.18);
  border-radius:12px;
  background:#07101e;
}
.qr-detail-url small{
  display:block;
  margin-bottom:3px;
  color:#8196aa;
  font-size:8px;
  font-weight:900;
  letter-spacing:1.2px;
}
.qr-detail-url a{
  color:#8edcff;
  font-size:11px;
  word-break:break-all;
}
.qr-detail-image-wrap{
  display:grid;
  justify-items:center;
  gap:8px;
}
.qr-detail-image-wrap img{
  width:min(350px,72vw);
  aspect-ratio:1;
  object-fit:contain;
  padding:12px;
  border-radius:18px;
  background:#fff;
}
.qr-detail-image-wrap small{
  color:#8493a5;
  font-size:9px;
  text-align:center;
}
@media(max-width:760px){
  .qr-detail-card{
    grid-template-columns:1fr;
    width:min(520px,94vw);
    padding:22px 16px;
  }
  .qr-detail-image-wrap{grid-row:1}
}



/* =====================================================================
   MAIKL v4.2.7 – MENÜÜ NUPP WELCOME TEKSTI ALL
   ===================================================================== */
.header-menu-toggle{
  position:relative !important;
  inset:auto !important;
  margin:9px 0 0 0 !important;
  align-self:flex-start !important;
  transform:none !important;
  z-index:6 !important;
}
.welcome{
  margin-top:10px !important;
  margin-bottom:0 !important;
}