/* PlayServs configuration — exact user-selected background #120B20. */
:root{--bg:#120b20;--bg-deep:#090610;--bg-card:#1b112d;--bg-lift:#2c1845;--cyan:#be82ff;--cyan-soft:#e0c3ff;--blue:#8739ed;--line:rgba(184,126,249,.24);--line-strong:rgba(192,132,252,.6);--text:#fbf4ff;--muted:#b6a8c7}
html,body{background:#120b20;color:var(--text)}
body{font-family:'DM Sans',sans-serif}
.header{background:rgba(18,11,32,.96);border-bottom:1px solid rgba(184,126,249,.12)}
.footer{background:#0e0919;border-top-color:rgba(184,126,249,.12)}
.config-shell{padding-top:44px;padding-bottom:44px}
.config-shell .login{gap:48px;align-items:center;padding:24px 0}
.config-shell .intro h1{font-family:'Manrope',sans-serif;font-size:clamp(2rem,3.2vw,3rem);line-height:1.17;font-weight:700;letter-spacing:-.045em;margin:14px 0 20px}
.config-shell .intro>p,.config-shell .legal p,.field-note,.workspace-head p,.card p,.device-meta span,.config-guide-steps article p{color:var(--muted)}
.config-shell .legal{border-color:#704a9d;padding-left:18px}
.config-shell .legal b,.summary-section-title,.counter b{color:#cfb4ee}
.eyebrow{color:#c1a0e5;letter-spacing:.15em}
.config-shell .panel,.device-summary,.playlist-workspace{background:#1b112d;border:1px solid rgba(184,126,249,.19);border-radius:16px;box-shadow:none}
.config-shell .login-panel{padding:28px}
.config-shell label,.modal-card label{color:#dfd5ec;font-size:.9rem;line-height:1.5}
.config-shell input,.config-shell select,.modal-card input,.modal-card select,.language-switch select{background:#120b20;border-color:#49365f;color:#fbf4ff;box-shadow:none;line-height:1.4}
.config-shell input::placeholder,.modal-card input::placeholder{color:#8d7d9e;opacity:1}
.config-shell input:focus,.config-shell select:focus,.modal-card input:focus,.modal-card select:focus{border-color:#a07bce;box-shadow:0 0 0 3px rgba(135,57,237,.13)}
.config-shell button,.modal-card button{background:linear-gradient(120deg,#7032be,#843cdd);border-color:#9253de;color:#fff;box-shadow:none;font-weight:600}
.config-shell button:hover,.modal-card button:hover{filter:brightness(1.08)}
.config-shell button:focus-visible,.modal-card button:focus-visible{outline:2px solid #c6a2f0;outline-offset:3px}
.config-shell button.secondary,.config-shell button.copy-device,.modal-card #close,.card .danger{background:#241735;border-color:#49365f;color:#e8def5}
.summary-section,.device-support-card{border-top-color:#3a294f}
.device-state{background:#2b1a40;color:#d8c0f3}
.device-state.active{background:#182b28;color:#a0d4c2}
.device-state.trial{background:#2c203e;color:#d4bce9}
.device-state.expired,.device-state.blocked{background:#362333;color:#e9b3bd}
.slots{gap:18px}
.slots .card{background:#201530;border-color:#49365f;border-radius:12px;padding:22px}
.slots .card.empty{background:#191026;border-color:#4a365f}
.slots .card h3{font-weight:600;line-height:1.35;margin:14px 0 12px}
.slots .card .actions{margin-top:18px;gap:10px}
.config-guide{border-top-color:#322441;margin-top:34px;padding-top:28px}
.config-guide h2{font-weight:600}.config-guide-steps article span{color:#ab84d9}
.modal{background:rgba(9,6,16,.82);backdrop-filter:blur(7px)}
#modal.modal>.modal-card{background:#1b112d!important;border:1px solid #49365f!important;border-radius:16px!important;padding:28px!important;box-shadow:0 22px 70px rgba(0,0,0,.3)!important;width:min(480px,100%)!important}
#modal .modal-head{margin-bottom:24px;gap:20px;align-items:center}
#modal .modal-head h2{font-family:'Manrope',sans-serif;font-weight:600;font-size:1.35rem!important;line-height:1.4;letter-spacing:-.025em}
#modal .modal-head #close{width:36px;min-height:36px;padding:0;border-radius:9px;flex-shrink:0}
#modal .connection-tabs{gap:8px;margin-bottom:24px}
#modal .connection-tabs button{background:#211532!important;border-color:#49365f!important;color:#baaccb!important;font-size:.88rem;line-height:1.4}
#modal .connection-tabs button[aria-selected=true]{background:#38224f!important;border-color:#9d73cd!important;color:#f5edff!important;box-shadow:none!important}
#modal input,#modal select{background:#120b20!important;border-color:#49365f!important;border-radius:9px!important;min-height:48px!important;font-size:16px!important;line-height:1.5!important}
#modal .connection-name{margin-top:20px}
#modal #save{background:linear-gradient(120deg,#7032be,#843cdd)!important;border-color:#9253de!important;border-radius:10px!important;min-height:48px!important;margin-top:12px!important}
.footer-bottom{border-top-color:rgba(184,126,249,.12)}
@media(max-width:760px){.config-shell{padding-block:28px 32px}.config-shell .login{gap:28px;padding:0}.config-shell .login-panel{padding:22px}.config-shell .intro h1{font-size:2rem;line-height:1.2}.config-guide{margin-top:28px}.config-guide-steps{gap:22px}}
@media(max-width:480px){#modal.modal{padding:16px!important}#modal.modal>.modal-card{padding:22px!important;max-height:calc(100dvh - 32px)!important}#modal .modal-head h2{font-size:1.2rem!important}.slots .card{padding:20px}.config-shell input{font-size:16px}}