*{box-sizing:border-box}body{margin:0;background:#0a0c0f;color:#f5f5f5;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input,select{font:inherit}.hidden{display:none!important}.auth-shell{min-height:100vh;display:grid;grid-template-columns:1fr 460px;align-items:center;gap:80px;max-width:1100px;margin:auto;padding:40px}.auth-brand .mark{width:70px;height:70px}.auth-brand h1{font-size:64px;letter-spacing:-.05em;margin:20px 0 0}.auth-brand p{color:#858e9b;font-size:18px}.mark{display:grid;place-items:center;background:#f4f4f5;color:#111;border-radius:16px;font-weight:900}.mark.small{width:40px;height:40px;border-radius:11px}.auth-card,.panel,.player,.info{background:#13171c;border:1px solid #292f38;border-radius:20px;padding:26px}.tabs{display:flex;background:#0d1014;padding:5px;border-radius:10px;margin-bottom:25px}.tabs button{flex:1;border:0;background:transparent;color:#858e9b;padding:10px;border-radius:7px;cursor:pointer}.tabs button.active{background:#20252d;color:#fff}.auth-card form{display:grid;gap:12px}.auth-card h2{margin:0}.auth-card p{margin:0 0 12px;color:#848d98}.auth-card input,.filters input,.filters select{background:#0e1115;color:#fff;border:1px solid #303641;border-radius:10px;padding:13px}.primary{background:#f4f4f5;color:#111;border:0;border-radius:10px;padding:12px 16px;font-weight:800;cursor:pointer}.msg{padding:11px;margin-top:15px;border-radius:9px;background:#25191b;color:#ffb6bd}.app{min-height:100vh;display:grid;grid-template-columns:225px minmax(0,1fr) 300px}.sidebar,.right{background:#111419;border-color:#252b33;border-style:solid;padding:22px}.sidebar{border-width:0 1px 0 0;display:flex;justify-content:space-between;flex-direction:column}.right{border-width:0 0 0 1px}.brand{display:flex;gap:11px;align-items:center;margin-bottom:30px}.brand strong,.brand small,.user strong,.user small,.pro strong,.pro small,.player strong,.player small{display:block}.brand small,.user small,.pro small,.player small,.info p{color:#818a96}.nav{width:100%;text-align:left;border:0;background:transparent;color:#929ba7;padding:12px;border-radius:10px;margin:3px 0;cursor:pointer}.nav:hover,.nav.active{background:#1b2027;color:#fff}.pro{border:1px solid #2c333d;background:#171b21;border-radius:13px;padding:14px;margin-bottom:10px}.pro span,.pill{display:inline-block;background:#eee;color:#111;font-size:10px;font-weight:900;letter-spacing:.08em;padding:5px 8px;border-radius:999px}.pro strong{margin-top:9px}main{min-width:0}header{display:flex;justify-content:space-between;align-items:center;padding:28px 32px 18px}header h1{margin:3px 0}.eyebrow{color:#727b87;font-size:10px;font-weight:900;letter-spacing:.14em;margin:0}.user{display:flex;gap:10px;align-items:center}.avatar{width:38px;height:38px;background:#f4f4f5;color:#111;border-radius:50%;display:grid;place-items:center;font-weight:900}#catalogView,#downloadsView{padding:0 32px 32px}.hero{display:flex;justify-content:space-between;align-items:end;gap:30px;background:linear-gradient(120deg,#171b21,#262c34);border:1px solid #2a3038;border-radius:20px;padding:28px}.hero h2{font-size:34px;margin:14px 0 8px}.hero p{color:#969faa}.stats{display:flex;gap:25px}.stats div{text-align:right}.stats strong,.stats small{display:block}.stats strong{font-size:25px}.stats small{color:#78818d}.filters{display:grid;grid-template-columns:1fr 180px 120px;gap:10px;margin:18px 0}.table{border:1px solid #252b33;border-radius:14px;overflow:hidden}.row{display:grid;grid-template-columns:minmax(260px,2.5fr) 1fr 70px 70px 80px 110px;gap:8px;align-items:center;padding:13px;border-top:1px solid #222831}.row:first-child{border-top:0}.row:not(.head):hover{background:#11151a}.head{font-size:10px;font-weight:900;letter-spacing:.08em;color:#6f7884}.track{display:flex;gap:10px;align-items:center}.mini{width:40px;height:40px;border-radius:8px;background:#252b33;display:grid;place-items:center}.track strong,.track small{display:block}.track small{color:#7e8793;margin-top:2px}.actions{display:flex;gap:6px;justify-content:flex-end}.icon{width:31px;height:31px;border:1px solid #313844;background:#181d24;color:#fff;border-radius:8px;cursor:pointer}.icon.on{background:#f4f4f5;color:#111}.cover{height:150px;border-radius:12px;background:linear-gradient(135deg,#252b33,#171b20);display:grid;place-items:center;font-size:48px;margin:14px 0}.bar{height:4px;background:#2a3038;border-radius:99px;overflow:hidden;margin:15px 0}.bar span{display:block;height:100%;width:0;background:#eee}.player .primary{width:100%}.info{margin-top:15px}.panel h2{margin-top:5px}.download-item{padding:12px 0;border-bottom:1px solid #262c34}.download-item small{color:#818a96}@media(max-width:1000px){.app{grid-template-columns:210px 1fr}.right{display:none}.auth-shell{grid-template-columns:1fr;max-width:520px;gap:20px}.auth-brand h1{font-size:45px}}@media(max-width:720px){.app{display:block}.sidebar{display:none}header{padding:20px}.user{display:none}#catalogView,#downloadsView{padding:0 20px 20px}.hero{display:block}.stats{margin-top:20px;justify-content:flex-start}.stats div{text-align:left}.filters{grid-template-columns:1fr}.row{grid-template-columns:minmax(200px,1fr) 65px 100px}.row>div:nth-child(2),.row>div:nth-child(4),.row>div:nth-child(5){display:none}.auth-shell{padding:22px}}
.muted{color:#818a96}.admin-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,.7fr);gap:16px;padding:0 32px 32px}.drop{display:grid;place-items:center;text-align:center;border:1px dashed #3b4450;border-radius:14px;padding:34px;margin:18px 0;background:#0f1216;cursor:pointer}.drop:hover{background:#14181d}.drop input{display:none}.drop strong,.drop small{display:block}.drop small{color:#818a96;margin-top:5px}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:12px}.form-grid input,.form-grid select{background:#0e1115;color:#fff;border:1px solid #303641;border-radius:10px;padding:13px}.notice{padding:12px;border-radius:10px;background:#172018;border:1px solid #2b4630;margin-top:14px;color:#c9efce}.notice.error{background:#25191b;border-color:#4c282d;color:#ffb6bd}.steps{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start}.steps span{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#f3f4f6;color:#111;font-weight:800}.steps p{margin:3px 0 14px;color:#919aa6}.file-badge{font-size:9px;padding:3px 6px;border-radius:999px;background:#233023;color:#c9efce;margin-left:6px}.no-file{opacity:.4;cursor:not-allowed}
@media(max-width:1000px){.admin-layout{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}}

.batch-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}
.batch-summary>div{background:#0f1216;border:1px solid #282f38;border-radius:10px;padding:10px;text-align:center}
.batch-summary strong,.batch-summary small{display:block}
.batch-summary strong{font-size:20px}
.batch-summary small{color:#7f8995;font-size:11px;margin-top:2px}
.batch-queue{max-height:320px;overflow:auto;border:1px solid #282f38;border-radius:12px;margin:12px 0;background:#0e1115}
.batch-item{display:grid;grid-template-columns:1fr 100px;gap:12px;align-items:center;padding:10px 12px;border-bottom:1px solid #222831}
.batch-item:last-child{border-bottom:0}
.batch-name{min-width:0}
.batch-name strong,.batch-name small{display:block}
.batch-name strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
.batch-name small{color:#7f8995;margin-top:2px;font-size:11px}
.batch-status{text-align:right;font-size:11px;font-weight:800}
.batch-status.wait{color:#87909c}
.batch-status.work{color:#f1d98a}
.batch-status.ok{color:#9ee6a8}
.batch-status.fail{color:#ff9ca7}
.batch-progress{height:3px;background:#242a31;border-radius:99px;overflow:hidden;margin-top:6px}
.batch-progress span{display:block;height:100%;width:0;background:#f3f4f6;transition:width .2s}
@media(max-width:720px){.batch-summary{grid-template-columns:repeat(2,1fr)}}

.account-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:16px;padding:0 32px 32px}
.membership-card .price{display:flex;align-items:end;gap:8px;margin:18px 0}.membership-card .price strong{font-size:42px}.membership-card .price span{color:#818a96;margin-bottom:7px}
.member-status{display:inline-block;padding:7px 10px;border-radius:999px;background:#242a31;color:#dce2e8;font-size:11px;font-weight:900;letter-spacing:.08em;margin-bottom:12px}
.member-status.active{background:#1f3523;color:#aef1b8}.member-status.inactive{background:#3a2628;color:#ffb6bd}
.membership-card .secondary{margin-top:8px}.secondary{background:#1a1f25;color:#fff;border:1px solid #313844;border-radius:10px;padding:12px 16px;font-weight:800;cursor:pointer}
.member-details p{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid #262c34;padding:12px 0;margin:0}.member-details span{color:#818a96}.member-details strong{font-size:12px;text-align:right;word-break:break-all}
.config-box{margin-top:12px;padding:12px;border-radius:10px;background:#0f1216;border:1px solid #2a3038;color:#8f98a4;font-size:12px}
@media(max-width:900px){.account-grid{grid-template-columns:1fr}}

.admin-tabs{display:flex;gap:8px;padding:0 32px 16px;flex-wrap:wrap}
.admin-tab{background:#12161b;color:#8e97a3;border:1px solid #2b323b;padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:800}
.admin-tab.active{background:#f3f4f6;color:#111}
.admin-subview{padding:0 32px 32px}.admin-subview .admin-layout{padding:0}
.admin-wide{width:100%}.admin-head{display:flex;justify-content:space-between;align-items:center;gap:14px}.admin-head h2{margin:4px 0}
.admin-table-wrap{overflow:auto;margin-top:14px}.admin-table{width:100%;border-collapse:collapse;min-width:760px}.admin-table th,.admin-table td{padding:12px;border-bottom:1px solid #272d35;text-align:left}.admin-table th{color:#7e8794;font-size:10px;letter-spacing:.08em}.admin-table td{font-size:13px}.admin-table small{color:#7f8995}
.status-pill{display:inline-block;padding:5px 8px;border-radius:999px;font-size:10px;font-weight:900}.status-pill.active{background:#1f3523;color:#aef1b8}.status-pill.inactive{background:#3a2628;color:#ffb6bd}
.action-row{display:flex;gap:6px}.danger{background:#2b181b;color:#ffafb7;border:1px solid #4a272c;border-radius:8px;padding:8px 10px;cursor:pointer}.mini-action{background:#181d24;color:#fff;border:1px solid #313844;border-radius:8px;padding:8px 10px;cursor:pointer}
.admin-search{width:100%;margin-top:14px;background:#0e1115;color:#fff;border:1px solid #303641;border-radius:10px;padding:12px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.72);display:grid;place-items:center;z-index:50;padding:20px}.modal-card{width:min(620px,100%);background:#15191f;border:1px solid #303741;border-radius:18px;padding:22px}
@media(max-width:720px){.admin-subview,.admin-tabs{padding-left:20px;padding-right:20px}}

/* =========================================================
   MIXFLOW v0.7.0 — ARENA EDITION
   Visual-only redesign. No backend behavior changes.
   ========================================================= */

:root{
  --mf-bg:#08090b;
  --mf-bg-2:#0d0f12;
  --mf-panel:#111419;
  --mf-panel-2:#15191f;
  --mf-line:#272b31;
  --mf-line-soft:#1c2026;
  --mf-text:#f5f3ef;
  --mf-muted:#989a9f;
  --mf-sand:#dfc49b;
  --mf-sand-2:#c9a978;
  --mf-sand-soft:#f0ddbe;
  --mf-sand-deep:#8d6d43;
  --mf-danger:#d96b6b;
}

html,body{
  background:
    radial-gradient(circle at 78% 0%, rgba(223,196,155,.065), transparent 28%),
    linear-gradient(180deg,#08090b 0%,#0a0c0f 100%) !important;
  color:var(--mf-text) !important;
}

body{
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

aside,.sidebar{
  background:linear-gradient(180deg,#090a0c 0%,#0b0d10 100%) !important;
  border-right:1px solid var(--mf-line-soft) !important;
}

.brand{
  display:flex !important;
  align-items:center;
  gap:10px;
  position:relative;
  color:var(--mf-text) !important;
  font-weight:900 !important;
  letter-spacing:-.03em;
}
.brand-mark{
  display:inline-grid;
  place-items:center;
  width:38px;height:38px;
  border:1px solid rgba(223,196,155,.42);
  border-radius:10px;
  color:var(--mf-sand-soft);
  background:
    linear-gradient(145deg,rgba(223,196,155,.12),rgba(223,196,155,.02));
  box-shadow:inset 0 0 24px rgba(223,196,155,.05);
  font-size:15px;
  letter-spacing:-.05em;
}
.brand-name{font-size:20px}
.brand small{
  position:absolute;
  left:48px;
  top:25px;
  color:#777d84;
  font-size:8px;
  letter-spacing:.18em;
  font-weight:800;
}

button,.btn{
  transition:.18s ease !important;
}

.primary,
button.primary,
.cta,
.btn-primary{
  background:linear-gradient(180deg,var(--mf-sand-soft),var(--mf-sand)) !important;
  color:#17130e !important;
  border:1px solid #efd9b7 !important;
  box-shadow:0 5px 20px rgba(201,169,120,.11) !important;
  font-weight:900 !important;
}
.primary:hover,
button.primary:hover,
.cta:hover,
.btn-primary:hover{
  transform:translateY(-1px);
  filter:brightness(1.04);
  box-shadow:0 8px 24px rgba(201,169,120,.16) !important;
}

.secondary,.mini-action,.admin-tab{
  background:#13161a !important;
  border-color:#30343a !important;
  color:#d9d9d8 !important;
}
.secondary:hover,.mini-action:hover,.admin-tab:hover{
  border-color:rgba(223,196,155,.48) !important;
  color:var(--mf-sand-soft) !important;
}

.admin-tab.active,
[data-view].active,
.nav-item.active,
.tab.active,
.active-tab{
  background:linear-gradient(90deg,rgba(223,196,155,.17),rgba(223,196,155,.055)) !important;
  color:var(--mf-sand-soft) !important;
  border-color:rgba(223,196,155,.42) !important;
  box-shadow:inset 3px 0 0 var(--mf-sand) !important;
}

.panel,.card,.track-row,.membership-card,.config-box,.modal-card{
  background:linear-gradient(180deg,rgba(20,23,28,.97),rgba(15,18,22,.97)) !important;
  border-color:var(--mf-line) !important;
  box-shadow:0 12px 34px rgba(0,0,0,.18);
}

.panel:hover,.card:hover{
  border-color:#343940 !important;
}

input,select,textarea,.admin-search{
  background:#0d0f12 !important;
  border-color:#2d3137 !important;
  color:var(--mf-text) !important;
}
input:focus,select:focus,textarea:focus,.admin-search:focus{
  outline:none !important;
  border-color:rgba(223,196,155,.62) !important;
  box-shadow:0 0 0 3px rgba(223,196,155,.07) !important;
}

.eyebrow{
  color:var(--mf-sand) !important;
  letter-spacing:.13em !important;
}

.muted,small,.subtle{
  color:var(--mf-muted) !important;
}

.status-pill.active,
.badge-pro,.pro-badge,.membership-active{
  background:rgba(223,196,155,.15) !important;
  color:var(--mf-sand-soft) !important;
  border:1px solid rgba(223,196,155,.32) !important;
}
.status-pill.inactive{
  background:rgba(217,107,107,.10) !important;
  color:#eba2a2 !important;
}

a{
  color:var(--mf-sand) !important;
}
a:hover{color:var(--mf-sand-soft) !important}

.admin-table th{
  color:#8d9096 !important;
}
.admin-table tr{
  transition:.16s ease;
}
.admin-table tbody tr:hover{
  background:rgba(223,196,155,.035) !important;
}
.admin-table td{
  border-color:#22262b !important;
}

.danger{
  background:rgba(217,107,107,.08) !important;
  border-color:rgba(217,107,107,.24) !important;
  color:#e99a9a !important;
}

/* Player / preview accents */
audio{
  accent-color:var(--mf-sand);
}
input[type="range"]{
  accent-color:var(--mf-sand) !important;
}
.play-btn,.preview-btn,.player button.play,
button[data-action="play"]{
  border-color:rgba(223,196,155,.54) !important;
  color:#15110c !important;
  background:var(--mf-sand) !important;
}
.play-btn:hover,.preview-btn:hover{
  background:var(--mf-sand-soft) !important;
}

/* Favorito/selected states */
.favorite.active,.fav.active,.selected,.is-active{
  color:var(--mf-sand) !important;
}

/* Upload zone */
.dropzone,.upload-zone{
  border-color:#34383e !important;
  background:
    linear-gradient(180deg,rgba(223,196,155,.025),rgba(255,255,255,.005)) !important;
}
.dropzone:hover,.upload-zone:hover{
  border-color:rgba(223,196,155,.5) !important;
  background:rgba(223,196,155,.035) !important;
}

/* Scrollbars */
*{
  scrollbar-width:thin;
  scrollbar-color:#4c4438 #101216;
}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:#101216}
::-webkit-scrollbar-thumb{
  background:#4b4337;
  border-radius:10px;
  border:2px solid #101216;
}
::-webkit-scrollbar-thumb:hover{background:#685945}

/* Premium visual separators */
header,.topbar{
  border-bottom-color:#1f2328 !important;
}
hr{border-color:#24282d !important}

.brand-note{
  margin-top:12px;
  padding:10px 12px;
  border-radius:10px;
  background:rgba(223,196,155,.06);
  border:1px solid rgba(223,196,155,.14);
  color:#bea985;
  font-size:12px;
}

/* Better mobile balance */
@media(max-width:760px){
  .brand small{display:none}
  .brand-mark{width:34px;height:34px}
}

/* =========================================================
   MIXFLOW v0.7.1 — REAL HOME REDESIGN / ARENA
   ========================================================= */
.app{grid-template-columns:240px minmax(0,1fr) 315px}
.sidebar{padding:24px 18px}
.brand-v071{margin-bottom:34px;padding:0 6px}
.mf-logo{width:50px;height:45px;display:grid;place-items:center;font-weight:1000;font-size:22px;letter-spacing:-.12em;color:#17120c;background:linear-gradient(145deg,#f0d6ad,#c89f69);clip-path:polygon(0 0,100% 0,86% 30%,57% 30%,57% 100%,36% 100%,36% 30%,14% 30%,14% 100%,0 100%)}
.brand-v071 strong{font-size:18px;letter-spacing:.04em}.brand-v071 small{font-size:8px;letter-spacing:.16em;margin-top:4px}
.sidebar .nav{padding:13px 14px;font-weight:650;font-size:14px}
.sidebar .nav.active{background:linear-gradient(90deg,rgba(223,196,155,.16),rgba(223,196,155,.045));color:#f3dcc0;box-shadow:inset 3px 0 0 var(--mf-sand)}
main>header{padding:23px 28px 12px;border-bottom:1px solid #171a1e;margin-bottom:15px}
main>header .eyebrow{display:none} main>header h1{font-size:15px;color:#7f8389;font-weight:700}
.home-v071{padding:0 28px 38px!important}
.home-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:18px}
.home-top h2{font-size:27px;margin:5px 0 4px;letter-spacing:-.025em}.home-top h2 span{color:var(--mf-sand)}
.home-top>div>p:last-child{margin:0;color:#898d93}
.home-stats{display:flex;gap:8px}.home-stats div{min-width:72px;padding:10px 12px;border:1px solid #22262b;background:#0d0f12;border-radius:11px;text-align:center}.home-stats strong,.home-stats small{display:block}.home-stats strong{font-size:18px;color:#ead4b2}.home-stats small{font-size:9px;color:#70757c;margin-top:2px;text-transform:uppercase;letter-spacing:.08em}

.discovery-grid{display:grid;grid-template-columns:1fr 1fr 1fr .9fr;gap:12px;margin-bottom:27px}
.discovery-card{min-height:245px;border:1px solid #292a29;border-radius:15px;position:relative;overflow:hidden;background-size:cover;background-position:center;cursor:pointer}
.discovery-card.new-week{background-image:url('/assets/club_new.jpg')}.discovery-card.trending{background-image:url('/assets/club_trending.jpg')}.discovery-card.dj-edits{background-image:url('/assets/dj_edits.jpg')}
.card-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,7,7,.08),rgba(4,4,4,.42) 38%,rgba(4,4,4,.94))}
.discovery-card:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(225,192,145,.06),transparent 50%);opacity:0;transition:.2s}.discovery-card:hover:after{opacity:1}
.discovery-card:hover{transform:translateY(-2px);border-color:rgba(223,196,155,.42);transition:.2s}
.discovery-copy{position:absolute;left:19px;right:19px;bottom:17px;z-index:2}.discovery-copy span,.genre-head span{font-size:9px;letter-spacing:.11em;font-weight:900;color:#e4c796}.discovery-copy h3{font-size:27px;line-height:.96;margin:7px 0 9px;letter-spacing:-.035em}.discovery-copy p{font-size:12px;color:#c3c0ba;max-width:180px;margin:0 0 13px}.discovery-copy button{border:0;border-radius:8px;padding:8px 12px;background:#e5c89b;color:#18130e;font-weight:850;cursor:pointer}
.genre-card{border:1px solid #292c30;border-radius:15px;padding:15px;background:linear-gradient(180deg,#101215,#0d0f12)}
.genre-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}.genre-head button{font-size:10px;color:#d8d6d2;background:transparent;border:0;cursor:pointer}
.genre-card>button{width:100%;display:flex;justify-content:space-between;padding:8px 2px;border:0;background:transparent;color:#d0d1d2;font-size:11px;cursor:pointer;border-bottom:1px solid #191c20}.genre-card>button:hover{color:#e5c89b}.genre-card b{color:#777}

.catalog-heading{display:flex;justify-content:space-between;align-items:end;gap:18px;margin-bottom:10px}.catalog-heading h2{margin:3px 0;font-size:23px}.catalog-tools{display:grid;grid-template-columns:minmax(210px,1fr) 145px 100px;gap:7px}.catalog-tools input,.catalog-tools select{padding:10px 11px!important;font-size:11px}
.genre-chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px}.genre-chips button{padding:8px 12px;border:1px solid #20242a;border-radius:9px;background:#111419;color:#aaaeb4;font-size:10px;cursor:pointer}.genre-chips button:hover,.genre-chips button.active{background:#e3c79d!important;color:#17120d!important;border-color:#e3c79d!important;box-shadow:none!important}
.premium-table{border-color:#20242a;background:#0a0c0e}.premium-table .row{grid-template-columns:minmax(390px,2.5fr) 1fr 62px 62px 72px 82px;padding:10px 12px}.track-premium{min-height:67px}.track-premium:hover{background:rgba(223,196,155,.028)!important}.track-premium .track{min-width:0;display:grid;grid-template-columns:46px 34px minmax(155px,1.1fr) minmax(100px,.8fr);gap:10px}.cover-art{width:46px;height:46px;background-size:cover;background-position:center;border-radius:7px;box-shadow:0 5px 16px rgba(0,0,0,.28)}.round-play{width:32px;height:32px;border-radius:50%;align-self:center;border:1px solid #d2b17e;background:#0e1013;color:#e1c292;cursor:pointer}.round-play:hover{background:#e1c292;color:#111}.track-copy{min-width:0;align-self:center}.track-copy strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-copy small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fake-wave{display:flex;align-items:center;gap:2px;height:28px;align-self:center;opacity:.9}.fake-wave i{display:block;width:2px;background:#6c665d;border-radius:2px}.fake-wave i:nth-child(1){height:7px}.fake-wave i:nth-child(2){height:14px}.fake-wave i:nth-child(3){height:20px;background:#d6b47e}.fake-wave i:nth-child(4){height:11px}.fake-wave i:nth-child(5){height:24px;background:#d6b47e}.fake-wave i:nth-child(6){height:16px}.fake-wave i:nth-child(7){height:27px;background:#d6b47e}.fake-wave i:nth-child(8){height:12px}.fake-wave i:nth-child(9){height:21px;background:#caa975}.fake-wave i:nth-child(10){height:8px}.fake-wave i:nth-child(11){height:18px}.fake-wave i:nth-child(12){height:25px}.fake-wave i:nth-child(13){height:12px}.fake-wave i:nth-child(14){height:6px}
.file-badge{background:rgba(223,196,155,.12)!important;color:#d9bd91!important;margin-left:7px}.empty-state{padding:35px;text-align:center;color:#777d84}
.right{padding:18px;background:#090b0d!important}.right .player{padding:18px;border-radius:15px}.right .cover{height:180px;background-size:cover;background-position:center;border-radius:11px;margin:11px 0 14px}.right .player>strong{font-size:17px}.right .player .primary{margin-top:4px}.pro-rail{border-radius:15px;padding:20px}.pro-rail h3{font-size:18px;margin:7px 0}.pro-rail .secondary{width:100%;margin-top:7px}
.pro{background:linear-gradient(180deg,rgba(223,196,155,.06),#111419);border-color:rgba(223,196,155,.18)}.pro span{background:#ddc092;color:#18120d}.avatar{background:#d7b783!important}
@media(max-width:1250px){.app{grid-template-columns:220px minmax(0,1fr)}.right{display:none}.discovery-grid{grid-template-columns:repeat(3,1fr)}.genre-card{display:none}}
@media(max-width:920px){.discovery-grid{grid-template-columns:1fr 1fr}.home-stats{display:none}.catalog-heading{display:block}.catalog-tools{margin-top:10px}.premium-table .row{grid-template-columns:minmax(300px,1fr) 75px 80px}.premium-table .row>div:nth-child(2),.premium-table .row>div:nth-child(4),.premium-table .row>div:nth-child(5){display:none}}
@media(max-width:680px){.discovery-grid{grid-template-columns:1fr}.discovery-card{min-height:215px}.catalog-tools{grid-template-columns:1fr}.track-premium .track{grid-template-columns:42px 30px 1fr}.fake-wave{display:none}}

/* =========================================================
   MIXFLOW v0.7.2 — LOGO / HEADER POLISH
   ========================================================= */
.brand-v071{display:none!important}
.brand-v072{
  display:flex!important;
  align-items:center;
  gap:12px;
  margin:2px 0 32px;
  padding:0 8px;
  min-height:58px;
}
.mf-logo-wrap{
  width:58px;
  height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.mf-logo-svg{
  width:58px;
  height:auto;
  display:block;
  fill:#e4c79a;
  shape-rendering:geometricPrecision;
  filter:none!important;
}
.brand-copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1;
  min-width:0;
}
.brand-copy strong{
  color:#f7f4ef;
  font-size:18px;
  font-weight:900;
  letter-spacing:.065em;
  line-height:1;
  white-space:nowrap;
}
.brand-copy small{
  position:static!important;
  margin-top:6px;
  color:#7f8388!important;
  font-size:8px!important;
  font-weight:800!important;
  letter-spacing:.17em!important;
  line-height:1!important;
  white-space:nowrap;
}

/* cleaner sidebar top spacing */
.sidebar{
  padding-top:18px!important;
}
.sidebar .nav:first-of-type{
  margin-top:2px;
}

/* subtle premium header polish */
main>header{
  background:linear-gradient(180deg,rgba(10,11,13,.96),rgba(10,11,13,.78))!important;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
main>header h1{
  color:#9a9da2!important;
  letter-spacing:.01em;
}

/* sharper panel edges */
.panel,.card,.genre-card,.discovery-card,.right .player,.pro-rail{
  border-color:#25292e!important;
}

/* MixFlow v0.8.0 */
.clickable{cursor:pointer}.clickable:hover strong{color:#e4c79a}
.workspace-view{padding:8px 28px 38px}.view-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:20px}.view-head h2{margin:4px 0;font-size:27px}.view-head p{margin:0;color:#8d9197}.view-head.compact{align-items:center}.view-head.compact>div{display:flex;align-items:center;gap:12px}
.crates-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}.crate-card{text-align:left;padding:20px;border-radius:15px;border:1px solid #272b30;background:linear-gradient(155deg,rgba(223,196,155,.055),#111419 42%);color:#f5f3ef;cursor:pointer;min-height:150px;transition:.18s}.crate-card:hover{transform:translateY(-2px);border-color:rgba(223,196,155,.4)}.crate-icon{font-size:26px;color:#dfc49b;margin-bottom:18px}.crate-card strong,.crate-card span,.crate-card small{display:block}.crate-card strong{font-size:17px}.crate-card span{margin-top:7px;color:#c0b29e;font-size:12px}.crate-card small{margin-top:4px;font-size:10px;color:#73787f}.crate-empty{grid-column:1/-1;border:1px dashed #292e34;border-radius:15px}
.track-detail-card{width:min(760px,96vw)}.track-detail-layout{display:grid;grid-template-columns:245px 1fr;gap:24px;margin-top:12px}.detail-cover{aspect-ratio:1;border-radius:15px;background:#111 center/cover no-repeat;box-shadow:0 16px 40px rgba(0,0,0,.28)}.detail-info h3{font-size:22px;margin:5px 0}.detail-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:18px}.detail-meta div{padding:11px 12px;background:#0d0f12;border:1px solid #25292e;border-radius:10px}.detail-meta span,.detail-meta strong{display:block}.detail-meta span{font-size:9px;text-transform:uppercase;letter-spacing:.09em;color:#73777d}.detail-meta strong{font-size:14px;margin-top:4px}.detail-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.detail-actions button{min-height:40px}
.crate-picker-card{width:min(520px,95vw)}.crate-picker-list{display:grid;gap:7px;margin:12px 0 16px;max-height:320px;overflow:auto}.crate-picker-list>button{display:grid;grid-template-columns:32px 1fr 26px;align-items:center;gap:9px;text-align:left;padding:11px;border:1px solid #262b30;background:#101317;color:#f4f1ed;border-radius:10px;cursor:pointer}.crate-picker-list strong,.crate-picker-list small{display:block}.crate-picker-list small{font-size:10px}.inline-create-crate{display:grid;grid-template-columns:1fr auto;gap:8px}.small-modal{width:min(440px,95vw)}.small-modal input{width:100%;margin:10px 0}.full{width:100%}
@media(max-width:720px){.track-detail-layout{grid-template-columns:1fr}.detail-cover{max-width:260px;margin:auto}.detail-actions{grid-template-columns:1fr}.view-head{align-items:flex-start;flex-direction:column}.inline-create-crate{grid-template-columns:1fr}}

.compact-tools{grid-template-columns:minmax(220px,1fr) 180px!important}
.history-summary{display:flex;gap:10px;margin:-5px 0 15px}.history-summary>div{padding:12px 15px;border:1px solid #25292e;border-radius:12px;background:#0e1114;min-width:150px}.history-summary strong,.history-summary span{display:block}.history-summary strong{font-size:21px;color:#e2c79e}.history-summary span{font-size:10px;color:#7b8086;margin-top:4px;text-transform:uppercase;letter-spacing:.07em}
.history-table .row{grid-template-columns:minmax(390px,2.5fr) 1fr 62px 62px 128px 82px}
.analytics-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin-bottom:14px}.analytics-kpis>div{padding:16px;border-radius:13px;border:1px solid #262b30;background:linear-gradient(180deg,#13161a,#0e1114)}.analytics-kpis span,.analytics-kpis strong{display:block}.analytics-kpis span{font-size:9px;text-transform:uppercase;letter-spacing:.09em;color:#777c82}.analytics-kpis strong{font-size:24px;color:#e1c49a;margin-top:6px}
.analytics-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}.analytics-list>div{display:grid;grid-template-columns:28px 1fr auto;gap:9px;align-items:center;padding:10px 0;border-bottom:1px solid #22262b}.analytics-list b{color:#bfa276}.analytics-list span strong,.analytics-list span small{display:block}.analytics-list span strong{font-size:12px}.analytics-list span small{font-size:10px;color:#777d84;margin-top:3px}.analytics-list em{font-style:normal;color:#d7bb90;font-size:12px}.analytics-feed>div{display:grid;grid-template-columns:160px 1fr 150px;gap:10px;padding:9px 0;border-bottom:1px solid #22262b;font-size:12px}
@media(max-width:1100px){.analytics-kpis{grid-template-columns:repeat(3,1fr)}}@media(max-width:800px){.analytics-grid{grid-template-columns:1fr}.compact-tools{grid-template-columns:1fr!important}}

/* MixFlow v0.9.1 — carga por género + carpeta */
.upload-organize{margin:16px 0;padding:16px;border:1px solid rgba(223,196,155,.22);border-radius:14px;background:linear-gradient(145deg,rgba(223,196,155,.055),rgba(255,255,255,.01))}
.organize-title{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:13px}.organize-title strong,.organize-title span{display:block}.organize-title strong{font-size:15px;margin-top:4px}.organize-title small{max-width:300px;text-align:right;color:#7f848b;font-size:10px}
.organize-grid{grid-template-columns:1fr 1fr!important}.field-wrap label{display:block;font-size:10px;color:#b9a17c;text-transform:uppercase;letter-spacing:.08em;margin:0 0 6px 2px}.field-wrap input{width:100%}
.organize-help{font-size:11px;color:#858a91;margin:11px 2px 0;line-height:1.5}.organize-help b{color:#dec398}
.advanced-upload{margin:8px 0 14px;border:1px solid #24282e;border-radius:11px;background:#0e1114}.advanced-upload summary{padding:11px 13px;cursor:pointer;color:#9a9ea4;font-size:11px}.advanced-upload[open] summary{border-bottom:1px solid #24282e}.advanced-upload .form-grid{padding:12px}
@media(max-width:720px){.organize-grid{grid-template-columns:1fr!important}.organize-title{align-items:flex-start;flex-direction:column}.organize-title small{text-align:left}}

/* =========================================================
   MIXFLOW v0.9.2 — CARPETAS EN LISTA
   ========================================================= */
.folders-view{padding-top:10px}
.folders-head{align-items:center;margin-bottom:24px}
.folders-head h2{font-size:25px!important;letter-spacing:-.025em}
.folders-head p{font-size:12px;line-height:1.45;max-width:650px}
.folders-head .primary{padding:12px 18px!important;font-size:12px!important;border-radius:10px!important}

.folders-list-wrap{width:100%}
.folders-list-head{
  display:grid;
  grid-template-columns:minmax(260px,1.7fr) 150px 190px 60px;
  gap:14px;
  padding:0 18px 9px;
  color:#7c8188;
  font-size:9px;
  letter-spacing:.075em;
  font-weight:800;
}
.folders-list{display:grid;gap:6px}
.folder-row{
  display:grid;
  grid-template-columns:minmax(260px,1.7fr) 150px 190px 60px;
  gap:14px;
  align-items:center;
  min-height:58px;
  padding:0 16px;
  border:1px solid #252a30;
  border-radius:11px;
  background:linear-gradient(180deg,#13171b,#101317);
  cursor:pointer;
  transition:.16s ease;
}
.folder-row:hover{
  border-color:rgba(223,196,155,.34);
  background:linear-gradient(180deg,rgba(223,196,155,.045),#111419);
  transform:translateX(1px);
}
.folder-name{display:flex;align-items:center;gap:13px;min-width:0}
.folder-name strong{
  font-size:13px;
  font-weight:750;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.folder-icon{
  width:28px;height:23px;
  display:grid;place-items:center;
  color:#e4c79a;
  font-size:19px;
  line-height:1;
}
.folder-count,.folder-date{
  color:#a0a4aa;
  font-size:11px;
}
.folder-actions{display:flex;justify-content:flex-end;align-items:center;gap:12px}
.folder-more{
  border:0;background:transparent;color:#8c9197;
  font-size:19px;line-height:1;cursor:pointer;padding:6px
}
.folder-more:hover{color:#e2c49a}
.folder-arrow{color:#9da2a8;font-size:25px;font-weight:300}

.crate-empty{
  padding:32px!important;
  border:1px dashed #2c3137!important;
  border-radius:12px;
  text-align:center;
}

/* Slight typography reduction for a more professional density */
.sidebar .nav{font-size:13px!important}
main>header h1{font-size:13px!important}
.view-head h2{font-size:24px}
.view-head p{font-size:12px}
.pro h3,.pro-rail h3{font-size:16px!important}
.right .player>strong{font-size:15px!important}

@media(max-width:900px){
  .folders-list-head{grid-template-columns:1fr 100px 46px}
  .folders-list-head>div:nth-child(3){display:none}
  .folder-row{grid-template-columns:1fr 100px 46px}
  .folder-date{display:none}
}
@media(max-width:650px){
  .folders-head{align-items:flex-start}
  .folders-list-head{grid-template-columns:1fr 75px 36px}
  .folder-row{grid-template-columns:1fr 75px 36px;padding:0 10px}
  .folder-name strong{font-size:12px}
  .folder-count{font-size:10px}
}

/* =========================================================
   MIXFLOW v0.9.3 — OFFICIAL ARTWORK
   ========================================================= */
.cover-art,
.detail-cover,
.right .cover{
  background-image:url('/assets/mixflow_official_cover.jpg')!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}
.cover-art{box-shadow:0 5px 18px rgba(0,0,0,.32),0 0 0 1px rgba(223,196,155,.12)}
.detail-cover{box-shadow:0 18px 45px rgba(0,0,0,.35),0 0 0 1px rgba(223,196,155,.16)}

/* =========================================================
   MIXFLOW v0.9.4 — FIX ACCIONES / DESCARGAS VISIBLES
   ========================================================= */

/* The old grid was wider than the center column on laptop screens.
   This one keeps every action inside the table. */
.premium-table .row{
  grid-template-columns:minmax(270px,1.7fr) minmax(78px,.72fr) 48px 54px 58px 132px!important;
  column-gap:8px!important;
  padding-left:10px!important;
  padding-right:10px!important;
  overflow:hidden;
}
.track-premium .track{
  grid-template-columns:38px 30px minmax(105px,1fr) minmax(55px,72px)!important;
  gap:8px!important;
  overflow:hidden;
}
.cover-art{width:38px!important;height:38px!important}
.round-play{width:29px!important;height:29px!important;font-size:11px!important}
.fake-wave{min-width:0!important;overflow:hidden!important}
.track-copy{overflow:hidden!important}
.track-copy strong,.track-copy small{max-width:100%!important}

.track-actions,
.folder-track-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:5px!important;
  min-width:0!important;
  overflow:visible!important;
}
.track-actions .icon,
.download-action{
  width:31px!important;
  min-width:31px!important;
  height:31px!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  border-radius:8px!important;
  border:1px solid #353b43!important;
  background:#151a20!important;
  color:#f0f1f2!important;
  cursor:pointer!important;
  font-size:17px!important;
  line-height:1!important;
}
.download-action{
  border-color:rgba(223,196,155,.55)!important;
  color:#e4c79a!important;
  background:rgba(223,196,155,.07)!important;
  font-weight:900!important;
}
.download-action:hover{
  background:#e4c79a!important;
  color:#17120d!important;
}
.download-action.no-file,
.download-action:disabled{
  opacity:.28!important;
  cursor:not-allowed!important;
}
.folder-track-actions{
  width:100%!important;
}
.remove-track-btn{
  min-width:62px!important;
  padding:8px 9px!important;
  white-space:nowrap!important;
  font-size:11px!important;
}

/* Header last column needs room for actions too. */
.premium-table .row.head>div:last-child{
  min-width:120px;
}

/* At narrower laptop widths, preserve actions and hide less-critical columns first. */
@media(max-width:1180px){
  .premium-table .row{
    grid-template-columns:minmax(260px,1fr) 82px 48px 54px 132px!important;
  }
  .premium-table .row>div:nth-child(5){display:none!important}
}
@media(max-width:920px){
  .premium-table .row{
    grid-template-columns:minmax(245px,1fr) 72px 132px!important;
  }
  .premium-table .row>div:nth-child(2),
  .premium-table .row>div:nth-child(4),
  .premium-table .row>div:nth-child(5){display:none!important}
  .track-premium .track{
    grid-template-columns:36px 28px minmax(100px,1fr)!important;
  }
  .fake-wave{display:none!important}
}

/* =========================================================
   MIXFLOW v0.9.5 — TRACK TITLE PRIORITY
   ========================================================= */

/* Give track information much more room */
.premium-table .row{
  grid-template-columns:minmax(360px,2.4fr) minmax(78px,.65fr) 42px 46px 54px 110px!important;
  column-gap:8px!important;
}

/* Track internal layout: cover + play + text, waveform gives way first */
.track-premium .track{
  grid-template-columns:38px 30px minmax(190px,1fr) minmax(42px,58px)!important;
  gap:8px!important;
  align-items:center!important;
}

/* Two-line title instead of early ellipsis */
.track-copy{
  min-width:0!important;
  overflow:visible!important;
}
.track-copy strong{
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
  white-space:normal!important;
  text-overflow:clip!important;
  line-height:1.14!important;
  max-height:2.28em!important;
  font-size:13px!important;
  font-weight:760!important;
}
.track-copy small{
  display:block!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  margin-top:3px!important;
  font-size:10px!important;
  color:#93979d!important;
}

/* Compact less important metadata */
.premium-table .row>div:nth-child(2),
.premium-table .row>div:nth-child(3),
.premium-table .row>div:nth-child(4),
.premium-table .row>div:nth-child(5){
  font-size:11px!important;
}
.premium-table .row.head>div{
  font-size:8.5px!important;
  letter-spacing:.08em!important;
}

/* Energy needs the least width */
.premium-table .row>div:nth-child(5){
  text-align:center!important;
}

/* If the center area gets narrower, sacrifice waveform before title */
@media(max-width:1180px){
  .premium-table .row{
    grid-template-columns:minmax(340px,1.8fr) 78px 42px 46px 110px!important;
  }
  .premium-table .row>div:nth-child(5){display:none!important}
  .track-premium .track{
    grid-template-columns:38px 30px minmax(180px,1fr) 46px!important;
  }
}
@media(max-width:980px){
  .premium-table .row{
    grid-template-columns:minmax(320px,1fr) 70px 110px!important;
  }
  .premium-table .row>div:nth-child(2),
  .premium-table .row>div:nth-child(4),
  .premium-table .row>div:nth-child(5){display:none!important}
  .track-premium .track{
    grid-template-columns:38px 30px minmax(190px,1fr)!important;
  }
  .fake-wave{display:none!important}
}

/* Browser tooltip from title attribute will show full name on hover */

/* =========================================================
   MIXFLOW v1.0 — CLOUDFLARE R2
   ========================================================= */
.cloud-panel{max-width:1000px}
.cloud-status-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:18px 0}
.cloud-status-grid>div{padding:14px;border:1px solid #292e34;border-radius:12px;background:#0e1114}
.cloud-status-grid span,.cloud-status-grid strong{display:block}
.cloud-status-grid span{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#777d84}
.cloud-status-grid strong{margin-top:6px;font-size:15px;color:#e4c79a}
.cloud-ok{color:#b9dba9!important}.cloud-bad{color:#e49b9b!important}
.cloud-notice{margin:12px 0;padding:12px 14px;border-radius:10px;border:1px solid rgba(223,196,155,.16);background:rgba(223,196,155,.045);font-size:12px;color:#b8b3aa}
.cloud-help{max-width:760px;line-height:1.5;margin-top:12px}
@media(max-width:800px){.cloud-status-grid{grid-template-columns:1fr 1fr}}

/* =========================================================
   MIXFLOW v1.0.3 — UI CLEANUP / ANTI TRANSLATION / RESPONSIVE
   ========================================================= */

/* Keep product terminology intact. Browser translators were changing
   MIXFLOW, Carpetas, BPM and musical keys into unrelated words. */
.notranslate,
[translate="no"]{
  unicode-bidi:plaintext;
}

/* Password visibility control */
.password-field{
  position:relative;
  width:100%;
}
.password-field input{
  width:100%!important;
  padding-right:48px!important;
  margin-bottom:0!important;
}
.password-toggle{
  position:absolute;
  right:7px;
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:0;
  background:transparent;
  color:#c8c2b8;
  cursor:pointer;
  border-radius:8px;
  font-size:16px;
  padding:0;
}
.password-toggle:hover{background:rgba(223,196,155,.09)}
#loginForm .password-field,
#registerForm .password-field{margin-bottom:12px}

/* Sidebar brand must never clip */
.brand-v072{
  width:100%;
  max-width:100%;
  overflow:hidden;
}
.brand-copy{max-width:calc(100% - 70px)}
.brand-copy strong,
.brand-copy small{
  overflow:hidden;
  text-overflow:clip;
}
.brand-copy strong{font-size:17px!important;letter-spacing:.055em!important}

/* Track table: readable metadata and fixed headers */
.premium-table .row{
  grid-template-columns:minmax(300px,2fr) minmax(108px,.78fr) 58px 64px 58px 116px!important;
  column-gap:10px!important;
  overflow:visible!important;
}
.premium-table .row.head>div{
  white-space:nowrap!important;
  line-height:1!important;
  overflow:visible!important;
  word-break:normal!important;
  hyphens:none!important;
}
.premium-table .row>div:nth-child(2),
.premium-table .row>div:nth-child(3),
.premium-table .row>div:nth-child(4),
.premium-table .row>div:nth-child(5){
  min-width:0;
  word-break:normal!important;
  overflow-wrap:normal!important;
}
.premium-table .row>div:nth-child(3),
.premium-table .row>div:nth-child(4),
.premium-table .row>div:nth-child(5){white-space:nowrap!important}
.premium-table .row.head>div:nth-child(3),
.premium-table .row.head>div:nth-child(4),
.premium-table .row.head>div:nth-child(5){text-align:left!important}

/* Price + currency must stay inside the membership panel */
#priceForm{width:100%;max-width:100%;overflow:hidden}
#priceForm .form-grid{
  grid-template-columns:minmax(0,1fr) 86px!important;
  width:100%;
  max-width:100%;
  gap:8px!important;
}
#priceForm .form-grid input,
#priceForm .form-grid select{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
}
#priceForm #currency{padding-left:10px!important;padding-right:26px!important}
.admin-layout>.panel{min-width:0;overflow:hidden}

/* Better behavior on laptop-size windows */
@media(max-width:1250px){
  .brand-copy strong{font-size:15.5px!important;letter-spacing:.04em!important}
  .mf-logo-wrap,.mf-logo-svg{width:50px!important}
  .brand-v072{gap:9px!important;padding-left:2px!important;padding-right:2px!important}
  .premium-table .row{
    grid-template-columns:minmax(280px,1.8fr) minmax(96px,.72fr) 54px 60px 112px!important;
  }
  .premium-table .row>div:nth-child(5){display:none!important}
}
@media(max-width:1050px){
  #priceForm .form-grid{grid-template-columns:minmax(0,1fr) 78px!important}
}
@media(max-width:980px){
  .premium-table .row{
    grid-template-columns:minmax(270px,1fr) 58px 112px!important;
  }
  .premium-table .row>div:nth-child(2),
  .premium-table .row>div:nth-child(4),
  .premium-table .row>div:nth-child(5){display:none!important}
}
@media(max-width:1000px){
  #priceForm .form-grid{grid-template-columns:minmax(0,1fr) 90px!important}
}


/* =========================================================
   MIXFLOW v1.0.4 — HOME / TABLE / PLAYER POLISH
   ========================================================= */

/* Brand credit remains visible without crowding the sidebar. */
.brand-copy .brand-by{
  display:block!important;
  margin-top:2px!important;
  color:#bfa57d!important;
  font-size:7px!important;
  letter-spacing:.14em!important;
  white-space:nowrap!important;
}

/* Welcome block: calmer hierarchy. */
.home-top{align-items:center!important;margin-bottom:16px!important}
.home-top h2{
  font-size:23px!important;
  line-height:1.08!important;
  margin:4px 0 5px!important;
  letter-spacing:-.02em!important;
}
.home-top>div>p:last-child{
  max-width:520px!important;
  font-size:13px!important;
  line-height:1.35!important;
  color:#858a91!important;
}

/* Genres are generated from the real catalog, never from demo categories. */
.genre-list{display:grid}
.genre-list>button{
  width:100%;display:flex;justify-content:space-between;align-items:center;
  padding:8px 2px;border:0;background:transparent;color:#d0d1d2;
  font-size:11px;cursor:pointer;border-bottom:1px solid #191c20;text-align:left;
}
.genre-list>button:hover{color:#e5c89b}
.genre-list b{color:#777}
.genre-empty{margin:10px 0 2px;color:#777d84;font-size:10px;line-height:1.4}

/* Give the center content more space on common laptop widths. */
.app{grid-template-columns:220px minmax(0,1fr) 280px!important}
.sidebar{padding-left:16px!important;padding-right:16px!important}
.right{padding:14px!important}

/* Full square player artwork: no cropped bottom edge. */
.right .cover{
  width:100%!important;
  height:auto!important;
  aspect-ratio:1 / 1!important;
  background-size:contain!important;
  background-position:center!important;
  background-color:#090b0d!important;
}

/* Catalog table: reserve the action column first, then metadata. */
.premium-table{overflow:hidden!important}
.premium-table .row{
  grid-template-columns:minmax(250px,1.75fr) minmax(115px,.85fr) 48px 52px 52px 102px!important;
  column-gap:7px!important;
  padding:9px 9px!important;
  width:100%!important;
}
.premium-table .row.head>div:last-child{min-width:96px!important}
.track-premium .track{
  grid-template-columns:36px 28px minmax(135px,1fr) minmax(36px,52px)!important;
  gap:7px!important;
}
.track-actions{gap:4px!important;min-width:96px!important}
.track-actions .icon,.download-action{
  width:29px!important;min-width:29px!important;height:29px!important;
}
.download-action{font-size:16px!important}

/* Keep metadata and headers readable instead of clipping. */
.premium-table .row.head>div{font-size:8px!important;letter-spacing:.07em!important}
.premium-table .row>div:nth-child(2){line-height:1.15!important}
.premium-table .row>div:nth-child(3),
.premium-table .row>div:nth-child(4),
.premium-table .row>div:nth-child(5){text-align:left!important}

/* On narrower windows, hide Energy first but never the download action. */
@media(max-width:1380px){
  .app{grid-template-columns:210px minmax(0,1fr) 260px!important}
  .home-top h2{font-size:22px!important}
  .premium-table .row{
    grid-template-columns:minmax(235px,1.6fr) minmax(105px,.8fr) 46px 50px 100px!important;
  }
  .premium-table .row>div:nth-child(5){display:none!important}
}
@media(max-width:1180px){
  .app{grid-template-columns:210px minmax(0,1fr)!important}
  .right{display:none!important}
  .premium-table .row{
    grid-template-columns:minmax(260px,1.8fr) minmax(110px,.8fr) 48px 52px 100px!important;
  }
  .premium-table .row>div:nth-child(5){display:none!important}
}
@media(max-width:920px){
  .premium-table .row{
    grid-template-columns:minmax(245px,1fr) 48px 100px!important;
  }
  .premium-table .row>div:nth-child(2),
  .premium-table .row>div:nth-child(4),
  .premium-table .row>div:nth-child(5){display:none!important}
}


/* =========================================================
   MIXFLOW v1.0.7 — UI CLEANUP / FAVORITES / REAL FOLDERS
   ========================================================= */

/* Admin price: enough room for native select arrow + 3-letter currency. */
#priceForm{overflow:visible!important}
#priceForm .form-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 104px!important;
  gap:10px!important;
  align-items:stretch!important;
}
#priceForm #currency{
  min-width:104px!important;
  width:104px!important;
  padding:0 32px 0 14px!important;
  box-sizing:border-box!important;
}
@media(max-width:1100px){
  #priceForm .form-grid{grid-template-columns:minmax(0,1fr) 100px!important}
  #priceForm #currency{min-width:100px!important;width:100px!important}
}

/* Folder detail actions: favorite + download + remove stay visible. */
.folder-track-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:6px!important;
  min-width:150px!important;
  white-space:nowrap!important;
}
.folder-track-actions .icon,
.folder-track-actions .download-action{flex:0 0 auto!important}
.folder-track-actions .remove-track-btn{flex:0 0 auto!important}

/* Quieter home discovery area: fewer words, more breathing room. */
.discovery-grid{gap:14px!important}
.discovery-card{min-height:190px!important}
.discovery-copy{left:18px!important;right:18px!important;bottom:18px!important}
.discovery-copy h3{
  font-size:24px!important;
  line-height:1.02!important;
  margin:0 0 14px!important;
  max-width:170px!important;
}
.discovery-copy p,.discovery-copy>span{display:none!important}
.discovery-copy button{padding:8px 12px!important;font-size:12px!important}
.genre-card{padding:14px!important}
.genre-head{margin-bottom:6px!important}
.genre-list>button{padding:7px 2px!important;font-size:10.5px!important}

/* Don't let actions disappear from catalog rows. */
.track-actions{display:flex!important;visibility:visible!important;overflow:visible!important}
.track-actions .icon,.track-actions .download-action{display:inline-grid!important;place-items:center!important}


/* =========================================================
   MIXFLOW v1.0.8 — FOLDER ACTIONS + CREATION ORDER
   ========================================================= */
/* Folder detail: keep Favorite + Download + Quitar fully visible.
   Energy is hidden only in this detail view to protect the action column. */
#crateTracks .row{
  grid-template-columns:minmax(280px,1.45fr) minmax(120px,.72fr) 48px 48px 172px!important;
  column-gap:8px!important;
  overflow:hidden!important;
}
#crateTracks .row>div:nth-child(5){display:none!important}
#crateTracks .folder-track-actions{
  min-width:172px!important;
  width:172px!important;
  justify-content:flex-end!important;
  gap:6px!important;
  overflow:visible!important;
}
#crateTracks .remove-track-btn{
  min-width:68px!important;
  padding:8px 10px!important;
}
@media(max-width:1180px){
  #crateTracks .row{
    grid-template-columns:minmax(240px,1fr) minmax(105px,.62fr) 44px 44px 166px!important;
  }
  #crateTracks .folder-track-actions{min-width:166px!important;width:166px!important}
}

/* v1.1.0 — history cleanup + stable action columns */
.history-table .track-actions{display:grid;grid-template-columns:36px 36px 36px;gap:8px;justify-content:end;min-width:116px}
.history-remove{width:36px;height:36px;border-radius:10px;border:1px solid #5a3a3a;background:#211414;color:#e8a0a0;font-size:22px;line-height:1;cursor:pointer}
.history-remove:hover{background:#321b1b}
.downloads-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.downloads-tools input{min-width:220px}
.folder-track-actions{grid-template-columns:40px 40px!important;min-width:96px!important}

.trial-offer{margin-top:18px;padding-top:18px;border-top:1px solid #2a3038}.trial-line{display:flex;align-items:baseline;gap:10px;margin:6px 0 8px}.trial-line strong{font-size:28px;color:#efd09a}.trial-line span{font-size:13px;color:#9aa2ad;font-weight:800}.trial-offer .secondary{margin-right:8px;margin-top:8px}