/* SoulOne Studio · home para móvil (Android / iPhone)
   No altera las operaciones de subida, librería, clasificación o eliminación. */
:root{--sone-bg:#07121d;--sone-card:#112535;--sone-stroke:#284557;--sone-ink:#eff8fc;--sone-muted:#a8c0cf;--sone-accent:#5ed2c6}
body{min-height:100dvh;background:radial-gradient(ellipse 92% 56% at 55% -12%,#173c53 0%,#0a1d2b 52%,#07121d 100%);color:var(--sone-ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
header{background:#0b1c2bdf;border-bottom:1px solid #274457;backdrop-filter:blur(16px);gap:14px}
header h1{font-size:clamp(18px,2.6vw,23px);font-weight:760;letter-spacing:-.035em;color:#f2fbff}
header h1 img{width:43px;height:43px;border-radius:10px;object-fit:cover}
header small{color:#9fbccc;font-size:12px}
header .mark{color:#6cddcf}
header .actions{gap:10px}
header .actions a{display:inline-flex;align-items:center;padding:10px 14px;border:1px solid #397b7b;border-radius:9px;color:#d6fff6!important;background:#134947;font-size:13px;text-decoration:none!important}
header .actions button.secondary{background:#183447;color:#bcd8e4;border:1px solid #3a5a6d}
main{max-width:1360px;gap:16px}
.panel{background:#102638;border:1px solid #2c495b;color:var(--sone-ink);box-shadow:0 12px 36px #0003}
.panel h2{color:#f0f9ff;letter-spacing:-.025em}
.muted,header small,.song small{color:#a6c0d0}
label{color:#d2e7f1;font-weight:620}
input,select{background:#0a1d2b;border-color:#3b5e72;color:#f3faff}
input::placeholder{color:#7290a4}
input[type=file]{background:#0b2537;border-color:#42677b;color:#c7e3ef}
button{background:#177b89;color:#f7ffff}
button.secondary{background:#193e4e;color:#d2e8f1}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #78e6d6;outline-offset:3px}
.tip{background:#113545;color:#b9dce9;border-color:#346b7d}
.alert{background:#3b2f1d;color:#f7dbb3;border-color:#775f36}
.pill{background:#13483f;color:#94f1d9}
.song{border-color:#345065;gap:9px}
.song small{display:block;line-height:1.7}
.song-delete{border-color:#804956;color:#ffb6bf}
.song-delete:hover{background:#422534}
.library-notice{color:#93e6cd}
.library-notice.error{color:#ffb9b9}
.file{border-color:#345065}
.file-status{color:#9dbccd}
#log,.speed{color:#a9cbd8}
#auth{max-width:480px;grid-column:1/-1;margin:clamp(12px,6vh,65px) auto;width:100%}
#auth h2{font-size:clamp(24px,3vw,32px)}
#auth form button{width:100%}
#authError{color:#ffb5ad}
.delete-dialog{background:#102638;border-color:#3a5e71;color:#eef9fd}
.delete-dialog .muted{color:#a8c2d2}
#studioOrientation{display:none}
@media(max-width:900px){
 main{margin:14px auto;padding:0 12px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
 header{padding:10px 14px}
 .panel{padding:17px;border-radius:13px}
 .file{grid-template-columns:minmax(0,1fr) 100px}
 .file select{min-width:0}
 .song{flex-wrap:wrap}
}
@media(max-width:590px){
 main{grid-template-columns:1fr}
 header{align-items:flex-start}
 header .actions{margin-left:auto}
 header small{display:none}
 header .actions a,header .actions button{padding:9px}
 .panel{padding:15px}
}
@media (orientation:portrait) and (pointer:coarse){
 html,body{overflow:hidden!important}
 #studioOrientation{display:flex!important;position:fixed;inset:0;z-index:2147483640;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:calc(22px + env(safe-area-inset-top)) 24px calc(22px + env(safe-area-inset-bottom));background:radial-gradient(ellipse at center top,#173c4e 0%,#081824 55%,#040c13 100%);color:#f0f9ff;gap:14px}
 #studioOrientation img{width:94px;height:94px;border-radius:22px;object-fit:cover;box-shadow:0 18px 60px #0006}
 #studioOrientation .turn-icon{width:56px;height:56px;opacity:.78;margin:2px auto}
 #studioOrientation strong{font-size:25px;line-height:1.1;letter-spacing:-.03em}
 #studioOrientation p{font-size:14px;line-height:1.55;color:#b1cad6;max-width:350px;margin:0}
 #studioOrientation button{margin-top:7px;background:#176977;border:1px solid #66bdb5}
}
@media (orientation:landscape) and (pointer:coarse) and (max-height:540px){
 header{padding:7px max(11px,env(safe-area-inset-left));min-height:52px}
 header h1{font-size:18px}
 header h1 img{height:32px;width:32px}
 header .actions a,header .actions button{padding:7px 10px;font-size:12px}
 main{margin:8px auto;padding:0 max(9px,env(safe-area-inset-right)) 12px max(9px,env(safe-area-inset-left));grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:10px}
 .panel{padding:12px 14px}
 .panel h2{font-size:18px;margin-bottom:8px}
 label{margin:7px 0 4px}
 input,select{padding:8px 10px}
 input[type=file]{padding:9px}
 .tip{padding:8px}
 .song{padding:9px 0}
 #auth{max-width:470px;margin:16px auto}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* Full device immersive mode: Android WebAPK hides OS bars via fullscreen manifest.
   Existing standalone installations can switch using an explicit gesture. */
.studio-immersive-action{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:38px;padding:9px 12px;
  color:#c9f5ec;background:#102f3d;border:1px solid #3c8a87;
  border-radius:9px;font-size:12px;font-weight:670;white-space:nowrap;
}
.studio-immersive-action[hidden]{display:none!important}
#auth>.studio-immersive-action{margin-top:12px;width:100%}
@media (display-mode: fullscreen){
  html{min-height:100%;background:#07121d}
  body{min-height:100dvh;margin:0}
  .studio-immersive-action{display:none!important}
}
@media (pointer:coarse) and (orientation:landscape){
  html{width:100%;height:100%}
  body{min-height:100dvh}
}