/* Soundspace visual system. Native CSS keeps the existing account, pagination,
   dialog and request lifecycle intact; no animation or component dependency. */
:root {
  --bg:#f3f5f5;--surface:#fff;--surface-soft:#eaf0f2;--ink:#252c30;
  --muted:#65727a;--subtle:#75828a;--line:#dfe5e7;--accent:#376a80;
  --accent-soft:#e4eef2;--radius:18px;--sidebar:#fafbfb;--hover:#f4f8f9;
  --hero:#e5ecef;--hero-ink:#273941;--hero-muted:#5e757f;
  --shadow:0 12px 40px #182e3808;
  --scroll-thumb:#a0adb4;--scroll-thumb-hover:#708995;
}
[data-theme=dark] {
  --bg:#111315;--surface:#1a1d20;--surface-soft:#22272b;--ink:#eef0f0;
  --muted:#a4adb3;--subtle:#858f97;--line:#2b3136;--accent:#a8cddd;
  --accent-soft:#24323a;--good:#a5c5bb;--good-soft:#25322e;
  --danger:#daa9af;--danger-soft:#34292c;--sidebar:#151719;--hover:#20262a;
  --hero:#1d2429;--hero-ink:#eff3f4;--hero-muted:#a4b4be;
  --shadow:0 12px 40px #00000016;
  --scroll-thumb:#52616b;--scroll-thumb-hover:#819ba8;
}
/* Native scrollbars preserve wheel, keyboard and drag behavior without a JS layer. */
@media(min-width:768px) and (hover:hover) and (pointer:fine) and (forced-colors:none){
  html{scrollbar-gutter:stable}
  ::-webkit-scrollbar{width:12px;height:12px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:var(--scroll-thumb);background-clip:padding-box;border:3px solid transparent;border-radius:999px;min-height:36px}
  ::-webkit-scrollbar-thumb:hover{background-color:var(--scroll-thumb-hover)}
  ::-webkit-scrollbar-thumb:active{background-color:var(--accent)}
  ::-webkit-scrollbar-button{display:none;width:0;height:0}
  ::-webkit-scrollbar-corner{background:transparent}
  @supports not selector(::-webkit-scrollbar){
    html,*{scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) transparent}
  }
}
body{font-family:Inter,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;line-height:1.65;letter-spacing:.1px}
::selection{background:#8fbace55;color:var(--ink)}
button,a,input,summary{transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.sidebar{width:232px;padding:34px 20px 22px;background:var(--sidebar);border-color:var(--line)}
.brand{gap:12px;padding:0 12px;font-size:20px;letter-spacing:1px}
.brand img{width:37px;height:37px;border-radius:11px}
.brand small{font-size:9px;letter-spacing:3.3px;margin-top:2px;color:var(--subtle)}
.nav-label{display:flex;align-items:center;justify-content:space-between;margin:52px 14px 18px;font-size:11px;letter-spacing:1px;color:var(--subtle)}
.nav-label>span{font-size:8px;letter-spacing:1.1px;opacity:.7}
.main-nav{gap:7px}
.main-nav a{position:relative;min-height:49px;padding:13px 15px;border:1px solid transparent;border-radius:10px;font-size:13px;font-weight:500;gap:13px}
.main-nav a>.icon{width:19px;height:19px;stroke-width:1.5}
.main-nav a[aria-current=page]{background:linear-gradient(95deg,var(--accent-soft),transparent 150%);border-color:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);font-weight:600}
.main-nav a[aria-current=page]:after{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);margin-left:auto}
.sidebar-bottom{padding-top:35px}
.sidebar-note{padding:22px 14px 25px;margin-bottom:15px;border-bottom:1px solid var(--line)}
.sidebar-note strong{display:block;font-size:12px;font-weight:500;margin:16px 0 8px;color:var(--muted)}
.sidebar-note>span{font-size:10px;color:var(--subtle);line-height:1.8}
.sound-bars{display:flex;align-items:center;gap:4px;height:27px;color:var(--accent);opacity:.7}
.sound-bars i{height:11px;width:3px;border-radius:5px;background:currentColor}
.sound-bars i:nth-child(2n){height:21px}.sound-bars i:nth-child(3n){height:27px}.sound-bars i:nth-child(5){height:16px}
.sidebar-bottom a{font-size:12px;gap:11px;justify-content:flex-start!important}
.sidebar-bottom a>.icon{width:16px;height:16px}
.sidebar-bottom a .external-arrow{margin-left:auto;width:13px;height:13px;transform:rotate(-35deg);opacity:.5}
.sidebar-bottom a:hover{color:var(--ink)}
.sidebar-bottom p{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.5px;margin:25px 14px 0}
.sidebar-bottom p>span{font-size:9px;letter-spacing:.5px}
.workspace{margin-left:232px;width:calc(100% - 232px);min-width:0}
.topbar{height:76px;padding:0 44px;background:var(--bg);border-color:var(--line)}
.breadcrumb{font-size:11px}.breadcrumb>span{margin:0 14px;opacity:.5}
.header-actions{gap:9px}.header-actions .icon-button{width:36px;height:36px;border-radius:9px}
.header-actions .icon{width:17px;height:17px}.mini-avatar{width:33px;height:33px;border:1px solid #b4c9d32b;font-size:12px}
main{max-width:1320px;padding:37px 44px 25px}
.page-heading{margin-bottom:29px}.page-heading>div{flex:1;min-width:0}.eyebrow{font-size:9px;font-weight:500;letter-spacing:2.5px;color:var(--subtle);margin-bottom:10px}
h1{font-size:29px;letter-spacing:-.8px;font-weight:600}.greeting-dot{margin-left:3px}
.page-heading p{font-size:12px;margin-top:11px;color:var(--muted)}
.date-label{font-size:11px;align-self:center;border:1px solid var(--line);border-radius:8px;padding:7px 11px;color:var(--muted)}
.card{border:1px solid var(--line);border-radius:var(--radius);box-shadow:inset 0 1px 0 #ffffff04,0 4px 14px #00000006;background:var(--surface)}
.card-heading{padding:23px 25px 20px}.card-heading h2{font-size:14px;font-weight:550;gap:10px;letter-spacing:.3px}
.card-heading h2>.icon{color:var(--accent);width:17px;height:17px;stroke-width:1.5}.card-heading p{font-size:12px;line-height:1.8}
.card-body{padding:0 25px 25px}.card-note{display:flex;align-items:center;gap:6px;color:var(--subtle);font-size:10px;margin:0 25px 22px}
.card-note>.icon{width:13px;height:13px;flex:none}
.button{min-height:44px;font-size:12px;letter-spacing:.2px;border-radius:9px;font-weight:550;padding:11px 17px}
.button>.icon{width:17px;height:17px}
.primary{color:#1a2b33;background:linear-gradient(160deg,#e4ecef,#c3d4dc);border-color:#edf6fa5c;box-shadow:inset 0 1px 0 #ffffff70,0 3px 12px #00000016}
.primary:hover{background:linear-gradient(160deg,#f2f8fa,#d2e2e8);box-shadow:0 4px 20px #9ac1d21c;transform:translateY(-1px)}
.primary:active{transform:translateY(1px)}
.secondary{background:var(--surface-soft);border-color:var(--line)}.secondary:hover{border-color:var(--subtle);background:var(--hover)}
.text-button,.text-link{font-size:11px;gap:8px}.text-button:hover{color:var(--ink)}
.icon-button{border-radius:9px}.badge{padding:3px 8px;border-radius:5px;font-size:10px;font-weight:400}
.badge.good:before{content:"";width:4px;height:4px;border-radius:50%;background:currentColor;margin-right:5px}
input{border-radius:9px;min-height:48px;background:var(--bg);font-size:13px}
input:focus{border-color:var(--accent)}
.overview-top{grid-template-columns:minmax(0,1.85fr) minmax(250px,1fr);gap:20px}
.soundspace-card{position:relative;isolation:isolate;min-height:310px;padding:32px 32px 0;background:var(--hero);overflow:hidden;border-color:color-mix(in srgb,var(--accent) 18%,var(--line))}
.soundspace-card:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 93% 18%,#a7cddd14,transparent 65%),linear-gradient(125deg,transparent 30%,#89adbc05)}
.soundspace-copy{position:relative;z-index:2;max-width:65%;pointer-events:none}
.soundspace-copy button{pointer-events:auto}
.hero-label{display:flex;align-items:center;gap:7px;color:var(--hero-muted);font-size:8px;letter-spacing:1.8px;white-space:nowrap}
.hero-label>span{height:5px;width:5px;background:#a8cddd;border-radius:50%;box-shadow:0 0 0 4px #b7d5e10a}
.soundspace-copy h2{font-size:31px;line-height:1.5;letter-spacing:1px;font-weight:550;margin:19px 0 12px;color:var(--hero-ink)}
.soundspace-copy h2>span{color:var(--accent)}
.soundspace-copy>p{font-size:11px;line-height:1.95;color:var(--hero-muted)}
.hero-actions{display:flex;align-items:center;gap:18px;margin-top:23px;white-space:nowrap}
.hero-actions .button{gap:9px;padding:10px 14px;min-height:40px;font-size:11px}
.hero-actions .button .icon:last-child{width:14px;margin-left:7px}
.hero-actions .text-button{font-size:10px;color:var(--hero-muted)}
.hero-foot{position:relative;display:flex;justify-content:space-between;align-items:center;padding:16px 0 15px;margin-top:26px;border-top:1px solid #b8c9d01a;gap:10px;font-size:9px;color:var(--hero-muted);z-index:2}
.hero-foot>span:first-child{display:flex;align-items:center;gap:7px}.hero-foot .icon{height:13px;width:13px}
.hero-foot>span:last-child{font-size:7px;letter-spacing:1.6px;opacity:.65}
.record-art{position:absolute;right:-10px;top:33px;width:260px;height:245px;pointer-events:none;transform:rotate(-12deg);z-index:1}
.record-orbit{position:absolute;width:290px;height:290px;left:-10px;top:-32px;border:1px solid #b8d1dc0a;border-radius:50%;box-shadow:0 0 0 24px #b8d1dc04,0 0 0 48px #b8d1dc03}
.record-sleeve{position:absolute;top:28px;left:12px;width:166px;height:193px;background:linear-gradient(140deg,#b8c8ce 0%,#6d8792 55%,#304750);border:1px solid #e2f1f14d;box-shadow:inset 1px 1px 0 #ffffff45,3px 15px 26px #0005;border-radius:3px;overflow:hidden;z-index:2;padding:20px 17px;color:#f2f7f8}
.record-sleeve>span{font-size:28px;font-weight:800;letter-spacing:-1px;line-height:1.03;position:relative;z-index:1}
.record-sleeve>small{font-size:6px;letter-spacing:2px;position:absolute;bottom:14px;left:17px;z-index:1}
.sleeve-lines{position:absolute;width:160px;height:160px;border:1px solid #e5f5fa40;border-radius:50%;right:-51px;bottom:-30px;box-shadow:0 0 0 8px #d7ecf013,0 0 0 16px #d7ecf015,0 0 0 24px #d7ecf00d,0 0 0 32px #d7ecf00c,0 0 0 40px #d7ecf009;background:radial-gradient(circle at 35% 30%,#e3f4f55c,transparent 60%)}
.vinyl{position:absolute;right:-4px;top:17px;width:207px;height:207px;border-radius:50%;border:1px solid #acbfc746;background:repeating-radial-gradient(circle,#131719 0px,#131719 2px,#343e43 3px,#1a2024 4px);box-shadow:10px 13px 25px #0005;z-index:1}
.vinyl:after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 20deg,transparent,#acccd622,transparent 30%,transparent 45%,#c4d8e030,transparent 75%)}
.vinyl-label{position:absolute;inset:65px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;background:linear-gradient(140deg,#d1dfe4,#87a3b0);color:#2d3236;z-index:1}
.vinyl-label:after{content:"";position:absolute;left:calc(50% - 3px);top:calc(50% - 3px);width:6px;height:6px;background:#141b1f;border-radius:50%;border:1px solid #a6bac3}
.vinyl-label>span{font-size:19px;font-weight:600;margin-bottom:13px}.vinyl-label>small{font-size:4px;letter-spacing:.5px}
.record-caption{position:absolute;bottom:-1px;right:10px;color:#b4c5cc;font-size:5px;letter-spacing:1.6px;opacity:.6}
.pro-banner{display:flex;flex-direction:column;padding:24px 25px;background:linear-gradient(130deg,#2d3236,#24282b 65%,#292e32);border:1px solid #9cabb538;border-radius:18px;color:#edf1f3;isolation:isolate}
.pro-banner-head{z-index:2}.pro-banner-head .pro-word{font-style:normal;font-size:14px;font-weight:500;gap:8px;letter-spacing:1px}
.pro-word>span{font-size:9px;color:#aeb8bf;letter-spacing:.4px}
.banner-badge{color:#d0dbe1;font-size:9px;border-radius:5px;padding:3px 7px;background:#d5e1e909;border-color:#d5e1e924}
.pro-sculpture{position:relative;font:italic 500 82px/1.25 Georgia,"Times New Roman",serif;letter-spacing:-7px;margin:16px 0 7px;color:#d7e2e7;background:linear-gradient(170deg,#fcfefe 15%,#cad7de 45%,#8e9fa9 75%,#dbe5eb);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 12px 25px #bacbd40c;z-index:1}
.pro-sculpture>span{font:300 32px/1 Georgia,serif;vertical-align:top;display:inline-block;margin:14px 0 0 7px;color:#abbec8;-webkit-text-fill-color:#abbec8}
.pro-banner h2{font-size:18px;font-weight:500;margin-top:2px;z-index:2;letter-spacing:.3px}
.pro-banner p{font-size:10px;color:#aeb8bf;margin-top:7px;line-height:1.8;z-index:2}
.pro-banner .banner-link{display:flex;justify-content:space-between;width:100%;border-top:1px solid #bdcdd621;min-height:43px;margin-top:auto;padding-top:14px;font-size:11px;z-index:2;color:#d4e1e7}
.banner-link:hover{color:#fff;gap:25px}.banner-link .icon{width:16px;height:16px}
.pro-art{width:235px;height:235px;right:-149px;bottom:66px;border-color:#b5cbd915;box-shadow:0 0 0 20px #b5cbd904,0 0 0 40px #b5cbd903;transform:rotate(-30deg) scaleY(.65);z-index:-1}
.section-heading{margin:29px 0 16px}.section-heading h2{font-size:14px;font-weight:550;display:flex;align-items:center;gap:12px}
.section-heading h2>small{font-size:8px;font-weight:400;letter-spacing:1.6px;color:var(--subtle)}.section-heading>span{font-size:10px}
.quick-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:25px}
.quick-card{min-height:130px;padding:19px 20px 18px;border-radius:13px;background:var(--surface);transition:transform .2s ease,border-color .2s ease,background-color .2s ease}
.quick-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:var(--shadow);background:var(--hover)}
.quick-card:active{transform:translateY(0)}.quick-card strong{font-size:12px;font-weight:550;margin-top:13px}.quick-card>span:not(.service-icon){font-size:10px;margin-top:4px}
.service-icon{width:35px;height:35px;border-radius:10px;background:var(--accent-soft);color:var(--accent)}.service-icon .icon{height:18px;width:18px;stroke-width:1.5}
.service-icon.blue{background:#e6eef1;color:#618291}[data-theme=dark] .service-icon.blue{background:#263139;color:#adc3cf}
.service-icon.green{background:var(--good-soft);color:var(--good)}.service-icon.peach{background:#f0ede7;color:#918879}[data-theme=dark] .service-icon.peach{background:#302f2b;color:#bfb8a9}
.quick-arrow{top:27px;right:18px;width:14px;height:14px;color:var(--subtle);opacity:.65}.quick-card:hover .quick-arrow{transform:translateX(3px);color:var(--accent);transition:transform .2s}
.overview-bottom{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:20px;margin-bottom:20px}
.overview-source-card .card-body{padding-top:1px}.source-summary{margin:0 0 22px;gap:12px}.source-summary .service-icon{width:43px;height:43px;border-radius:10px;background:var(--surface-soft);color:var(--muted)}
.source-summary strong{font-size:13px;font-weight:500}.source-summary p{font-size:10px;margin-top:5px}.source-summary .badge{font-size:9px}
.overview-source-card .primary{background:var(--surface-soft);color:var(--accent);border-color:var(--line);min-height:40px;font-size:11px;box-shadow:none}
.overview-source-card .primary:hover{background:var(--accent-soft);border-color:var(--accent)}
.usage-preview{padding-top:17px;margin-top:20px;align-items:center;font-size:11px}.usage-preview strong{font-size:22px;font-weight:400;margin-right:5px}
.sync-grid{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;padding:6px 0 21px;border-bottom:1px solid var(--line)}
.sync-stat{min-width:0;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:9px;padding:14px;background:var(--surface-soft);border-radius:10px;border:0}
.sync-stat span{font-size:11px;line-height:1.6;white-space:normal;overflow-wrap:anywhere}
.sync-stat strong{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:5px;max-width:100%;font-size:23px;font-weight:450;letter-spacing:-.5px;line-height:1.4;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.sync-stat strong small{font-size:10px;color:var(--subtle);font-weight:400;letter-spacing:0}
.sync-date{font-size:10px;margin-top:20px;color:var(--muted)}
.overview-cloud-card .card-body{padding-bottom:15px}.overview-cloud-card .card-note{margin-top:0;line-height:1.8}
.profile-card{display:flex;align-items:center;gap:25px;padding:19px 24px;min-height:96px;background:transparent}
.profile-line{gap:12px;min-width:0}.profile-line .avatar-large{width:42px;height:42px;font-size:18px;background:linear-gradient(145deg,var(--accent-soft),var(--surface-soft));border:1px solid #b6cbd42a}
.profile-line h2{font-size:13px;font-weight:500}.profile-line p{font-size:10px;margin-top:3px}.profile-line>.badge{font-size:9px;margin-left:6px}
.profile-details{display:flex;margin:0 0 0 auto;gap:24px}.profile-details>div{flex:none}.profile-details span{font-size:9px;margin-bottom:5px}.profile-details strong{font-size:10px;color:var(--muted)}
.profile-card .card-link{width:auto;margin:0;padding:6px 0 6px 22px;gap:14px;border-top:0;border-left:1px solid var(--line);font-size:11px;white-space:nowrap;min-height:38px;color:var(--muted)}
.profile-card .card-link:hover{color:var(--accent)}
.page-footer{margin-top:29px;padding-top:19px;border-color:var(--line);font-size:9px;letter-spacing:.4px}.page-footer a:hover{color:var(--accent)}
.source-tabs{max-width:470px;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:0;gap:28px;margin-bottom:25px}
.source-tabs button{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 4px 14px;font-size:12px;border-radius:0;position:relative;min-height:49px}
.source-tabs .icon{width:16px;height:16px}.source-tabs button[aria-pressed=true]{background:transparent;box-shadow:none;color:var(--accent)}
.source-tabs button[aria-pressed=true]:after{content:"";height:2px;position:absolute;left:0;right:0;bottom:-1px;background:var(--accent);border-radius:2px}
.source-tabs button:hover{color:var(--ink)}
.source-card .card-heading{padding:23px 26px}.key-box{padding:13px 16px;background:var(--bg);border-style:dashed;margin-bottom:25px;border-color:color-mix(in srgb,var(--accent) 25%,var(--line))}
.key-box code{letter-spacing:1.2px;color:var(--accent);font-size:14px}.key-switch-row{font-size:11px;margin-bottom:12px}.info-grid span{font-size:11px;margin-bottom:8px}.info-grid strong{font-size:13px;font-weight:450}
.source-grid{gap:20px}.usage-item strong{font-size:30px;font-weight:450;letter-spacing:-1px;margin-top:10px}.usage-item small{font-size:10px}
.meter{height:4px;margin-top:17px;background:var(--line)}.meter i{background:linear-gradient(90deg,#668b9d,#aecddb)}
.usage-last{line-height:1.8;font-size:10px}.push-intro{font-size:12px}.push-steps{gap:9px;margin-top:18px;font-size:11px}
.push-steps b{display:inline-flex;justify-content:center;align-items:center;width:19px;height:19px;border-radius:50%;background:var(--accent-soft);font-size:9px}
.key-more{margin-top:25px;padding-top:13px}.key-more summary:hover{color:var(--accent)}
.list-row{padding:20px 0;gap:15px}.list-row .service-icon{width:39px;height:39px}.row-main strong{font-size:13px;font-weight:500}.row-main p{font-size:11px;line-height:1.8;color:var(--subtle)}
.row-actions{gap:10px}.row-actions .button{border-radius:8px;font-size:11px;padding:8px 13px;min-height:38px}
.pagination{font-size:11px;padding-top:18px;margin-top:22px}.pagination button{border:1px solid var(--line);border-radius:7px;min-height:36px;font-size:11px}.pagination button:hover:not(:disabled){border-color:var(--accent)}
.help-line{font-size:11px;line-height:1.8}.help-line a{font-size:11px}
.pro-detail{background:radial-gradient(ellipse at 100% 10%,#7a909b28,transparent 60%),linear-gradient(120deg,#2d3236,#21272b);padding:32px;border:1px solid #9cabb538;border-radius:18px}
.pro-detail .pro-word{font:italic 500 32px/1.2 Georgia,serif;letter-spacing:0}.pro-detail .pro-word>span{font:10px "Segoe UI","Microsoft YaHei",sans-serif;margin-left:7px}
.pro-detail h2{font-size:30px;font-weight:500;margin-top:22px}.pro-detail p{font-size:12px;line-height:1.8;color:#b6c2c9}
.banner-button{background:#cfdee613;border-color:#cfdee62e;color:#e1eaf0}.banner-button:hover{background:#cfdee627}
.pro-stats{margin-top:30px;padding-top:25px}.pro-stats span{color:#a9bac4;font-size:11px}.pro-stats strong{font-size:16px;font-weight:400;color:#e0e9ef}
.segmented{padding:3px;border-radius:8px;background:var(--bg);border:1px solid var(--line)}.segmented button{border-radius:5px;font-size:11px;min-height:32px}.segmented button[aria-pressed=true]{background:var(--accent-soft);color:var(--accent)}
.redeem-form{gap:10px;margin-bottom:13px}.order-amount{font-size:15px;font-weight:450;color:var(--accent)}
.settings-list{padding:0 26px 7px}.setting-row{min-height:86px;padding:20px 0}.setting-row strong{font-size:13px;font-weight:500}.setting-row p{font-size:11px;line-height:1.8}.setting-row .text-button{font-size:11px}
.avatar-edit{height:54px;width:54px;border:1px solid #b6cbd42a}.avatar-edit-badge{font-size:9px;line-height:18px;background:#121a1f70}
.account-footer{margin-top:25px}.account-footer .button{font-size:11px}.account-footer>a{font-size:11px}
.drive-import-link{background:var(--bg);padding:15px 17px;border-style:dashed}.drive-import-link code{font-size:12px;color:var(--accent)}
.drive-device-meta{font-size:12px}#drive-plugins .drive-device-info strong{font-size:13px}.drive-device-action{font-size:12px;min-width:66px}.drive-devices h3{font-size:13px}
.empty-state{min-height:135px;align-content:center;padding:22px 0;gap:12px}.empty-state strong{font-size:14px;font-weight:500}.empty-state p{font-size:12px;max-width:540px}
.notice{border-radius:12px;padding:18px 22px}.notice p{font-size:12px;line-height:1.8}
.gate{padding:35px 0}.gate h1{font-size:45px;font-weight:550;line-height:1.45;letter-spacing:1px}.gate-art{background:var(--accent-soft);box-shadow:0 15px 65px #81aec112}.gate-features{padding-top:10px}
#action-dialog{border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));border-radius:20px;padding:29px;background:var(--surface);box-shadow:0 30px 110px #0006}
#action-dialog::backdrop{background:#0b1116aa;backdrop-filter:blur(7px)}
#action-dialog[open]{animation:dialog-enter .22s ease-out}.dialog-header{margin-bottom:24px}.dialog-header h2{font-size:21px;font-weight:500}.dialog-header .eyebrow{font-size:8px;letter-spacing:2px}.dialog-description{font-size:12px;line-height:1.9}
.import-option{background:var(--surface-soft);padding:17px;border-radius:11px;margin-top:12px;min-height:78px}.import-option:hover{border-color:var(--accent);transform:translateX(2px)}.import-option strong{font-size:13px;font-weight:500}.import-option small{font-size:11px;line-height:1.7}
.dialog-form{gap:19px}.field label{font-size:12px;font-weight:450;color:var(--muted)}.dialog-actions{margin-top:25px}.dialog-footnote{font-size:10px}
.toast{border:1px solid var(--line);background:var(--surface-soft);color:var(--ink);font-size:12px;box-shadow:0 10px 40px #0003;border-radius:10px;backdrop-filter:blur(8px)}
.view:not([hidden]){animation:view-enter .3s ease-out both}
@keyframes view-enter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes dialog-enter{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(min-width:1151px){
  #view-account{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px;align-items:start}
  #view-account>.page-heading{grid-column:1/-1;margin-bottom:9px}
  #view-account>.card{margin-bottom:0}
  #view-account>.card:nth-of-type(1){grid-column:1;grid-row:2/4;height:100%}
  #view-account>.card:nth-of-type(1) .setting-row{min-height:102px}
  #view-account>#devices-card{grid-column:2;grid-row:2}
  #view-account>.card:nth-of-type(3){grid-column:2;grid-row:3}
  #view-account>.account-footer{grid-column:1/-1;margin-top:4px}
  #view-account .row-main p{font-size:10px}
  #orders-body .list-row{padding:18px 0;gap:25px}
  #orders-body .row-main{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;column-gap:20px}
  #orders-body .row-main>strong{grid-column:1;grid-row:1;font-size:12px}
  #orders-body .row-main>p:not(.order-id){grid-column:2;grid-row:1/3;margin:0;font-size:11px}
  #orders-body .row-main>.order-id{grid-column:1;grid-row:2;font-size:9px;letter-spacing:.3px;margin-top:5px}
  #orders-body .order-amount{min-width:90px;text-align:right;font-size:13px}
}
@media(min-width:1550px){main{padding-top:44px}.overview-top{grid-template-columns:minmax(0,1.9fr) minmax(290px,1fr)}.soundspace-card{padding:37px 38px 0}.soundspace-copy h2{font-size:36px}.record-art{right:15px;top:32px;transform:rotate(-12deg) scale(1.1)}.soundspace-copy>p{font-size:12px}.hero-foot{margin-top:29px}.pro-banner{padding:27px 30px}.pro-sculpture{font-size:95px;margin:17px 0 10px}.quick-card{min-height:137px;padding:21px}.card-heading{padding-top:25px}}
@media(min-width:768px) and (max-width:1150px){.sidebar{width:198px;padding-left:14px;padding-right:14px}.brand{font-size:18px;gap:9px;padding-left:7px}.brand img{width:33px;height:33px}.nav-label>span{display:none}.workspace{margin-left:198px;width:calc(100% - 198px)}main{padding:30px 26px 25px}.topbar{padding:0 26px}.overview-top{grid-template-columns:minmax(0,1.5fr) minmax(215px,1fr);gap:16px}.soundspace-card{padding:26px 24px 0}.soundspace-copy{max-width:100%}.soundspace-copy h2{font-size:28px}.record-art{right:-120px;top:68px;opacity:.34}.hero-label{font-size:7px;letter-spacing:1.2px}.hero-foot>span:last-child{display:none}.hero-actions{gap:12px}.pro-banner{padding:23px 21px}.pro-sculpture{font-size:73px;margin-top:25px}.pro-banner p{font-size:10px}.quick-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.quick-card{min-height:101px;padding:17px 18px 17px 67px;justify-content:start;align-content:center}.quick-card .service-icon{position:absolute;top:30px;left:18px}.quick-card strong{margin-top:0}.quick-arrow{top:23px;right:14px}.overview-bottom{grid-template-columns:1fr;gap:16px}.sync-grid{padding-top:7px}.profile-card{flex-wrap:wrap;gap:18px;padding:20px}.profile-details{gap:20px}.profile-line>.badge{display:none}.profile-card .card-link{margin-left:auto}.source-grid{grid-template-columns:1fr}.date-label{font-size:10px}.source-summary{margin-bottom:17px}.overview-source-card .primary{max-width:230px}.usage-preview{margin-top:17px}.profile-line h2{font-size:13px}}
@media(min-width:768px) and (max-width:900px){.overview-top{grid-template-columns:1fr}.record-art{right:0;top:32px;opacity:1}.soundspace-copy{max-width:65%}.pro-banner{display:grid;grid-template-columns:1fr auto;gap:0 20px;padding:22px 24px}.pro-banner-head{grid-column:1/-1}.pro-sculpture{position:absolute;right:26px;top:25px;font-size:65px;opacity:.65}.pro-banner h2{margin-top:21px;grid-column:1}.pro-banner p{grid-column:1;font-size:10px}.pro-banner .banner-link{grid-column:1/-1;margin-top:18px;min-height:35px}.date-label{display:none}}
@media(max-width:767px){
  html{scroll-padding-top:83px}.sidebar{display:none}.workspace{margin-left:0;width:100%}.topbar{height:65px;padding:0 21px;position:sticky;top:0;background:var(--bg);z-index:25}.mobile-brand{font-size:16px;letter-spacing:.4px;gap:10px}.mobile-brand img{width:29px;height:29px;border-radius:9px}.breadcrumb{display:none}.header-actions{gap:4px}.header-actions .icon-button{height:40px;width:40px}.header-actions .icon{width:18px;height:18px}
  main{padding:27px 20px calc(104px + env(safe-area-inset-bottom));max-width:610px}.page-heading{margin-bottom:23px}.eyebrow{font-size:8px;letter-spacing:2px;margin-bottom:10px}h1{font-size:26px;font-weight:550;letter-spacing:-.5px}.page-heading p{font-size:11px;line-height:1.9;max-width:95%;margin-top:9px}.date-label{display:none}
  .overview-top{grid-template-columns:1fr;gap:15px}.soundspace-card{min-height:316px;padding:26px 24px 0;border-radius:16px}.soundspace-copy{max-width:100%}.hero-label{font-size:7px;letter-spacing:1.35px}.soundspace-copy h2{font-size:28px;line-height:1.5;margin-top:22px;margin-bottom:13px;letter-spacing:.5px}.soundspace-copy>p{font-size:10px;line-height:1.95;max-width:190px}.hero-actions{gap:16px;margin-top:22px}.hero-actions .button{font-size:11px;min-height:42px;padding:10px 13px}.hero-actions .text-button{font-size:10px}.hero-foot{margin-top:23px;padding:14px 0;font-size:8px}.hero-foot>span:last-child{font-size:5px;letter-spacing:1px}.record-art{right:-76px;top:61px;transform:rotate(-12deg) scale(.72);transform-origin:center;opacity:.75}.record-sleeve{left:26px}.record-caption{display:none}.soundspace-copy h2{position:relative}.soundspace-copy{text-shadow:0 1px 15px var(--hero)}
  .pro-banner{padding:22px 24px;border-radius:16px;min-height:193px;display:block}.pro-banner-head{max-width:none}.pro-banner-head .pro-word{font-size:13px}.banner-badge{font-size:9px}.pro-sculpture{position:absolute;right:24px;top:43px;margin:0;font-size:68px;opacity:.65;letter-spacing:-5px}.pro-sculpture>span{font-size:23px;margin-left:4px;margin-top:14px}.pro-banner h2{font-size:17px;margin-top:24px;max-width:65%}.pro-banner p{font-size:9px;margin-top:7px;max-width:65%;line-height:1.9}.pro-banner .banner-link{margin-top:17px;padding-top:12px;font-size:10px;min-height:34px}.pro-art{right:-153px;bottom:-55px}
  .section-heading{margin:26px 0 15px}.section-heading h2{font-size:13px;gap:10px}.section-heading h2>small{font-size:7px;letter-spacing:1.2px}.section-heading>span{display:none}.quick-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-bottom:20px}.quick-card{padding:17px 16px;min-height:126px;border-radius:13px}.quick-card .service-icon{width:33px;height:33px;border-radius:9px}.quick-card .service-icon .icon{width:17px;height:17px}.quick-card strong{font-size:12px;margin-top:12px}.quick-card>span:not(.service-icon){font-size:10px;margin-top:4px;min-height:0}.quick-arrow{display:block;right:14px;top:26px;width:13px;height:13px}
  .overview-bottom,.source-grid{grid-template-columns:1fr;gap:16px;margin-bottom:16px}.card{border-radius:15px}.card-heading{padding:19px 20px 17px;gap:10px}.card-heading h2{font-size:13px}.card-heading p{font-size:11px}.card-heading .text-button{font-size:10px}.card-body{padding:0 20px 21px}.source-summary{gap:10px;margin-bottom:20px}.source-summary strong{font-size:12px}.source-summary p{font-size:10px}.source-summary .badge{font-size:8px;padding:3px 6px}.source-summary .service-icon{width:37px;height:37px}.usage-preview{font-size:10px;padding-top:14px;margin-top:17px}.usage-preview strong{font-size:23px}
  .sync-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:5px 0 18px}.sync-stat{padding:14px;gap:8px}.sync-stat span{font-size:11px}.sync-stat strong{font-size:25px}.sync-stat strong small{font-size:10px}.sync-date{font-size:10px;margin-top:17px}.overview-cloud-card .card-body{padding-bottom:13px}.card-note{font-size:10px;margin:0 20px 18px;gap:5px}
  .profile-card{display:flex;flex-wrap:wrap;gap:18px;padding:19px 20px}.profile-line{width:100%;gap:11px}.profile-line .avatar-large{height:39px;width:39px;font-size:17px}.profile-line h2{font-size:12px}.profile-line p{font-size:10px}.profile-line>.badge{display:inline-flex;margin-left:auto;font-size:9px}.profile-details{gap:24px;margin:0;flex:1}.profile-details>div:first-child{display:none}.profile-details span{font-size:9px}.profile-details strong{font-size:10px}.profile-card .card-link{font-size:10px;padding:5px 0 5px 15px;gap:8px;min-height:37px}.page-footer{font-size:8px;margin-top:25px;padding-top:18px}
  .source-tabs{max-width:100%;margin-bottom:21px;gap:15px}.source-tabs button{font-size:11px;padding:8px 0 13px;min-height:48px;gap:6px}.source-tabs .icon{width:14px;height:14px}.source-card .card-heading{padding:20px}.source-card .card-heading h2{font-size:13px}.source-card .card-heading .service-icon{width:27px;height:27px}.source-card .badge{font-size:9px}.key-box{padding:10px;margin-bottom:23px}.key-box code{font-size:12px;letter-spacing:.5px}.key-box .icon-button{width:38px;height:38px}.key-box .icon{width:17px;height:17px}.info-grid{grid-template-columns:1fr 1fr;gap:20px}.info-grid span{font-size:10px}.info-grid strong{font-size:12px}.action-row{gap:10px;margin-top:22px}.action-row .button{min-height:44px;font-size:11px}.key-more{margin-top:21px}.key-more summary{font-size:11px}.kv{font-size:11px;gap:12px}.key-switch-row{font-size:10px}.usage-grid{gap:12px}.usage-item strong{font-size:27px}.usage-item>span{font-size:10px}.usage-item small{font-size:9px}.usage-last{font-size:9px}.push-intro{font-size:11px}.push-steps{font-size:10px;gap:9px}
  .list-row{padding:19px 0;gap:11px}.list-row>.service-icon{width:34px;height:34px}.row-main{min-width:150px}.row-main strong{font-size:12px}.row-main p{font-size:10px;line-height:1.8}.row-actions{margin-left:45px;width:calc(100% - 45px);gap:10px}.row-actions .button{min-height:40px;font-size:10px}.device-row .row-main{min-width:0}.device-row .row-actions{margin-left:0;width:auto}.device-row .row-actions .button{font-size:10px;min-height:40px;padding:7px 10px}.pagination{font-size:10px;gap:10px}.pagination button{min-height:40px;font-size:10px}.help-line p{font-size:10px}.help-line a{font-size:10px}.plugin-help{font-size:10px}
  .pro-detail{padding:25px 23px;border-radius:16px}.pro-detail .pro-word{font-size:29px}.pro-detail h2{font-size:26px;margin-top:22px}.pro-detail p{font-size:11px}.banner-button{margin-top:21px;font-size:11px;min-height:44px}.pro-stats{padding-top:22px;margin-top:24px;gap:12px}.pro-stats span{font-size:10px}.pro-stats strong{font-size:13px}.redeem-form{gap:10px}.redeem-form input{font-size:12px}.redeem-form button{font-size:11px;min-height:44px}.segmented{margin-top:0;padding:3px}.segmented button{font-size:9px;padding:7px 9px;min-height:34px}.order-amount{font-size:13px}.order-id{font-size:9px}
  .settings-list{padding:0 20px 5px}.setting-row{min-height:79px;padding:18px 0;gap:15px}.setting-row strong{font-size:12px}.setting-row p{font-size:10px}.setting-row .text-button{font-size:10px}.avatar-edit{width:49px;height:49px}.account-footer{display:grid;gap:15px}.account-footer .button{font-size:11px}.account-footer>a{font-size:10px}.drive-import-link{padding:13px}.drive-import-link code{font-size:11px}.drive-device-meta{font-size:11px}#drive-plugins .drive-device-info strong{font-size:12px}.drive-device-row{gap:10px}.drive-device-action{font-size:11px;min-width:56px;padding:8px 10px}
  .bottom-nav{height:calc(73px + env(safe-area-inset-bottom));background:var(--sidebar);border-top:1px solid var(--line);padding:7px 12px calc(9px + env(safe-area-inset-bottom));box-shadow:0 -6px 24px #0000000c}.bottom-nav a{font-size:9px;gap:5px;border-radius:10px;margin:0 3px;color:var(--subtle)}.bottom-nav a>.icon{width:20px;height:20px;stroke-width:1.6}.bottom-nav a[aria-current=page]{color:var(--accent);background:var(--accent-soft)}.bottom-nav a[aria-current=page]>.icon{stroke-width:1.7}
  #action-dialog{position:fixed;inset:auto 0 0;max-width:100%;width:100%;margin:0;border-radius:23px 23px 0 0;padding:28px 23px calc(26px + env(safe-area-inset-bottom));border-bottom:0;max-height:calc(100dvh - 25px)}#action-dialog:before{content:"";position:absolute;top:9px;left:calc(50% - 16px);height:3px;width:32px;border-radius:5px;background:var(--subtle);opacity:.5}.dialog-header{margin-bottom:22px}.dialog-header h2{font-size:20px}.dialog-description{font-size:12px}.import-option{padding:16px;min-height:77px}.import-option strong{font-size:12px}.import-option small{font-size:10px}.dialog-form input{font-size:16px}.dialog-actions .button{font-size:12px}.toast{bottom:calc(91px + env(safe-area-inset-bottom));font-size:11px}.gate{padding-top:13px;margin-top:25px}.gate h1{font-size:36px}.gate-features{gap:18px;font-size:10px}.gate>.button{min-height:48px}
}
@media(max-width:360px){main{padding-left:16px;padding-right:16px}.topbar{padding-left:16px;padding-right:16px}.soundspace-card{padding-left:20px;padding-right:20px}.soundspace-copy h2{font-size:25px}.record-art{right:-105px;opacity:.4}.hero-actions{gap:12px}.hero-actions .text-button{font-size:9px}.hero-actions .button{padding:10px 11px}.hero-foot>span:last-child{display:none}.pro-banner{padding-left:20px;padding-right:20px}.pro-sculpture{right:20px;top:58px;font-size:53px}.pro-banner h2{font-size:16px}.quick-card{padding:16px 14px}.quick-card>span:not(.service-icon){font-size:9px}.sync-stat{padding:12px}.sync-stat strong{font-size:23px}.source-summary .badge{font-size:7px}.card-heading{flex-wrap:wrap}.source-tabs{gap:10px}.source-tabs button{font-size:10px}.profile-line>.badge{font-size:8px}.row-main{min-width:135px}.device-row{gap:9px}.pro-stats strong{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}