:root{
  --bg:#111214;
  --bg-soft:#17181b;
  --panel:#1b1c1f;
  --panel-2:#232429;
  --ink:#f2f0ec;
  --muted:#aaa7a0;
  --faint:#6f6c66;
  --line:#34353a;
  --line-soft:#26272b;
  --accent:#f27622;
  --accent-2:#ff944d;
  --green:#4ccf7a;
  --red:#ff5d4f;
  --yellow:#e6bb54;
  --shadow:0 28px 80px rgba(0,0,0,.48);
  --ease:cubic-bezier(.22,1,.36,1);
  --radius:8px;
  --gallery-side-width:300px;
}

*{box-sizing:border-box}
body{
  -webkit-user-select:none;
  user-select:none;
}
input,
textarea,
select,
[contenteditable="true"],
.gallery-top-title[contenteditable="true"]{
  -webkit-user-select:text;
  user-select:text;
}
html{scroll-behavior:smooth;scrollbar-width:none}
html::-webkit-scrollbar{width:0;height:0}
body{
  margin:0 0 12px;
  background:var(--bg);
  color:var(--ink);
  font-family:"HarmonyOS Sans SC","Source Han Sans SC","Noto Sans CJK SC","PingFang SC","Microsoft YaHei UI",sans-serif;
  letter-spacing:0;
  overflow-x:hidden;
  scrollbar-width:none;
}
body::-webkit-scrollbar{width:0;height:0}
body[data-page="gallery"]{
  height:100vh;
  overflow:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:linear-gradient(180deg,#1b1c1f 0%,#141518 42%,#101114 100%);
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.2;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 7px);
  mix-blend-mode:soft-light;
}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.55}
a{color:inherit;text-decoration:none}
img{
  display:block;
  -webkit-user-drag:none;
  user-select:none;
}
.hidden{display:none!important}
.page{display:none;min-height:100vh;padding:96px clamp(20px,4vw,56px) 56px}
.page.active{display:block}
.page:not(.gallery-page){max-width:1480px;margin:0 auto}
.eyebrow,.section-kicker{
  margin:0;
  color:var(--accent);
  font-size:12px;
  font-weight:800;
  letter-spacing:0;
}

.topbar{
  position:fixed;
  z-index:60;
  top:0;
  left:0;
  right:0;
  height:72px;
  padding:0 clamp(18px,4vw,54px);
  display:flex;
  align-items:center;
  gap:34px;
  background:rgba(5,5,5,.82);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.public-topbar{
  background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,0));
  border-bottom:0;
}
body[data-page="dashboard"] .app-topbar{display:none!important}
body[data-page="gallery"] .app-topbar .app-nav,
body[data-page="gallery"] .app-topbar .top-actions,
body[data-page="gallery"] .account-menu,
body[data-page="gallery"] .gallery-actions{
  display:none!important;
}
body[data-page="gallery"] .app-topbar{
  height:54px;
  padding:0 24px;
  right:var(--gallery-side-width);
  width:auto;
  display:flex;
  align-items:center;
  gap:12px;
  overflow:hidden;
}
body[data-page="gallery"] .app-topbar .brand{
  grid-column:1;
  gap:0;
  width:38px;
  height:38px;
  justify-content:center;
  border-radius:50%;
}
body[data-page="gallery"] .app-topbar .brand:hover{
  background:rgba(255,255,255,.15);
  box-shadow:0 0 0 4px rgba(255,255,255,.06);
}
body[data-page="gallery"] .app-topbar .brand span:last-child{
  display:none;
}
body[data-page="gallery"] .app-topbar .brand-mark{
  width:15px;
  height:15px;
  background:transparent;
  border-left:4px solid #fff;
  border-bottom:4px solid #fff;
  clip-path:none;
  transform:translateX(2px) rotate(45deg);
}
.gallery-top-title{
  display:none;
}
.gallery-top-tabs{
  display:none;
}
.gallery-view-tools{
  display:none;
}
.gallery-layout-toggle{
  display:none;
}
body[data-page="gallery"] .gallery-top-title{
  display:block;
  min-width:0;
  max-width:min(520px,100%);
  color:#fff;
  font-size:18px;
  font-weight:950;
  outline:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  cursor:text;
}
body[data-page="gallery"] .gallery-top-title:focus{
  padding:6px 10px;
  margin-left:-8px;
  margin-right:8px;
  border-radius:6px;
  background:rgba(255,255,255,.06);
  box-shadow:0 0 0 1px rgba(242,118,34,.7);
  overflow:hidden;
}
body[data-page="gallery"] .gallery-top-tabs{
  position:absolute;
  left:calc(50% + 44px);
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:8px;
  height:100%;
  min-width:0;
  max-width:100%;
}
body[data-page="gallery"] .gallery-top-tabs button{
  flex:0 0 200px;
  width:200px;
  min-width:0;
  height:36px;
  justify-content:center;
  padding:0 8px;
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  color:var(--muted);
  font-size:18px;
  font-weight:900;
  position:relative;
  display:flex;
  align-items:center;
  gap:7px;
  overflow:hidden;
  white-space:nowrap;
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),transform .18s var(--ease);
}
body[data-page="gallery"] .gallery-top-tabs button.active{
  color:#fff;
  font-size:19px;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035));
  border-color:rgba(242,118,34,.52);
  box-shadow:inset 0 -3px 0 var(--accent),0 8px 18px rgba(0,0,0,.18);
}
body[data-page="gallery"] .gallery-top-tabs span{
  min-width:0;
}
body[data-page="gallery"] .top-tab-label{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body[data-page="gallery"] .top-tab-count{
  color:var(--accent);
  font-size:18px;
}
body[data-page="gallery"] .top-tab-icon{
  width:24px;
  height:24px;
  flex:0 0 24px;
  background:center/contain no-repeat;
  opacity:.62;
}
body[data-page="gallery"] .gallery-top-tabs button.active .top-tab-icon{
  opacity:1;
  width:28px;
  height:28px;
  flex-basis:28px;
}
body[data-page="gallery"] .all-icon{
  background-image:url("./assets/top-tab-all.svg");
}
body[data-page="gallery"] .selected-icon{
  background-image:url("./assets/top-tab-selected.svg");
}
body[data-page="gallery"] .retouched-icon{
  background-image:url("./assets/top-tab-retouched.svg");
}
body[data-page="gallery"] .gallery-view-tools{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  max-width:100%;
}
.name-toggle{
  display:flex;
  align-items:center;
  gap:6px;
  height:30px;
  padding:0 2px;
  border:0;
  border-radius:0;
  background:transparent;
  color:#d8d4cc;
  font-size:12px;
  font-weight:760;
  white-space:nowrap;
  cursor:pointer;
}
.name-toggle input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.name-check{
  width:15px;
  height:15px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.22);
  border-radius:6px;
  background:rgba(255,255,255,.05);
  color:#100804;
  transition:background .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.name-check::before{
  content:"";
  width:8px;
  height:5px;
  border-left:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(-45deg) translate(1px,-1px);
  opacity:0;
}
.name-toggle input:checked + .name-check{
  background:var(--accent);
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(242,118,34,.14);
}
.name-toggle input:checked + .name-check::before{
  opacity:1;
}
.sort-control{
  display:flex;
  align-items:center;
  gap:6px;
  height:30px;
  color:#bdb8ae;
  font-size:12px;
  font-weight:760;
  white-space:nowrap;
}
.custom-select{
  position:relative;
}
.custom-select-trigger{
  height:30px;
  min-width:104px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:0 12px 0 14px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(22,22,22,.82);
  color:#f2eee8;
  font-weight:780;
  backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.custom-select.open .custom-select-trigger,
.custom-select-trigger:hover{
  border-color:rgba(242,118,34,.62);
  background:rgba(28,27,25,.94);
}
.select-chevron{
  width:7px;
  height:7px;
  border-right:1.5px solid #d7d1c7;
  border-bottom:1.5px solid #d7d1c7;
  transform:rotate(45deg) translateY(-2px);
  transition:transform .18s var(--ease);
}
.custom-select.open .select-chevron{
  transform:rotate(225deg) translate(-1px,-1px);
}
.custom-select-menu{
  position:absolute;
  top:calc(100% + 7px);
  left:0;
  min-width:100%;
  padding:6px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  background:rgba(20,20,20,.96);
  box-shadow:0 18px 42px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(18px);
  display:none;
  z-index:260;
}
.custom-select.open .custom-select-menu{
  display:grid;
  gap:2px;
}
.custom-select-menu button{
  height:34px;
  min-width:104px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#d8d3ca;
  text-align:left;
  padding:0 12px;
  font-size:13px;
  font-weight:780;
}
.custom-select-menu button:hover{
  background:rgba(255,255,255,.07);
  color:#fff;
}
.custom-select-menu button.active{
  background:rgba(242,118,34,.18);
  color:#ff8a3d;
}
body[data-page="gallery"] .gallery-layout-toggle{
  display:flex;
  align-items:center;
  gap:4px;
  height:32px;
  padding:3px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  background:rgba(20,20,20,.74);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 12px 28px rgba(0,0,0,.26);
  backdrop-filter:blur(14px);
}
.gallery-layout-toggle button{
  width:30px;
  height:26px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#bdb9b0;
  transition:background .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease),transform .16s var(--ease);
}
.gallery-layout-toggle button:active{
  transform:scale(.94);
}
.gallery-layout-toggle button.active{
  color:#fff;
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.layout-icon{
  width:16px;
  height:16px;
  display:grid;
  gap:3px;
}
.layout-icon-masonry{
  background:
    linear-gradient(currentColor 0 0) 0 0/5px 5px no-repeat,
    linear-gradient(currentColor 0 0) 11px 0/5px 8px no-repeat,
    linear-gradient(currentColor 0 0) 0 9px/5px 7px no-repeat,
    linear-gradient(currentColor 0 0) 11px 12px/5px 4px no-repeat;
}
.layout-icon-square{
  background:
    linear-gradient(currentColor 0 0) 0 0/6px 6px no-repeat,
    linear-gradient(currentColor 0 0) 10px 0/6px 6px no-repeat,
    linear-gradient(currentColor 0 0) 0 10px/6px 6px no-repeat,
    linear-gradient(currentColor 0 0) 10px 10px/6px 6px no-repeat;
}
.brand{
  border:0;
  background:transparent;
  color:#fff;
  font-size:28px;
  font-weight:950;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0;
}
.brand-logo{
  height:85px;
  width:auto;
  display:block;
}
.brand-mark{
  width:18px;
  height:18px;
  background:var(--accent);
  display:inline-block;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.public-nav,.app-nav{display:flex;align-items:center;gap:28px;margin:auto}
.public-topbar .public-nav{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  margin:0;
}
.public-topbar .top-actions{
  margin-left:auto;
}
.public-nav a,.nav{
  color:#c9c6bf;
  font-size:14px;
  font-weight:700;
}
.nav{
  position:relative;
  border:0;
  background:transparent;
  padding:26px 0;
}
.public-nav a:hover,.nav:hover,.nav.active{color:#fff}
.nav.active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:15px;
  height:3px;
  background:var(--accent);
}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.primary,.ghost,.danger,.text-btn,.icon-btn,.avatar-btn,.share-btn,.accent-link{
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:transparent;
  color:#fff;
  padding:12px 18px;
  transition:transform .2s var(--ease),background .2s,border-color .2s,color .2s,filter .2s;
}
.primary{
  background:var(--accent);
  border-color:var(--accent);
  color:#120904;
  font-weight:950;
}
.primary:hover{filter:brightness(1.08);transform:translateY(-2px)}
.ghost{background:rgba(255,255,255,.025)}
.ghost:hover,.icon-btn:hover{border-color:rgba(242,118,34,.7);background:rgba(242,118,34,.09)}
.small{padding:9px 13px;font-size:13px}
.full{width:100%}
.danger{background:#2a1110;border-color:#69211c;color:#ffd1cb}
.danger:hover:not(:disabled){border-color:#c0392b;background:#3c1412}
.danger-text{color:#ff735f!important}
.text-btn{border:0;padding:0;color:var(--muted);background:transparent}
.text-btn:hover{color:var(--accent)}
.accent-link{
  border:0;
  color:var(--accent);
  padding:9px 0;
  font-weight:900;
}
.icon-btn{
  width:38px;
  height:38px;
  padding:0;
  display:grid;
  place-items:center;
  font-weight:950;
  color:var(--accent);
}
.avatar-btn{
  width:42px;
  height:42px;
  padding:0;
  border-radius:50%;
  overflow:hidden;
  border-color:rgba(255,255,255,.24);
}
.avatar-btn img{width:100%;height:100%;object-fit:cover}

#home.page{
  max-width:none;
  padding:0;
}
#home .content-band{
  max-width:1280px;
  margin:0 auto;
  padding-left:clamp(20px,4vw,56px);
  padding-right:clamp(20px,4vw,56px);
}
.hero{
  position:relative;
  min-height:calc(100svh - 86px);
  overflow:hidden;
  background:#0b0b0b;
  border:0;
  box-shadow:none;
  display:flex;
  align-items:center;
}
.hero-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:grayscale(1) contrast(1.05);
}
.hero-shade{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.78) 31%,rgba(0,0,0,.3) 63%,rgba(0,0,0,.08) 100%),linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.42) 64%,rgba(0,0,0,.9) 100%);
}
.hero-topline{
  position:absolute;
  top:26px;
  left:30px;
  right:30px;
  display:flex;
  justify-content:space-between;
  color:#e7e4de;
  font-size:13px;
  font-weight:800;
}
.hero-copy{
  position:relative;
  z-index:2;
  max-width:810px;
  padding:90px 72px 40px;
}
.hero h1{
  margin:0 0 30px;
  font-size:96px;
  line-height:1.12;
  font-weight:1000;
  letter-spacing:0;
  text-shadow:0 8px 30px rgba(0,0,0,.48);
}
.hero h1 span{
  color:var(--accent);
}
.hero-desc{
  max-width:640px;
  color:#dedbd3;
  line-height:1.95;
  font-size:18px;
  font-weight:650;
}
.hero-actions{display:flex;gap:28px;margin-top:44px;flex-wrap:wrap;align-items:center}
.hero-actions .primary{
  min-width:210px;
  padding:20px 44px;
  font-size:18px;
  border-radius:10px;
}
.demo-btn{
  display:inline-flex;
  align-items:center;
  gap:14px;
  border:0;
  background:transparent;
  color:#ddd8cf;
  padding:12px 10px;
  font-size:17px;
  font-weight:850;
}
.demo-btn span{
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.46);
  display:inline-grid;
  place-items:center;
}
.demo-btn span::before{
  content:"";
  width:0;
  height:0;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  border-left:9px solid var(--accent);
  margin-left:2px;
}
.demo-btn:hover{color:#fff}
.hero-note{
  position:absolute;
  z-index:3;
  right:34px;
  bottom:32px;
  width:270px;
  background:rgba(7,7,7,.76);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);
  padding:20px;
  backdrop-filter:blur(16px);
}
.hero-note b{font-size:44px;line-height:1;color:var(--accent)}
.hero-note span{display:block;margin:6px 0 12px;font-weight:900}
.hero-note p{margin:0;color:var(--muted);line-height:1.7;font-size:13px}

.metric-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  position:relative;
  z-index:4;
  margin-top:0;
  background:rgba(20,20,19,.88);
  border:0;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(18px);
}
.metric-strip article{min-height:86px;padding:17px 72px;border-right:1px solid rgba(255,255,255,.07)}
.metric-strip article:last-child{border-right:0}
.metric-strip span{display:block;color:var(--muted);font-size:13px;font-weight:800}
.metric-strip b{display:block;font-size:35px;line-height:1;margin-top:8px;color:#fff}

.content-band{padding:82px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.section-head{
  display:flex;
  justify-content:space-between;
  gap:28px;
  margin:14px 0 28px;
}
.section-head.center{
  display:block;
  text-align:center;
  margin:0 auto 28px;
}
.section-head.center h2,.section-head.center p{
  margin-left:auto;
  margin-right:auto;
}
.section-head h2,.help-band h2{
  margin:0;
  max-width:680px;
  font-size:42px;
  line-height:1.12;
}
.section-head p{
  margin:8px 0 0;
  max-width:420px;
  color:var(--muted);
  line-height:1.8;
}
.feature-grid,.pricing-grid{display:grid;gap:16px}
.feature-grid{grid-template-columns:repeat(4,1fr)}
.feature-grid article,.price-card,.stats article,.quick-panel,.modal,.settings-panel,.gallery-card,.create-card,.info-card,.setting-group,.upload-drop,.share-card{
  background:linear-gradient(180deg,rgba(35,36,40,.96),rgba(24,25,28,.98));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.feature-grid article{
  min-height:190px;
  border-radius:var(--radius);
  padding:26px;
  transition:.22s var(--ease);
}
.feature-grid article:hover{transform:translateY(-4px);border-color:rgba(242,118,34,.55)}
.feature-grid span,.price-card span{color:var(--accent);font-weight:950;font-size:13px}
.feature-icon{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  margin:0 auto 18px;
  background:rgba(255,255,255,.035);
  color:var(--accent);
}
.feature-grid h3{font-size:23px;margin:16px 0 10px}
.feature-grid p,.price-card p{color:var(--muted);line-height:1.75;font-size:14px;margin:0}
.feature-grid article{text-align:center}

.pricing-grid{grid-template-columns:repeat(3,minmax(260px,1fr));justify-content:center}
.price-card{
  position:relative;
  border-radius:var(--radius);
  padding:30px;
}
.price-card h3{
  margin:14px 0;
  font-size:48px;
  line-height:1;
}
.price-card ul{padding-left:18px;color:#d3cfc7;line-height:1.9;margin:22px 0}
.recommended{border-color:rgba(242,118,34,.72)}
.recommended label{
  position:absolute;
  top:18px;
  right:18px;
  background:var(--accent);
  color:#120904;
  border-radius:6px;
  padding:5px 9px;
  font-size:12px;
  font-weight:950;
}
.case-layout{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.case-layout article{
  position:relative;
  min-height:360px;
  overflow:hidden;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.09);
  background:#111;
}
.case-layout img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);opacity:.78}
.case-layout div{
  position:absolute;
  left:18px;
  right:18px;
  bottom:18px;
  background:rgba(0,0,0,.62);
  border-radius:var(--radius);
  padding:16px;
}
.case-layout span{color:var(--accent);font-size:13px;font-weight:900}
.case-layout h3{margin:8px 0 0;font-size:22px;line-height:1.25}
.help-band{display:flex;justify-content:space-between;align-items:center;gap:24px}

.dashboard{
  max-width:none!important;
  height:100vh;
  padding:0 24px 22px;
  flex-direction:column;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:none;
  background:radial-gradient(circle at 70% 0,rgba(255,255,255,.05),transparent 34%),#070707;
}
.dashboard::-webkit-scrollbar{width:0;height:0}
#dashboard.page.active{
  display:flex;
}
.page-head{
  position:relative;
  flex:0 0 clamp(238px,24vh,302px);
  min-height:0;
  max-height:none;
  display:flex;
  align-items:center;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.1);
  margin:0 -24px 16px;
  padding:56px 32px 26px;
  background:#111;
}
.page-head::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.84) 0%,rgba(0,0,0,.58) 39%,rgba(0,0,0,.1) 72%,rgba(0,0,0,.24) 100%);
}
.page-head>img{
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  width:80%;
  height:100%;
  object-fit:cover;
  object-position:center 40%;
  filter:grayscale(1) contrast(1.04);
  opacity:.86;
}
.page-head>div:not(.dashboard-userbar){
  position:relative;
  z-index:2;
}
.dashboard-userbar{
  position:absolute;
  z-index:3;
  left:32px;
  right:32px;
  top:0;
  height:72px;
  align-items:center;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:var(--muted);
  font-size:14px;
}
.dashboard-logo{
  display:flex;
  align-items:center;
  margin-left:-20px;
}
.dashboard-logo .brand-logo{
  height:85px;
  width:auto;
}
.dashboard-userbar>div{
  display:flex;
  gap:10px;
  align-items:center;
}
.dashboard-upgrade-btn{
  min-width:136px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 16px;
  border:2px solid rgba(170,83,0,.64);
  border-radius:12px;
  color:#161616;
  background:linear-gradient(180deg,#ff9f22 0%,#ff8610 48%,#ff7414 100%);
  box-shadow:inset 0 1px 0 rgba(255,210,126,.38),inset 0 -1px 0 rgba(183,68,0,.2);
  font-size:16px;
  font-weight:950;
  letter-spacing:0;
}
.dashboard-upgrade-btn svg{
  width:24px;
  height:24px;
  flex:0 0 24px;
}
.dashboard-upgrade-btn span{
  line-height:1;
}
.dashboard-upgrade-btn:hover{
  border-color:rgba(170,83,0,.72);
  background:linear-gradient(180deg,#ffaa2b 0%,#ff8b12 48%,#ff7616 100%);
  color:#161616;
}
.dashboard-userbar .avatar-btn{
  width:38px;
  height:38px;
  flex:0 0 38px;
}
.page-head h1,.gallery-header h1{
  margin:8px 0 12px;
  font-size:50px;
  line-height:1.05;
}
.page-head p{margin:0;color:#c7c1b8;font-size:15px;font-weight:700}
.dashboard-section-title{
  margin:0 0 14px;
  font-size:25px;
  line-height:1;
}
.stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin:0 0 22px}
.dashboard .stats{grid-template-columns:repeat(5,minmax(0,1fr))}
.stats article{
  border-radius:var(--radius);
  height:132px;
  padding:22px 22px;
  position:relative;
  overflow:hidden;
  background:linear-gradient(145deg,rgba(31,31,31,.98),rgba(16,16,16,.98));
}
.stats article[data-action]{cursor:pointer}
.stats article[data-action]:hover{
  border-color:rgba(255,255,255,.18);
  transform:translateY(-1px);
}
.stats article::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 12% 8%,rgba(255,255,255,.08),transparent 34%);
}
.stats article i{
  position:absolute;
  left:22px;
  top:22px;
  z-index:1;
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:6px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.11);
  color:transparent;
  font-size:0;
  font-style:normal;
  line-height:0;
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.stats article i::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  display:block;
  width:28px;
  height:28px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:28px 28px;
  opacity:.78;
  transform:translate(-50%,-50%);
}
.stats article:nth-child(1) i::before{
  background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='6' y='4' width='12' height='16' rx='1.8' stroke='%23d9d5cd' stroke-width='1.8'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h3' stroke='%23d9d5cd' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.stats article:nth-child(2) i::before{
  background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='5' width='16' height='14' rx='2' stroke='%23d9d5cd' stroke-width='1.8'/%3E%3Cpath d='M7 16l3.4-3.4a1.4 1.4 0 0 1 2 0L15 15.2l1-1a1.3 1.3 0 0 1 1.9 0L20 16.4' stroke='%23d9d5cd' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='9' cy='9' r='1.4' fill='%23d9d5cd'/%3E%3C/svg%3E");
}
.stats article:nth-child(3) i::before{
  background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 8.2 12 4l7 4.2v7.6L12 20l-7-4.2V8.2Z' stroke='%23d9d5cd' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M8 10.5h8M8 13.5h6' stroke='%23d9d5cd' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.stats article:nth-child(4) i::before{
  width:31px;
  height:31px;
  background-size:31px 31px;
  background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 8.5h8l-.7 10.2A1.8 1.8 0 0 1 13.5 20h-3a1.8 1.8 0 0 1-1.8-1.3L8 8.5Z' stroke='%23d9d5cd' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M6.5 8.5h11M10 6h4M10.5 11.5v4.8M13.5 11.5v4.8' stroke='%23d9d5cd' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.stats article:nth-child(5) i::before{
  background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.6 18h8a4 4 0 0 0 .5-8 5.4 5.4 0 0 0-10.3 1.4A3.4 3.4 0 0 0 8.6 18Z' stroke='%23d9d5cd' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.stats span,.stats b,.stats em{position:relative;z-index:1}
.stats span{
  display:block;
  min-height:38px;
  margin-left:52px;
  padding-top:9px;
  color:#b7b2a9;
  font-size:18px;
  font-weight:800;
  line-height:1.2;
}
.stats b{
  display:block;
  margin:7px 0 0 52px;
  color:var(--accent);
  font-size:32px;
  line-height:1;
}
.stats b small{font-size:12px;color:#ddd;margin-left:4px;font-weight:850}
.stats em{display:none}
.storage-stat{padding-right:116px!important}
.storage-stat b{
  display:flex;
  align-items:baseline;
  gap:5px;
  flex-wrap:nowrap;
  margin-bottom:0;
  font-size:29px;
  white-space:nowrap;
}
.storage-stat b small{
  display:inline-flex;
  width:auto;
  min-width:max-content;
  margin:0;
  line-height:1;
  vertical-align:middle;
  font-size:11px;
  white-space:nowrap;
}
.storage-stat strong{
  position:absolute;
  z-index:1;
  right:30px;
  top:50%;
  width:80px;
  height:80px;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#d8d3ca;
  font-size:13px;
  font-weight:900;
  background:conic-gradient(var(--accent) 0 var(--storage-percent,36%),rgba(255,255,255,.13) var(--storage-percent,36%) 100%);
}
.storage-stat strong::before{
  content:"";
  position:absolute;
  inset:9px;
  border-radius:50%;
  background:#171716;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}
.storage-stat strong{isolation:isolate;color:transparent}
.storage-stat strong::after{
  content:attr(data-label);
  position:absolute;
  inset:0;
  z-index:1;
  display:grid;
  place-items:center;
  color:#d8d3ca;
  line-height:1;
}
.dashboard-grid{
  flex:1 1 auto;
  min-height:0;
  display:flex;
}
.gallery-list{
  display:flex;
  flex:1 1 auto;
  min-height:0;
  flex-direction:column;
}
.section-title{display:flex;justify-content:space-between;align-items:center;margin:4px 0 14px}
.section-title h2,.quick-panel h2{font-size:24px;margin:0}
.gallery-tools{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:clamp(8px,1.5vw,20px);
  margin-bottom:12px;
}
.dashboard .gallery-tools{
  flex-wrap:nowrap;
}
.dashboard .gallery-tabs{
  flex:1 1 0;
  min-width:0;
  overflow-x:auto;
  flex-wrap:nowrap;
  scrollbar-width:none;
  gap:clamp(6px,1.2vw,18px);
}
.dashboard-toolbar-right{
  display:flex;
  align-items:center;
  gap:clamp(6px,1vw,14px);
  margin-left:auto;
  flex-shrink:0;
}
.dashboard .gallery-tabs::-webkit-scrollbar{display:none}
.dashboard .gallery-search{
  flex:0 0 auto;
  min-width:140px;
}
.dashboard .gallery-search input{
  width:clamp(120px,14vw,360px);
  max-width:100%;
  padding-left:36px;
}
.dashboard .gallery-sort{
  flex:0 0 auto;
}
.dashboard .gallery-sort .custom-select-trigger{
  min-width:80px;
  width:132px;
}
.gallery-tabs,.gallery-search{
  display:flex;
  align-items:center;
  gap:18px;
}
.gallery-tabs h2{margin:0 14px 0 0;font-size:25px;white-space:nowrap}
.gallery-tabs button{
  border:0;
  background:transparent;
  color:var(--muted);
  padding:10px 0;
  font-weight:800;
  position:relative;
  white-space:nowrap;
}
.gallery-tabs button.active{color:#fff}
.gallery-tabs button.active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:2px;
  height:2px;
  background:var(--accent);
}
.gallery-tabs .trash-link{
  margin-left:2px;
  color:#d6d1c8;
  font-size:13px;
}
.gallery-tabs .trash-link::before{
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  margin-right:7px;
  border-radius:50%;
  background:var(--accent);
  vertical-align:middle;
}
.gallery-search input{
  width:280px;
  height:40px;
  padding-left:50px;
  background:#1b1c20;
}
.gallery-sort{
  position:relative;
  margin-left:auto;
  flex:0 0 auto;
}
.gallery-sort .custom-select-trigger{
  width:132px;
  min-width:132px;
  height:40px;
  background:#1b1c20;
  font-size:13px;
  font-weight:900;
}
.gallery-sort .custom-select-menu{
  width:132px;
  min-width:132px;
  z-index:100;
}
.gallery-sort .custom-select-menu button{
  width:100%;
  min-width:0;
}
.gallery-search{
  position:relative;
}
.gallery-search::before{
  content:"";
  position:absolute;
  left:10px;
  top:50%;
  width:10px;
  height:10px;
  border:2px solid rgba(214,209,200,.72);
  border-radius:50%;
  transform:translateY(-56%);
  pointer-events:none;
}
.gallery-search::after{
  content:"";
  position:absolute;
  left:20px;
  top:23px;
  width:8px;
  height:2px;
  border-radius:999px;
  background:rgba(214,209,200,.72);
  transform:rotate(45deg);
  transform-origin:left center;
  pointer-events:none;
}
.gallery-search input:focus{
  border-color:rgba(242,118,34,.45);
  box-shadow:0 0 0 3px rgba(242,118,34,.08);
}
.cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.dashboard .cards{
  flex:0 0 auto;
  grid-template-columns:repeat(5,minmax(0,1fr));
  grid-auto-rows:auto;
  min-height:0;
  padding-bottom:24px;
}
.dashboard .gallery-card,
.dashboard .create-card{
  aspect-ratio:.81;
  min-height:320px;
}
.gallery-card,.create-card{
  height:auto;
  min-height:0;
  border-radius:var(--radius);
  overflow:hidden;
  position:relative;
  display:flex;
  flex-direction:column;
  transition:.22s var(--ease);
}
.gallery-card{cursor:pointer}
.gallery-card:hover,.create-card:hover{transform:translateY(-5px);border-color:rgba(242,118,34,.58)}
.gallery-cover-frame{
  position:relative;
  width:100%;
  flex:0 0 auto;
  aspect-ratio:1.28;
  min-height:0;
  overflow:hidden;
  background:#111216;
}
.gallery-cover-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:none;
  opacity:.9;
  transition:opacity .24s var(--ease);
  transform:scale(var(--cover-scale,1));
  transform-origin:center center;
}
.gallery-cover-frame.cover-adjusted img{
  position:absolute;
  left:calc(50% + var(--cover-offset-x,0%));
  top:calc(50% + var(--cover-offset-y,0%));
  width:var(--cover-width,100%);
  height:var(--cover-height,100%);
  object-fit:contain;
  transform:translate(-50%,-50%);
}
.gallery-cover-frame img,
.photo-grid .photo-card img{
  -webkit-user-drag:none;
  user-select:none;
}
.gallery-card:hover .gallery-cover-frame img{opacity:1}
.gallery-empty-cover{
  position:relative;
  height:70%;
  overflow:hidden;
  background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.05),transparent 34%),linear-gradient(180deg,#18191d,#111216);
}
.gallery-empty-cover span{
  position:absolute;
  border:2px solid rgba(255,255,255,.22);
  background:linear-gradient(180deg,rgba(28,29,32,.7),rgba(14,15,18,.9));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035);
}
.gallery-empty-card-main{
  left:50%;
  top:50%;
  z-index:2;
  width:92px;
  height:92px;
  border-radius:16px;
  transform:translate(-50%,-50%);
}
.gallery-empty-card-main::before{
  content:"";
  position:absolute;
  left:29px;
  top:24px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:rgba(255,255,255,.28);
}
.gallery-empty-card-main::after{
  content:"";
  position:absolute;
  left:21px;
  bottom:23px;
  width:52px;
  height:34px;
  background:rgba(255,255,255,.28);
  clip-path:polygon(0 100%,34% 42%,50% 70%,70% 28%,100% 100%);
}
.gallery-empty-card-left,
.gallery-empty-card-right{
  top:50%;
  width:68px;
  height:84px;
  border-radius:14px;
}
.gallery-empty-card-left{
  left:50%;
  transform:translate(-116%,-43%) rotate(-14deg);
}
.gallery-empty-card-right{
  right:50%;
  transform:translate(116%,-43%) rotate(14deg);
}
.gallery-card:hover .gallery-empty-cover{
  background:radial-gradient(circle at 50% 42%,rgba(242,118,34,.08),transparent 36%),linear-gradient(180deg,#1a1b20,#111216);
}
.gallery-card .body{padding:14px 16px;position:relative;flex:0 0 auto}
.gallery-card h3{margin:0 0 9px;font-size:20px;line-height:1.16}
.gallery-card p,.gallery-card small{display:block;color:var(--muted);font-size:15px;line-height:1.35}
.gallery-card small{margin-top:8px}
.gallery-card .badge{
  position:absolute;
  right:12px;
  bottom:10px;
}
.badge{
  display:inline-flex;
  align-items:center;
  border-radius:6px;
  padding:4px 8px;
  font-size:12px;
  font-weight:900;
}
.orange{background:rgba(242,118,34,.14);color:var(--accent);border:1px solid rgba(242,118,34,.42)}
.status-badge.pending-send{
  background:rgba(154,154,160,.14);
  color:#c8c8cd;
  border:1px solid rgba(154,154,160,.42);
}
.status-badge.selecting{
  background:rgba(242,118,34,.14);
  color:#f27622;
  border:1px solid rgba(242,118,34,.42);
}
.status-badge.retouching{
  background:rgba(76,141,255,.14);
  color:#76a8ff;
  border:1px solid rgba(76,141,255,.42);
}
.status-badge.delivered{
  background:rgba(35,184,200,.14);
  color:#55d4df;
  border:1px solid rgba(35,184,200,.42);
}
.status-badge.archived{
  background:rgba(55,178,108,.14);
  color:#63d990;
  border:1px solid rgba(55,178,108,.42);
}
.gallery-empty-result{
  grid-column:1/-1;
  min-height:260px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:8px;
  border:1px dashed rgba(255,255,255,.12);
  border-radius:var(--radius);
  background:rgba(255,255,255,.025);
  color:#f4eee7;
  text-align:center;
}
.gallery-empty-result strong{
  font-size:18px;
  font-weight:900;
}
.gallery-empty-result span{
  color:#8f8980;
  font-size:13px;
  font-weight:760;
}
.green{color:var(--green)!important}
.create-card{
  display:grid;
  place-items:center;
  border-style:dashed;
  border-color:rgba(255,255,255,.22);
  background:#10100f;
}
.create-inner{text-align:center;color:var(--muted);padding:20px}
.create-inner b{
  position:relative;
  display:block;
  width:62px;
  height:62px;
  margin:0 auto 14px;
  border:1px solid rgba(242,118,34,.55);
  border-radius:50%;
  font-size:0;
}
.create-inner b::before,
.create-inner b::after{
  content:"";
  position:absolute;
  background:var(--accent);
  border-radius:2px;
}
.create-inner b::before{
  left:50%;
  top:14px;
  bottom:14px;
  width:4px;
  transform:translateX(-50%);
}
.create-inner b::after{
  top:50%;
  left:14px;
  right:14px;
  height:4px;
  transform:translateY(-50%);
}
.create-inner h3{margin:0;font-size:16px;transform:translateY(-4px)}
.quick-panel{border-radius:var(--radius);padding:20px}
.quick-panel button:not(.ghost){
  display:grid;
  grid-template-columns:56px 1fr;
  align-items:center;
  gap:12px;
  width:100%;
  background:#121211;
  border:1px solid transparent;
  border-radius:var(--radius);
  padding:15px;
  text-align:left;
  color:#ddd;
  margin-top:12px;
}
.quick-panel button:hover{border-color:rgba(242,118,34,.38)}
.quick-panel button b{font-size:30px;color:var(--accent)}
.quick-panel button span{color:var(--muted)}
.usage{margin-top:24px}
.usage div{display:flex;justify-content:space-between;align-items:center;color:var(--muted)}
.usage b{font-size:28px;color:#fff}
progress{width:100%;height:8px;border:0;border-radius:20px;overflow:hidden;background:#302f2c;margin:14px 0}
progress::-webkit-progress-bar{background:#302f2c}
progress::-webkit-progress-value{background:var(--accent)}

.gallery-page{padding:72px 0 0;max-width:none!important}
body[data-page="gallery"] .gallery-page{padding-top:0}
.gallery-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;min-height:calc(100vh - 72px);background:#111214}
body[data-page="gallery"] .gallery-layout{grid-template-columns:minmax(0,1fr) var(--gallery-side-width)}
body[data-page="gallery"] .gallery-layout{
  height:100vh;
  min-height:100vh;
  overflow:hidden;
}
body.recycle-preview-mode{
  --gallery-side-width:0px;
}
body.recycle-preview-mode .settings-panel,
body.recycle-preview-mode .task-float{
  display:none!important;
}
body.recycle-preview-mode .app-topbar{
  right:0;
}
body.recycle-preview-mode .gallery-photo-filters,
body.recycle-preview-mode .gallery-view-tools .name-toggle:first-child,
body.recycle-preview-mode .gallery-tools-menu .name-toggle:last-child,
body.recycle-preview-mode .add-photo-card,
body.recycle-preview-mode .photo-empty-upload,
body.recycle-preview-mode .photo-more-btn,
body.recycle-preview-mode #exportActions,
body.recycle-preview-mode .preview-tool[data-action="preview-toggle-recommend"],
body.recycle-preview-mode .preview-tool[data-action="preview-toggle-required"],
body.recycle-preview-mode .preview-tool[data-action="preview-delete-photo"]{
  display:none!important;
}
.recycle-preview-banner{
  position:relative;
  z-index:28;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:0;
  padding:12px 24px;
  border-bottom:1px solid rgba(242,118,34,.26);
  background:rgba(26,24,22,.94);
  box-shadow:0 10px 28px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(14px);
}
.recycle-preview-banner strong{
  display:block;
  color:#fff;
  font-size:15px;
  line-height:1.25;
  font-weight:950;
}
.recycle-preview-banner span{
  display:block;
  margin-top:3px;
  color:#bdb6ad;
  font-size:12px;
  line-height:1.35;
  font-weight:780;
}
.recycle-preview-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
.gallery-main{
  position:relative;
  padding:26px 30px 88px;
  min-width:0;
}
.photo-grid{
  position:relative;
}
.gallery-drag-upload-overlay{
  position:fixed;
  display:grid;
  place-items:center;
  padding:18px;
  box-sizing:border-box;
  border:1px dashed rgba(242,118,34,.7);
  border-radius:14px;
  background:rgba(20,21,25,.5);
  color:#f5efe6;
  font-size:18px;
  font-weight:900;
  line-height:1.15;
  letter-spacing:0;
  text-align:center;
  backdrop-filter:blur(2px);
  pointer-events:none;
  z-index:38;
}
.gallery-main.drag-upload-active .photo-card{
  filter:brightness(.82);
}
body[data-page="gallery"] .gallery-main{
  height:100vh;
  padding:54px 0 0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.gallery-photo-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow-y:scroll;
  overflow-x:hidden;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:rgba(150,150,150,.45) transparent;
}
body[data-page="gallery"] .gallery-main.no-photo-scroll{
  overflow:hidden;
}
body[data-page="gallery"] .gallery-main.no-photo-scroll .gallery-photo-scroll{
  overflow-y:hidden;
}
.gallery-photo-scroll::-webkit-scrollbar{width:6px}
.gallery-photo-scroll::-webkit-scrollbar-track{background:transparent}
.gallery-photo-scroll::-webkit-scrollbar-thumb{background:rgba(150,150,150,.45);border-radius:999px}
.gallery-header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.08)}
body[data-page="gallery"] .gallery-header{display:none}
.gallery-header h1{font-size:28px}
.gallery-actions{display:flex;gap:10px;flex-wrap:wrap}
.tabs{display:flex;gap:24px;border-bottom:1px solid var(--line);margin:16px 0}
body[data-page="gallery"] .tabs{display:none}
.tab{border:0;background:transparent;color:var(--muted);padding:14px 0;position:relative}
.tab.active{color:#fff;font-weight:950}
.tab.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--accent)}
.tab span{color:var(--accent)}
.toolbar{display:flex;align-items:center;gap:10px;margin:16px 0;flex-wrap:wrap}
body[data-page="gallery"] .toolbar{display:none}
.toolbar label{color:var(--muted);font-size:13px}
select,input,textarea{
  background:#1b1c20;
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:#fff;
  padding:12px;
  outline:none;
}
textarea{min-height:124px;resize:vertical}
input:focus,textarea:focus,select:focus{border-color:rgba(242,118,34,.78);box-shadow:0 0 0 3px rgba(242,118,34,.1)}
.gallery-photo-controlbar{
  position:sticky;
  top:0;
  z-index:32;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  padding:6px var(--gallery-photo-side-gap,30px) 6px;
  min-width:0;
  background:rgba(5,5,5,.82);
  backdrop-filter:blur(18px);
  box-shadow:0 1px 0 rgba(255,255,255,.08);
}
.gallery-photo-filters{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  flex:0 1 auto;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
}
.gallery-photo-filters::-webkit-scrollbar{
  display:none;
}
.gallery-photo-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  min-width:0;
  flex:1 1 auto;
}
.gallery-tools-compact{
  position:relative;
  display:none;
  flex:0 0 auto;
}
.gallery-tools-trigger{
  width:36px;
  height:32px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  background:rgba(20,20,20,.76);
  color:#f1eee8;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 12px 28px rgba(0,0,0,.26);
  backdrop-filter:blur(14px);
}
.gallery-tools-trigger:hover,
.gallery-tools-compact.open .gallery-tools-trigger{
  border-color:rgba(242,118,34,.62);
  background:rgba(31,30,29,.94);
}
.gallery-tools-chevron,
.gallery-tools-trigger .layout-icon-square{
  width:18px;
  height:18px;
  display:block;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.5 6.75 9 11.25l4.5-4.5' fill='none' stroke='%23f1eee8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px 18px no-repeat;
  transform:rotate(0deg);
  transform-origin:center;
  transition:transform .18s var(--ease);
}
.gallery-tools-compact.open .gallery-tools-chevron,
.gallery-tools-compact.open .gallery-tools-trigger .layout-icon-square{
  transform:rotate(180deg);
}
.gallery-tools-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  width:150px;
  display:none;
  padding:8px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  background:rgba(17,17,18,.98);
  box-shadow:0 18px 42px rgba(0,0,0,.44),inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(18px);
  z-index:80;
}
.gallery-tools-compact.open .gallery-tools-menu{
  display:grid;
  gap:7px;
}
.tools-menu-row{
  min-height:30px;
  display:flex;
  align-items:center;
}
.tools-menu-row.layout-row{
  justify-content:center;
  min-height:46px;
  overflow:visible;
}
.tools-menu-row.sort-title-row{
  min-height:18px;
  color:#bdb8ae;
  font-size:12px;
  font-weight:820;
}
.gallery-tools-menu .gallery-layout-toggle{
  width:130px;
  height:52px;
  flex:0 0 130px;
  display:grid;
  grid-template-columns:56px 56px;
  place-content:center;
  align-items:center;
  gap:6px;
  padding:4px;
  justify-content:center;
  border-radius:11px;
}
body[data-page="gallery"] .gallery-tools-menu .gallery-layout-toggle{
  width:130px;
  height:40px;
  display:grid;
  grid-template-columns:58px 58px;
  place-content:center;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:4px;
}
body[data-page="gallery"] .gallery-tools-menu .gallery-layout-toggle button{
  width:58px;
  height:32px;
  display:grid;
  place-items:center;
  padding:0;
  border-radius:8px;
}
body[data-page="gallery"] .gallery-tools-menu .layout-icon{
  width:20px;
  height:20px;
  display:block;
  transform:none;
}
body[data-page="gallery"] .gallery-tools-menu .layout-icon-masonry{
  background:
    linear-gradient(currentColor 0 0) 2px 2px/5px 5px no-repeat,
    linear-gradient(currentColor 0 0) 13px 2px/5px 8px no-repeat,
    linear-gradient(currentColor 0 0) 2px 11px/5px 7px no-repeat,
    linear-gradient(currentColor 0 0) 13px 14px/5px 4px no-repeat;
}
body[data-page="gallery"] .gallery-tools-menu .layout-icon-square{
  background:
    linear-gradient(currentColor 0 0) 2px 2px/6px 6px no-repeat,
    linear-gradient(currentColor 0 0) 12px 2px/6px 6px no-repeat,
    linear-gradient(currentColor 0 0) 2px 12px/6px 6px no-repeat,
    linear-gradient(currentColor 0 0) 12px 12px/6px 6px no-repeat;
}
.gallery-tools-menu .custom-select,
.gallery-tools-menu .custom-select-trigger{
  width:100%;
}
.gallery-tools-menu .custom-select-trigger{
  min-width:0;
  height:38px;
  font-size:13px;
  font-weight:900;
  padding:0 11px 0 12px;
}
.gallery-tools-menu .name-toggle{
  height:24px;
  min-height:24px;
  margin:0;
  color:#d8d3ca;
}
.gallery-tools-menu .name-toggle + .name-toggle{
  margin-top:-4px;
}
.gallery-photo-filters button{
  height:26px;
  min-width:64px;
  flex:0 0 auto;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.05);
  border-radius:7px;
  background:#24252a;
  color:#aaa7a0;
  font-size:12px;
  font-weight:820;
  letter-spacing:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  box-shadow:none;
  white-space:nowrap;
}
.gallery-photo-filters button.active{
  border-color:rgba(242,118,34,.64);
  background:rgba(242,118,34,.14);
  color:var(--accent);
  box-shadow:inset 0 -2px 0 rgba(242,118,34,.78);
}
.gallery-photo-filters button span{
  color:#777;
  font-weight:780;
}
.gallery-photo-filters button.active span{
  color:var(--accent);
}
.gallery-photo-filters .new-filter{
  min-width:68px;
  color:#8e8e8e;
  background:#24252a;
  border-style:solid;
  border-color:rgba(255,255,255,.05);
}
.gallery-photo-filters .new-filter i{
  color:#8e8e8e;
  font-style:normal;
  font-size:15px;
  line-height:1;
  font-weight:400;
}
.gallery-photo-actions .gallery-view-tools,
.gallery-photo-actions .gallery-layout-toggle{
  flex:0 0 auto;
}
.photo-grid{
  display:flex;
  align-items:flex-start;
  gap:22px;
  margin-top:0;
  width:100%;
  box-sizing:border-box;
  padding:8px var(--gallery-photo-side-gap,30px) 104px;
}
.photo-grid.masonry-layout{
  display:flex;
}
.masonry-column{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:22px;
}
.photo-grid.square-layout{
  display:grid;
  grid-template-columns:repeat(var(--photo-columns,5),minmax(0,1fr));
  gap:22px!important;
  column-gap:22px!important;
  row-gap:22px!important;
  column-count:auto;
  padding:8px var(--gallery-photo-side-gap,30px) 104px;
  box-sizing:border-box;
  align-items:start;
}
.photo-grid.row-flow:not(.square-layout){
  display:grid;
  grid-template-columns:repeat(var(--photo-columns,5),minmax(0,1fr));
  gap:22px!important;
  column-count:auto;
  box-sizing:border-box;
  align-items:start;
}
.photo-grid.empty-state{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  place-items:center;
  align-content:center;
  position:relative;
  min-height:calc(100vh - 72px);
  padding:0 var(--gallery-photo-side-gap,30px);
}
.photo-grid.workflow-empty-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  place-items:center;
  align-content:center;
  position:relative;
  min-height:calc(100vh - 72px);
  padding:0 var(--gallery-photo-side-gap,30px);
}
body[data-page="gallery"] .gallery-main.no-photo-scroll .photo-grid.empty-state,
body[data-page="gallery"] .gallery-main.no-photo-scroll .photo-grid.workflow-empty-grid{
  min-height:calc(100vh - 126px);
  height:calc(100vh - 126px);
}
.photo-empty-upload{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:grid;
  justify-items:center;
  width:min(520px,100%);
  text-align:center;
}
.empty-upload-button{
  width:clamp(180px,24vw,280px);
  aspect-ratio:1/1;
  display:grid;
  place-items:center;
  padding:0;
  border:1px dashed rgba(255,255,255,.38);
  border-radius:var(--radius);
  background:#202126;
  cursor:pointer;
  transition:.22s var(--ease);
}
.empty-upload-button:hover{
  border-color:rgba(242,118,34,.74);
  background:linear-gradient(180deg,rgba(242,118,34,.08),rgba(12,12,12,.92));
  transform:translateY(-2px);
}
.empty-upload-button .add-photo-plus{
  width:clamp(72px,24%,104px);
  border-color:rgba(242,118,34,.72);
}
.photo-empty-upload p{
  position:absolute;
  top:calc(100% + 18px);
  left:50%;
  transform:translateX(-50%);
  width:max-content;
  max-width:min(520px,82vw);
  margin:0;
  color:#a8a39b;
  font-size:15px;
  font-weight:760;
  line-height:1.5;
  letter-spacing:0;
}
.workflow-empty-card{
  width:min(640px,100%);
  min-height:320px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:18px;
  text-align:center;
  color:#f4f1ea;
}
.workflow-empty-visual{
  position:relative;
  width:340px;
  height:220px;
  margin-bottom:10px;
}
.workflow-folder,
.workflow-photo{
  position:absolute;
  border:3px solid rgba(255,255,255,.22);
  border-radius:24px;
  background:linear-gradient(180deg,rgba(28,29,32,.68),rgba(15,16,18,.88));
  box-shadow:
    0 18px 42px rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(255,255,255,.025);
}
.workflow-folder{
  left:88px;
  top:24px;
  z-index:2;
  width:164px;
  height:164px;
  border-color:rgba(255,255,255,.28);
}
.workflow-folder::before{
  content:"";
  position:absolute;
  left:50%;
  top:42px;
  width:22px;
  height:22px;
  transform:translateX(-44px);
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.28);
}
.workflow-folder::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:46px;
  width:92px;
  height:58px;
  transform:translateX(-50%);
  border-radius:12px 12px 14px 14px;
  background:rgba(255,255,255,.28);
  clip-path:polygon(0 100%,32% 38%,48% 68%,66% 22%,100% 100%);
}
.workflow-photo{
  z-index:1;
  width:112px;
  height:138px;
  border-color:rgba(255,255,255,.22);
  border-radius:20px;
}
.workflow-photo-a{
  left:42px;
  top:52px;
  transform:rotate(-14deg);
}
.workflow-photo-b{
  right:42px;
  top:52px;
  transform:rotate(14deg);
}
.workflow-empty-card h3{
  margin:0;
  font-size:30px;
  line-height:1.1;
  font-weight:900;
  letter-spacing:0;
}
.workflow-empty-card p{
  margin:0;
  font-size:16px;
  line-height:1.5;
  color:#9b988f;
  font-weight:700;
}
.photo-card{
  position:relative;
  display:block;
  width:100%;
  margin:0 0 22px;
  break-inside:avoid;
  aspect-ratio:auto;
  min-height:0;
  background:transparent;
  overflow:visible;
  border:0;
  border-radius:0;
  cursor:pointer;
  transition:.22s var(--ease);
}
.photo-frame{
  position:relative;
  width:100%;
  height:auto;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  background:#1a1b1f;
  transition:.22s var(--ease);
}
.photo-card:nth-child(10n+1) .photo-frame,
.photo-card:nth-child(10n+4) .photo-frame,
.photo-card:nth-child(10n+8) .photo-frame{
  aspect-ratio:4/3;
}
.photo-card:nth-child(10n+2) .photo-frame,
.photo-card:nth-child(10n+5) .photo-frame,
.photo-card:nth-child(10n+9) .photo-frame{
  aspect-ratio:16/9;
}
.photo-card:nth-child(10n+3) .photo-frame,
.photo-card:nth-child(10n+7) .photo-frame{
  aspect-ratio:3/4;
}
.photo-card:nth-child(10n+6) .photo-frame{
  aspect-ratio:2/3;
}
.photo-card:nth-child(10n) .photo-frame{
  aspect-ratio:5/2;
}
.photo-grid.square-layout .photo-card{
  aspect-ratio:auto;
  margin:0;
  box-sizing:border-box;
}
.photo-grid.row-flow:not(.square-layout) .photo-card{
  margin:0;
  box-sizing:border-box;
}
.photo-grid.masonry-layout .photo-card{
  margin:0;
  box-sizing:border-box;
}
.photo-grid.square-layout .photo-frame{
  aspect-ratio:1/1!important;
  background:#202126;
}
.photo-grid.square-layout .photo-card img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}
.photo-grid.show-names .photo-card{
  aspect-ratio:auto;
}
.photo-grid.show-names .photo-card:nth-child(10n+1) .photo-frame,
.photo-grid.show-names .photo-card:nth-child(10n+4) .photo-frame,
.photo-grid.show-names .photo-card:nth-child(10n+8) .photo-frame{aspect-ratio:4/3}
.photo-grid.show-names .photo-card:nth-child(10n+2) .photo-frame,
.photo-grid.show-names .photo-card:nth-child(10n+5) .photo-frame,
.photo-grid.show-names .photo-card:nth-child(10n+9) .photo-frame{aspect-ratio:16/9}
.photo-grid.show-names .photo-card:nth-child(10n+3) .photo-frame,
.photo-grid.show-names .photo-card:nth-child(10n+7) .photo-frame{aspect-ratio:3/4}
.photo-grid.show-names .photo-card:nth-child(10n+6) .photo-frame{aspect-ratio:2/3}
.photo-grid.show-names .photo-card:nth-child(10n) .photo-frame{aspect-ratio:5/2}
.photo-grid.show-names.square-layout .photo-frame{
  aspect-ratio:1/1!important;
}
.photo-grid.show-names:not(.square-layout) .photo-card{
  margin-bottom:22px;
}
.photo-grid.show-names.row-flow:not(.square-layout) .photo-card{
  margin-bottom:0;
}
.photo-grid.show-names.masonry-layout:not(.square-layout) .photo-card{
  margin-bottom:0;
}
.photo-grid.show-names.square-layout{
  gap:22px!important;
  column-gap:22px!important;
  row-gap:22px!important;
  padding:8px 30px 104px;
}
.photo-card img{width:100%;height:100%;object-fit:cover;filter:none;opacity:1;transform:none;transition:.25s var(--ease)}
.photo-grid:not(.square-layout) .photo-frame{
  aspect-ratio:auto!important;
}
.photo-grid:not(.square-layout) .photo-card img{
  height:auto;
  object-fit:contain;
  transform:translate(0,0);
}
.photo-name{
  padding:7px 2px 0;
  color:#f0ede8;
  font-size:10px;
  font-weight:780;
  letter-spacing:0;
  line-height:1.2;
  text-align:center;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  pointer-events:none;
}
.photo-card:hover{transform:translateY(-3px)}
.photo-card:hover .photo-frame{border-color:var(--accent)}
.photo-card:hover img{
  filter:brightness(.82);
}
.photo-card.selected{
  border-color:transparent;
  box-shadow:none;
}
.photo-card.selected .photo-frame{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(242,118,34,.82),0 0 0 5px rgba(242,118,34,.15);
}
.photo-card.selected img{
  filter:brightness(.68);
  opacity:1;
}
.photo-card.selected:hover img{
  filter:brightness(.68);
  opacity:1;
}
.photo-card.selected .photo-frame::after{
  content:"";
  position:absolute;
  right:9px;
  bottom:9px;
  z-index:5;
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 6px 14px rgba(0,0,0,.34);
}
.photo-card.selected .photo-frame::before{
  content:"";
  position:absolute;
  right:9px;
  bottom:9px;
  z-index:6;
  width:24px;
  height:24px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='7 12.5 10.5 16 17 8.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") center/24px 24px no-repeat;
  transform:none;
}
.photo-status-badge{
  position:absolute;
  z-index:3;
  min-width:26px;
  height:26px;
  padding:0 7px 0 4px;
  border-radius:6px;
  background-color:rgba(0,0,0,.58);
  box-shadow:0 6px 16px rgba(0,0,0,.24), inset 0 0 0 1px rgba(255,255,255,.08);
  pointer-events:none;
  display:flex;
  align-items:center;
  gap:4px;
}
.recommend-badge{
  left:8px;
  top:8px;
}
.required-badge{
  left:8px;
  bottom:8px;
}
.photo-card.has-customer-note .required-badge,
.required-badge.note-offset{
  bottom:42px;
}
.photo-status-badge i{
  width:18px;
  height:18px;
  flex:0 0 18px;
  background:center/contain no-repeat;
}
.recommend-badge i{
  background-image:url("./assets/menu-recommend.svg");
}
.required-badge i{
  background-image:url("./assets/menu-required.svg");
}
.photo-status-badge b{
  color:var(--accent);
  font-size:11px;
  line-height:1;
  font-weight:900;
  white-space:nowrap;
}
.photo-submitted-badge{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  padding:8px 5px;
  background:var(--accent);
  color:#120904;
  font-size:12px;
  font-weight:950;
  line-height:1;
  letter-spacing:2px;
  text-align:center;
  writing-mode:vertical-rl;
  border-radius:0 8px 8px 0;
  pointer-events:none;
}
.photo-card.square-layout .photo-submitted-badge,
.photo-grid.square-layout .photo-card .photo-submitted-badge{
  left:0;
}
.photo-more-btn{
  position:absolute;
  right:8px;
  top:8px;
  z-index:4;
  width:34px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid rgba(255,255,255,.12);
  border-radius:6px;
  background:rgba(0,0,0,.62);
  color:#fff;
  font-size:0;
  line-height:1;
  font-weight:950;
  letter-spacing:0;
  opacity:0;
  transform:translateY(-3px);
  transition:.18s var(--ease);
}
.photo-more-btn::before{
  content:"•••";
  display:block;
  color:currentColor;
  font-size:13px;
  line-height:1;
  letter-spacing:2px;
  text-indent:2px;
}
.photo-card:hover .photo-more-btn,
.gallery-card:hover .gallery-more-btn,
.photo-more-btn:focus-visible{
  opacity:1;
  transform:translateY(0);
}
.photo-more-btn:hover{
  border-color:rgba(242,118,34,.58);
  background:rgba(242,118,34,.18);
  color:var(--accent);
}
.photo-grid.masonry-layout .add-photo-card{
  aspect-ratio:1/1;
}
.add-photo-card .photo-frame{
  width:100%;
  height:100%;
  aspect-ratio:auto!important;
  min-height:0;
  display:grid;
  place-items:center;
  border:1px dashed rgba(255,255,255,.34);
  background:#202126;
}
.photo-grid.square-layout .add-photo-card{
  aspect-ratio:auto;
}
.photo-grid.square-layout .add-photo-card .photo-frame{
  aspect-ratio:1/1!important;
  height:auto;
}
.add-photo-card:hover .photo-frame{
  border-color:rgba(242,118,34,.72);
  background:linear-gradient(180deg,rgba(242,118,34,.08),rgba(12,12,12,.92));
}
.add-photo-card .photo-frame::before{
  display:none;
}
.add-photo-plus{
  position:relative;
  width:clamp(54px,20%,96px);
  aspect-ratio:1/1;
  border:1px solid rgba(242,118,34,.68);
  border-radius:50%;
  display:block;
  color:transparent;
  font-size:0;
  line-height:0;
}
.add-photo-plus::before,
.add-photo-plus::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:45%;
  height:clamp(3px,.45vw,4px);
  border-radius:3px;
  background:var(--accent);
  transform:translate(-50%,-50%);
}
.add-photo-plus::after{
  width:clamp(3px,.45vw,4px);
  height:45%;
}
.add-photo-menu{
  position:fixed;
  z-index:120;
  min-width:128px;
  padding:5px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#202126;
  box-shadow:0 14px 34px rgba(0,0,0,.42);
}
.add-photo-menu button{
  width:100%;
  height:31px;
  border:0;
  border-radius:5px;
  background:transparent;
  color:#fff;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 9px;
  font-size:13px;
  font-weight:760;
  text-align:left;
}
.add-photo-menu button:hover{
  background:#2a2b31;
}
.add-photo-menu .menu-icon{
  width:22px;
  height:22px;
  flex-basis:22px;
  background:center/contain no-repeat;
}
.add-photo-menu .menu-icon::before,
.add-photo-menu .menu-icon::after{
  display:none;
}
.add-photo-menu .folder-icon{
  background-image:url("./assets/menu-add-folder.svg");
}
.add-photo-menu .image-icon{
  background-image:url("./assets/menu-add-photo.svg");
}
.menu-icon{
  position:relative;
  width:15px;
  height:15px;
  flex:0 0 15px;
  color:#fff;
}
.folder-icon::before{
  content:"";
  position:absolute;
  left:1px;
  top:5px;
  width:13px;
  height:9px;
  border:1.5px solid currentColor;
  border-radius:2px;
}
.folder-icon::after{
  content:"";
  position:absolute;
  left:2px;
  top:2px;
  width:6px;
  height:5px;
  border:1.5px solid currentColor;
  border-bottom:0;
  border-radius:2px 2px 0 0;
}
.image-icon::before{
  content:"";
  position:absolute;
  inset:2px 1px;
  border:1.5px solid currentColor;
  border-radius:2px;
}
.image-icon::after{
  content:"";
  position:absolute;
  left:4px;
  bottom:4px;
  width:8px;
  height:5px;
  background:
    linear-gradient(135deg,transparent 48%,currentColor 50%,currentColor 60%,transparent 62%) left bottom/8px 5px no-repeat,
    radial-gradient(circle,currentColor 0 1.4px,transparent 1.6px) 9px 2px/4px 4px no-repeat;
}
.photo-card:hover img{opacity:1;transform:none}
.photo-card.selected:hover img{opacity:1}
.photo-frame::before{display:none}
.photo-card.selected .photo-frame::before{display:block}
.photo-card::after{
  content:"+";
  position:absolute;
  right:10px;
  bottom:10px;
  z-index:2;
  width:34px;
  height:34px;
  border:1px solid rgba(242,118,34,.65);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--accent);
  background:rgba(0,0,0,.5);
  opacity:0;
  transform:scale(.7);
  transition:.2s var(--ease);
}
.photo-card:hover::after{opacity:1;transform:scale(1)}
body[data-page="gallery"] .photo-card::after{
  display:none;
}
.photo-card .num{position:absolute;top:8px;left:8px;z-index:2;font-weight:950;font-size:13px}
.photo-card .check{position:absolute;top:8px;right:8px;z-index:3;background:var(--accent);color:#170904;border-radius:5px;width:20px;height:20px;display:grid;place-items:center;font-size:12px;font-weight:950}
body[data-page="gallery"] .photo-card .num,
body[data-page="gallery"] .photo-card .check{
  display:none;
}
.photo-card .stars{position:absolute;left:9px;bottom:8px;z-index:2;color:var(--yellow);font-size:13px}
body[data-page="gallery"] .photo-card .stars{
  display:none;
}
.photo-card .note{position:absolute;left:0;right:0;bottom:0;z-index:2;height:34px;box-sizing:border-box;background:rgba(0,0,0,.78);padding:8px 10px;color:#e8e4dc;font-size:12px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.photo-grid.show-names .photo-card .note{bottom:0}
.photo-menu{position:fixed;z-index:220;background:#202126;border:1px solid var(--line);border-radius:8px;box-shadow:0 14px 34px rgba(0,0,0,.36);padding:5px;min-width:128px}
.photo-menu button{display:flex;align-items:center;gap:8px;width:100%;height:31px;text-align:left;padding:0 9px;border:0;background:transparent;color:#fff;border-radius:5px;font-size:13px;font-weight:760;line-height:31px}
.photo-menu button:hover{background:#2a2b31}
.photo-menu-item{position:relative}
.photo-menu-item > button{padding-right:6px}
.submenu-arrow{margin-left:auto;color:#9a9690;font-size:16px;line-height:1}
.photo-submenu{
  position:absolute;
  left:calc(100% + 6px);
  top:-5px;
  min-width:112px;
  padding:5px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#202126;
  box-shadow:0 14px 34px rgba(0,0,0,.36);
  opacity:0;
  visibility:hidden;
  transform:translateX(-3px);
  transition:opacity .14s var(--ease),transform .14s var(--ease),visibility .14s;
}
.photo-menu-item:hover .photo-submenu{
  opacity:1;
  visibility:visible;
  transform:translateX(0);
}
.photo-submenu button{justify-content:flex-start}
.photo-menu .danger-text .menu-icon{color:#ff735f}
.photo-menu .menu-icon{
  width:21px;
  height:21px;
  flex-basis:21px;
  background:center/contain no-repeat;
}
.photo-menu .menu-icon::before,
.photo-menu .menu-icon::after{
  display:none;
}
.photo-menu .preview-icon{
  background-image:url("./assets/menu-preview.svg");
}
.photo-menu .cover-icon{
  background-image:url("./assets/menu-cover.svg");
}
.photo-menu .recommend-icon{
  background-image:url("./assets/menu-recommend.svg");
}
.photo-menu .required-icon{
  background-image:url("./assets/menu-required.svg");
}
.photo-menu .move-filter-icon{
  background-image:url("./assets/menu-move-filter.svg");
}
.photo-menu .rename-gallery-icon{
  background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23F4F2EC' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.3 16.7 5.4 12 14.2 3.2 18.8 7.8 10 16.6 4.3 16.7Z'/%3E%3Cpath d='m12.4 5 4.6 4.6'/%3E%3Cpath d='M8.7 21h7.3'/%3E%3C/g%3E%3Ccircle cx='20.1' cy='4.2' r='2.5' fill='%23F57A1F'/%3E%3C/svg%3E");
}
.photo-menu .copy-gallery-icon{
  background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23F4F2EC' stroke-width='2.4' stroke-linejoin='round'%3E%3Crect x='8.3' y='8.1' width='11.2' height='11.2' rx='2'/%3E%3Cpath d='M4.5 15.3V6.7a2 2 0 0 1 2-2h8.8' stroke-linecap='round'/%3E%3Cpath d='M6.6 4.7h8.1a2 2 0 0 1 2 2v1.4' stroke-linecap='round'/%3E%3C/g%3E%3Ccircle cx='20.2' cy='4.4' r='2.5' fill='%23F57A1F'/%3E%3C/svg%3E");
}
.photo-menu .delete-icon{
  background-image:url("./assets/menu-delete.svg");
}
.gallery-menu{
  min-width:136px;
}
.gallery-menu button{
  height:31px;
  padding:0 9px;
  font-size:13px;
  line-height:31px;
}
.gallery-menu .menu-icon{
  width:21px;
  height:21px;
  flex-basis:21px;
}
.gallery-menu .delete-icon{
  width:21px;
  height:21px;
  flex-basis:21px;
  background:url("./assets/menu-delete.svg") center/contain no-repeat;
}
.preview-icon::before{
  content:"";
  position:absolute;
  left:1px;
  top:4px;
  width:13px;
  height:8px;
  border:1.5px solid currentColor;
  border-radius:8px/5px;
}
.preview-icon::after{
  content:"";
  position:absolute;
  left:6px;
  top:6px;
  width:3px;
  height:3px;
  border-radius:50%;
  background:currentColor;
}
.cover-icon::before{
  content:"";
  position:absolute;
  inset:2px 1px;
  border:1.5px solid currentColor;
  border-radius:2px;
}
.cover-icon::after{
  content:"";
  position:absolute;
  left:4px;
  bottom:4px;
  width:8px;
  height:5px;
  background:linear-gradient(135deg,transparent 48%,currentColor 50%,currentColor 60%,transparent 62%) left bottom/8px 5px no-repeat;
}
.recommend-icon::before{
  content:"";
  position:absolute;
  left:2px;
  top:1px;
  width:11px;
  height:11px;
  background:currentColor;
  clip-path:polygon(50% 0,62% 35%,100% 36%,70% 58%,80% 94%,50% 72%,20% 94%,30% 58%,0 36%,38% 35%);
}
.required-icon::before{
  content:"";
  position:absolute;
  inset:2px;
  border:1.5px solid currentColor;
  border-radius:50%;
}
.required-icon::after{
  content:"";
  position:absolute;
  left:5px;
  top:6px;
  width:6px;
  height:3px;
  border-left:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg);
}
.delete-icon::before{
  content:"";
  position:absolute;
  left:3px;
  top:5px;
  width:9px;
  height:10px;
  border:1.5px solid currentColor;
  border-top:0;
  border-radius:0 0 2px 2px;
}
.delete-icon::after{
  content:"";
  position:absolute;
  left:2px;
  top:3px;
  width:11px;
  height:1.5px;
  background:currentColor;
  box-shadow:4px -2px 0 -0.3px currentColor;
}
.gallery-bottom{
  position:fixed;
  left:20px;
  right:auto;
  bottom:16px;
  min-height:40px;
  background:transparent;
  border-top:0;
  backdrop-filter:none;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  padding:0;
  z-index:21;
}
body[data-page="gallery"] .gallery-bottom{right:var(--gallery-side-width)}
.zoom-control{
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--muted);
  font-size:13px;
  padding:7px 9px;
  border-radius:8px;
  background:rgba(11,11,11,.72);
  backdrop-filter:blur(12px);
}
.zoom-control button{
  width:24px;
  height:24px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.12);
  background:#151515;
  color:#7f7f7f;
  line-height:1;
}
.zoom-control input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  width:118px;
  height:18px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  accent-color:#f0f0f0;
}
.zoom-control input[type="range"]:focus,
.zoom-control input[type="range"]:focus-visible{
  outline:none;
  border-color:transparent;
  box-shadow:none;
}
.zoom-control input[type="range"]::-webkit-slider-runnable-track{
  height:4px;
  border-radius:10px;
  background:#dcdcdc;
}
.zoom-control input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:18px;
  height:18px;
  margin-top:-7px;
  border-radius:50%;
  border:4px solid #676767;
  background:#f4f4f4;
  box-shadow:0 0 0 1px rgba(0,0,0,.2);
}
.zoom-control input[type="range"]::-moz-range-track{
  height:4px;
  border-radius:10px;
  background:#dcdcdc;
}
.zoom-control input[type="range"]::-moz-range-thumb{
  width:10px;
  height:10px;
  border-radius:50%;
  border:4px solid #676767;
  background:#f4f4f4;
}
.export-actions{display:flex;gap:clamp(4px,1.2vw,10px);flex-wrap:nowrap;justify-content:center;position:absolute;left:50%;transform:translateX(-50%);padding:8px 14px;border-radius:8px;background:rgba(11,11,11,.72);backdrop-filter:blur(12px);overflow:hidden}
.export-actions button{font-size:clamp(10px,1.4vw,14px);padding:clamp(4px,1vw,12px) clamp(8px,2.2vw,20px);white-space:nowrap}
.export-actions button:not(.primary){background:#151515;border-color:rgba(255,255,255,.12);color:#fff;font-weight:800}
.export-actions button:not(.primary):hover{border-color:rgba(242,118,34,.7)}
#retouchedActions button{padding:clamp(8px,1.5vw,12px) clamp(20px,3.5vw,32px)}
.export-actions .primary.small{font-size:clamp(11px,1.5vw,15px);padding:clamp(4px,1vw,12px) clamp(8px,2.2vw,20px);font-weight:950}.settings-panel{
  border-radius:0;
  border-top:0;
  border-bottom:0;
  padding:18px;
  height:calc(100vh - 72px);
  position:sticky;
  top:72px;
  overflow:auto;
  overflow-x:hidden;
  background:#18191c;
  border-left:1px solid rgba(255,255,255,.1);
}
body[data-page="gallery"] .settings-panel{
  top:0;
  height:100vh;
  padding:8px 10px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  overflow-x:hidden;
  scrollbar-width:none;
}
body[data-page="gallery"] .settings-panel::-webkit-scrollbar{width:0;height:0}
.settings-panel .share-btn{
  margin-top:6px;
  margin-bottom:8px;
  padding:9px 12px;
}
.settings-panel .side-tabs{
  margin-bottom:6px;
}
.settings-panel .side-tab{
  padding:6px 6px;
  font-size:14px;
}
.settings-panel .info-card,
.settings-panel .setting-group{
  padding:10px;
  margin-bottom:9px;
}
.settings-panel .info-row{
  padding:7px 0;
  font-size:11px;
}
.settings-panel summary{
  font-size:14px;
}
.settings-panel .setting{
  margin-top:8px;
}
.settings-panel input,
.settings-panel select{
  max-width:100%;
  padding:8px 9px;
}
.settings-panel .inline-input{
  grid-template-columns:minmax(0,1fr) auto;
}
.settings-panel .chips{
  gap:6px;
  flex-wrap:wrap;
}
.settings-panel .chips button{
  padding:7px 8px;
}
.share-btn{
  width:100%;
  background:var(--accent);
  color:#170904;
  border:0;
  font-weight:950;
  margin-bottom:18px;
}
.share-btn:hover{
  background:#ff842b;
  transform:translateY(-2px);
  filter:saturate(1.08);
}
.side-tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:14px}
.side-tab{flex:1;border:0;background:transparent;color:var(--muted);padding:12px;font-size:15px;font-weight:860}
.side-tab.active{color:#fff;border-bottom:3px solid var(--accent);font-size:16px;font-weight:950}
.side-content{display:none}
.side-content.active{display:flex}
#sideInfo,
#sideFile{
  flex:1 1 auto;
  min-height:0;
  flex-direction:column;
}
.side-detail-grid{
  flex:1 1 auto;
  min-height:0;
  display:grid;
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:12px;
}
.side-detail-grid.selected-detail-grid{
  grid-template-rows:minmax(0,6.5fr) minmax(0,3.5fr);
}
.side-detail-section{
  min-height:0;
  display:flex;
  flex-direction:column;
}
.side-detail-section > .side-card,
.side-detail-section > .info-card{
  flex:1 1 auto;
  min-height:0;
  margin-bottom:0!important;
}
.side-content:not(.active){display:none}
.side-card{
  border:1px solid rgba(255,255,255,.1);
  border-radius:6px;
  background:linear-gradient(180deg,rgba(35,36,40,.96),rgba(24,25,28,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  margin-bottom:12px;
}
.gallery-settings-title{
  flex:0 0 auto;
  margin:0 0 5px;
  color:#f0ede8;
  font-size:16px;
  line-height:1.2;
  font-weight:950;
}
.side-section-title{
  flex:0 0 auto;
  margin:0 0 7px;
  color:#f0ede8;
  font-size:15px;
  line-height:1.2;
  font-weight:950;
}
.gallery-meta-card{
  padding:10px 14px;
  flex:0 0 auto;
  box-sizing:border-box;
  overflow:hidden;
}
#sideFile .gallery-meta-card{
  margin-bottom:12px;
  padding-top:18px;
}
.meta-field{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 0;
}
.meta-field:first-child{padding-top:0}
.meta-field:last-child{padding-bottom:0}
.meta-field span,
.side-setting-row label,
.side-setting-row.header-row > span,
.plain-row > span,
.notification-card > span{
  color:#8e8b86;
  font-size:13px;
  font-weight:820;
  line-height:1.2;
}
.meta-field span,
.side-setting-row:not(.password-setting-row):not(.extra-price-row):not(.extra-collection-row):not(.limit-days-row):not(.download-range-row):not(.download-price-row) > label,
.side-setting-row.header-row > span,
.plain-row > span,
.settings-panel .info-row span{
  color:#b6b1a8;
  font-size:14px;
  font-weight:860;
}
.meta-field b{
  color:#d9d5cc;
  font-size:13px;
  line-height:1.25;
  font-weight:820;
  text-align:right;
}
.meta-field .meta-status-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:64px;
  height:24px;
  padding:0 9px;
  border-radius:6px;
  font-size:12px;
  line-height:1;
  font-weight:900;
  white-space:nowrap;
}
.link-field{
  grid-template-columns:minmax(0,1fr) 24px;
  align-items:end;
}
.link-field span,
.link-field b{grid-column:1}
.link-field button{
  grid-column:2;
  grid-row:2;
  width:22px;
  height:22px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:4px;
  background:#181818;
  color:#aaa49a;
}
.published-dot::before{
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  margin-right:7px;
  border-radius:50%;
  background:#38c76a;
}
.visitor-section{
  margin:4px 0 0;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.06);
}
.visitor-section h3{
  margin:0 0 8px;
  color:#d9d5cc;
  font-size:13px;
  line-height:1.2;
  font-weight:900;
}
.visitor-card{
  padding:7px 8px;
  border:1px solid rgba(255,255,255,.04);
  border-radius:5px;
  background:#202126;
}
.visitor-empty{
  display:grid;
  place-items:center;
  flex:1 1 auto;
  min-height:0;
  color:#8e8b86;
  font-size:14px;
  font-weight:850;
  letter-spacing:0;
}
.visitor-panel-card{
  flex:1 1 auto;
  min-height:0;
  padding:7px 8px;
  box-sizing:border-box;
  overflow:hidden;
}
.retouched-meta-card .meta-field b{
  color:#f2eee7;
}
.visitor-panel-card .visitor-card{
  display:grid;
  gap:6px;
  padding:0;
  border:0;
  background:transparent;
  max-height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:3px;
  scrollbar-width:thin;
  scrollbar-color:rgba(150,150,150,.45) transparent;
}
.visitor-card-empty{
  place-items:center;
  height:100%;
}
.visitor-panel-card .visitor-card::-webkit-scrollbar{
  width:5px;
}
.visitor-panel-card .visitor-card::-webkit-scrollbar-track{
  background:transparent;
}
.visitor-panel-card .visitor-card::-webkit-scrollbar-thumb{
  background:rgba(150,150,150,.45);
  border-radius:999px;
}
.visitor-row{
  position:relative;
  display:grid;
  grid-template-columns:30px minmax(0,1fr) 22px;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:4px 7px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:6px;
  background:#1a1b1f;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.visitor-row b{
  color:#ece7dd;
  font-size:13px;
  font-weight:820;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.visitor-row button{
  width:22px;
  height:22px;
  border:0;
  background:transparent;
  color:#d9d3c9;
  letter-spacing:.5px;
  padding:0;
  border-radius:5px;
  font-size:12px;
  line-height:20px;
  cursor:pointer;
  transition:background .16s var(--ease),color .16s var(--ease),transform .16s var(--ease);
}
.visitor-row button:hover{
  background:rgba(255,255,255,.07);
  color:#fff;
}
.visitor-row button:active{
  transform:scale(.94);
}
.visitor-avatar{
  display:block;
  width:28px;
  height:28px;
  border-radius:50%;
  object-fit:cover;
  background:#111216;
  box-shadow:0 0 0 1px rgba(255,255,255,.1),0 6px 14px rgba(0,0,0,.22);
}
.visitor-menu{
  min-width:116px;
}
.visitor-menu button{
  height:30px;
  font-size:12px;
}
.visitor-menu .danger-text{
  color:#ff735f;
}
.side-settings-card{
  position:relative;
  padding:6px 10px 8px;
  flex:1 1 auto;
  min-height:0;
  margin-bottom:0;
  display:flex;
  flex-direction:column;
  gap:0;
  overflow:hidden;
}
.settings-scroll-body{
  flex:1 1 auto;
  min-height:0;
  scrollbar-gutter:stable;
  margin-right:-6px;
  padding-right:6px;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:rgba(150,150,150,.5) transparent;
}
.gallery-settings-full{
  height:auto;
  max-height:none;
}
.settings-confirm-btn{
  flex:0 0 auto;
  display:none;
  align-items:center;
  justify-content:center;
  width:100%;
  height:38px;
  margin:8px 0 0;
  border:1px solid rgba(255,255,255,.12);
  border-radius:6px;
  background:#f1f1f1;
  color:#170904;
  font-size:14px;
  line-height:1;
  font-weight:900;
  box-shadow:none;
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),transform .18s var(--ease);
}
.settings-confirm-btn.visible{
  display:flex;
}
.settings-confirm-btn:hover{
  border-color:rgba(242,118,34,.76);
  background:var(--accent);
  color:#170904;
}
.settings-scroll-body::-webkit-scrollbar{
  width:6px;
}
.settings-scroll-body::-webkit-scrollbar-button{
  display:none;
  width:0;
  height:0;
}
.settings-scroll-body::-webkit-scrollbar-track{
  background:transparent;
  border-radius:999px;
}
.settings-scroll-body::-webkit-scrollbar-thumb{
  background:rgba(150,150,150,.5);
  border-radius:999px;
}
.settings-scroll-body::-webkit-scrollbar-thumb:hover{
  background:rgba(176,176,176,.65);
}
.side-setting-row{
  display:grid;
  grid-template-columns:98px minmax(0,1fr);
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:6px 0;
  border-bottom:0;
  box-sizing:border-box;
}
.side-setting-row:last-child{border-bottom:0}
.side-setting-row.header-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:45px;
  color:#8e8b86;
  font-size:12px;
  font-weight:820;
  padding-top:6px;
  padding-bottom:6px;
}
.tooltip-overlay{
  position:fixed;
  z-index:300;
  white-space:pre-line;
  text-align:left;
  padding:10px 14px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(24,25,28,.96);
  box-shadow:0 12px 32px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(16px);
  color:#d6d2ca;
  font-size:12px;
  font-weight:620;
  line-height:1.55;
  pointer-events:none;
}
.limit-days-row{
  display:block;
  padding-top:0;
}
.password-setting-row,
.download-range-row{
  padding-top:0;
}
.download-range-row{
  overflow:visible;
  position:relative;
  z-index:20;
}
.download-price-row{
  padding-top:0;
}
.setting-reveal{
  overflow:hidden;
  animation:settingReveal .22s ease-out both;
}
.limit-day-options{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
  width:100%;
}
.limit-day-options button{
  height:28px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:5px;
  background:#28292f;
  color:#b9b4ac;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  transition:background .16s var(--ease),border-color .16s var(--ease),box-shadow .16s var(--ease),color .16s var(--ease),transform .16s var(--ease);
}
.limit-day-options button:active{
  transform:scale(.94);
}
.limit-day-options button.active{
  border-color:rgba(242,118,34,.72);
  background:rgba(242,118,34,.16);
  color:#fff;
  box-shadow:inset 0 -2px 0 var(--accent);
}
.limit-deadline{
  margin-top:7px;
  color:#827d75;
  font-size:13px;
  line-height:1.35;
  font-weight:760;
  white-space:nowrap;
}
.side-setting-row em,
.notification-card em{
  color:#77736d;
  font-style:normal;
  font-size:11px;
}
.side-setting-row label,
.side-setting-row.header-row > span,
.plain-row > span{
  white-space:nowrap;
}
.gallery-settings-full .side-setting-row.header-row > span{
  color:#ded8cf;
}
.gallery-settings-full .side-setting-row:not(.password-setting-row):not(.extra-price-row):not(.extra-collection-row):not(.limit-days-row):not(.download-range-row):not(.download-price-row) > label{
  color:#ded8cf;
}
.gallery-settings-full .side-setting-row.password-setting-row > label,
.gallery-settings-full .side-setting-row.extra-price-row > label,
.gallery-settings-full .side-setting-row.download-range-row > label,
.gallery-settings-full .side-setting-row.download-price-row > label{
  color:#b6b1a8;
}
.side-input,
.side-select,
.note-box{
  min-height:28px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:5px;
  background:#28292f;
  color:#d8d3ca;
  padding:6px 8px;
  font-size:11px;
  line-height:1.25;
}
.side-native-select{
  width:100%;
  height:30px;
  padding:0 26px 0 8px;
  cursor:pointer;
}
.side-setting-select{
  width:100%;
  min-width:0;
}
.side-setting-select .custom-select-trigger{
  width:100%;
  min-width:0;
  height:28px;
  border-radius:6px;
  border-color:rgba(255,255,255,.13);
  background:#28292f;
  color:#d8d3ca;
  padding:0 10px;
  font-size:13px;
  font-weight:860;
  box-shadow:none;
}
.side-setting-select.open .custom-select-trigger,
.side-setting-select .custom-select-trigger:hover{
  border-color:rgba(242,118,34,.64);
  background:rgba(32,33,38,.96);
}
.side-setting-select .custom-select-menu{
  width:100%;
  min-width:100%;
  top:calc(100% + 6px);
  padding:6px;
  border-radius:10px;
  background:rgba(20,20,20,.96);
}
.side-setting-select .custom-select-menu button{
  width:100%;
  min-width:0;
  height:28px;
  font-size:13px;
  font-weight:860;
  padding:0 10px;
}
.icon-input,
.side-select,
.price-input,
.plain-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.side-input.muted,
.note-box{color:#6f6b65}
.side-select span,
.icon-input span,
.plain-row i,
.notification-card i{color:#77736d;font-style:normal}
.password-control{
  display:grid;
  grid-template-columns:minmax(0,1fr) 30px;
  align-items:center;
  gap:6px;
}
.selectable-count-control,
.download-package-price-control{
  display:grid;
  grid-template-columns:minmax(0,1fr) 18px;
  align-items:center;
  gap:6px;
}
.password-control input,
.selectable-count-control input,
.download-package-price-control input{
  width:100%;
  min-width:0;
  height:28px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:5px;
  background:#28292f;
  color:#e9e2d8;
  padding:0 9px;
  font-size:13px;
  font-weight:860;
  outline:none;
  box-sizing:border-box;
}
.selectable-count-control input::placeholder{
  color:#77736d;
}
.download-package-price-control input::placeholder{
  color:#77736d;
  font-size:12px;
}
.selectable-count-control span,
.download-package-price-control span{
  color:#8d8982;
  font-size:12px;
  text-align:right;
}
.password-control input:focus,
.selectable-count-control input:focus,
.download-package-price-control input:focus{
  border-color:rgba(242,118,34,.58);
  box-shadow:0 0 0 1px rgba(242,118,34,.16);
}
.regenerate-password{
  width:30px;
  height:28px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:5px;
  background:#28292f;
  color:#b9b4ac;
  cursor:pointer;
  display:grid;
  place-items:center;
}
.regenerate-password::before{
  content:"↻";
  color:var(--accent);
  font-size:15px;
  line-height:1;
  font-weight:900;
}
.regenerate-password:hover{
  border-color:rgba(242,118,34,.52);
  background:rgba(242,118,34,.1);
}
.stepper{
  display:grid;
  grid-template-columns:28px minmax(0,1fr) 28px 18px;
  align-items:center;
}
.stepper button,
.stepper b{
  height:28px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.13);
  background:#28292f;
  color:#d8d3ca;
}
.stepper button:first-child{border-radius:5px 0 0 5px}
.stepper button:nth-child(3){border-radius:0 5px 5px 0}
.stepper b{font-size:12px;font-weight:800;border-left:0;border-right:0}
.stepper span{color:#8d8982;font-size:12px;text-align:right}
.price-input span{color:#8d8982}
.extra-price-row{
  padding-top:0;
}
.extra-price-control{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:7px;
}
.extra-price-control input{
  width:100%;
  min-width:0;
  height:28px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:5px;
  background:#28292f;
  color:#e9e2d8;
  padding:0 9px;
  font-size:13px;
  font-weight:860;
  outline:none;
  box-sizing:border-box;
}
.extra-price-control input::placeholder{
  color:#77736d;
}
.extra-price-control input:focus{
  border-color:rgba(242,118,34,.58);
  box-shadow:0 0 0 1px rgba(242,118,34,.16);
}
.extra-price-control span{
  color:#8d8982;
  font-size:12px;
  font-weight:820;
  white-space:nowrap;
}
.extra-collection-row{
  grid-template-columns:minmax(0,1fr) auto;
  padding-top:0;
  padding-bottom:2px;
}
.extra-collection-row .switch{
  justify-self:end;
}
.extra-price-hint{
  margin:0 0 5px;
  padding:0 1px 4px;
  color:#827d75;
  font-size:11px;
  line-height:1.5;
  font-weight:760;
  letter-spacing:0;
}
.extra-price-hint span{
  color:var(--accent);
  font-weight:900;
}
.note-box{
  min-height:48px;
  display:grid;
  align-content:space-between;
}
.note-box small{text-align:right;color:#8d8982}
.watermark-settings{
  display:grid;
  gap:10px;
  padding:0 0 8px;
  margin-top:0;
}
.watermark-preview{
  position:relative;
  width:100%;
  aspect-ratio:16/10;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.11);
  border-radius:7px;
  background:#15161a;
}
.watermark-preview > img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.78) contrast(.92) brightness(.82);
}
.watermark-single,
.watermark-tile{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.watermark-single{
  display:grid;
  padding:9px;
  opacity:var(--watermark-opacity,.3);
}
.watermark-single span,
.watermark-tile-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  max-width:145px;
  min-height:22px;
  padding:2px 7px;
  border-radius:4px;
  color:rgba(255,255,255,.86);
  background:rgba(0,0,0,.16);
  text-shadow:0 1px 5px rgba(0,0,0,.55);
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}
.watermark-single img,
.watermark-tile-mark img{
  max-width:90px;
  max-height:34px;
  object-fit:contain;
}
.watermark-preview[data-position="top-left"] .watermark-single{place-items:start}
.watermark-preview[data-position="top"] .watermark-single{place-items:start center}
.watermark-preview[data-position="top-right"] .watermark-single{place-items:start end}
.watermark-preview[data-position="left"] .watermark-single{place-items:center start}
.watermark-preview[data-position="center"] .watermark-single{place-items:center}
.watermark-preview[data-position="right"] .watermark-single{place-items:center end}
.watermark-preview[data-position="bottom-left"] .watermark-single{place-items:end start}
.watermark-preview[data-position="bottom"] .watermark-single{place-items:end center}
.watermark-preview[data-position="bottom-right"] .watermark-single{place-items:end end}
.watermark-tile{
  display:none;
}
.watermark-preview.watermark-mode-tile .watermark-single{display:none}
.watermark-preview.watermark-mode-tile .watermark-tile{
  display:block;
  opacity:var(--watermark-opacity,.3);
}
.watermark-preview.watermark-mode-tile .watermark-tile-mark{
  position:absolute;
  width:72px;
  max-width:none;
  min-height:auto;
  padding:0;
  background:transparent;
  color:rgba(255,255,255,.74);
  text-shadow:0 1px 4px rgba(0,0,0,.48);
  font-size:10px;
  font-weight:860;
  letter-spacing:0;
  white-space:nowrap;
  transform:rotate(-45deg);
}
.watermark-preview.watermark-mode-tile .watermark-tile-mark:nth-child(1){left:-5%;top:10%}
.watermark-preview.watermark-mode-tile .watermark-tile-mark:nth-child(2){left:34%;top:8%}
.watermark-preview.watermark-mode-tile .watermark-tile-mark:nth-child(3){left:73%;top:6%}
.watermark-preview.watermark-mode-tile .watermark-tile-mark:nth-child(4){left:14%;top:34%}
.watermark-preview.watermark-mode-tile .watermark-tile-mark:nth-child(5){left:53%;top:32%}
.watermark-preview.watermark-mode-tile .watermark-tile-mark:nth-child(6){left:92%;top:30%}
.watermark-preview.watermark-mode-tile .watermark-tile-mark:nth-child(7){left:-5%;top:58%}
.watermark-preview.watermark-mode-tile .watermark-tile-mark:nth-child(8){left:34%;top:56%}
.watermark-preview.watermark-mode-tile .watermark-tile-mark:nth-child(9){left:73%;top:54%}
.watermark-preview.watermark-mode-tile .watermark-tile-mark:nth-child(10){left:14%;top:82%}
.watermark-preview.watermark-mode-tile .watermark-tile-mark:nth-child(11){left:53%;top:80%}
.watermark-preview.watermark-mode-tile .watermark-tile-mark:nth-child(12){left:92%;top:78%}
.watermark-preview.watermark-mode-tile .watermark-tile-mark img{
  max-width:64px;
  max-height:26px;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.38));
}
.watermark-row{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:28px;
}
.watermark-row > span,
.watermark-opacity-row label{
  color:#8e8b86;
  font-size:13px;
  font-weight:820;
  white-space:nowrap;
}
.watermark-radio{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:26px;
  border:0;
  background:transparent;
  color:#aaa49a;
  font-size:13px;
  font-weight:850;
  cursor:pointer;
}
.watermark-radio i{
  width:16px;
  height:16px;
  border:1px solid rgba(255,255,255,.32);
  border-radius:50%;
  box-sizing:border-box;
}
.watermark-radio.active{
  color:#f0ebe2;
}
.watermark-radio.active i{
  border:5px solid var(--accent);
  box-shadow:0 0 0 2px rgba(242,118,34,.14);
}
.watermark-position-row{
  align-items:flex-start;
}
.watermark-position-grid{
  width:96px;
  height:96px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:4px;
  padding:2px;
  background:transparent;
  border:0;
}
.watermark-position-grid button{
  border:2px solid rgba(255,255,255,.18);
  border-radius:7px;
  background:#151619;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.5);
  cursor:pointer;
  transition:background .16s var(--ease),border-color .16s var(--ease),box-shadow .16s var(--ease),transform .16s var(--ease);
}
.watermark-position-grid button:hover{
  border-color:rgba(255,255,255,.3);
  background:#1d1e22;
}
.watermark-position-grid button:active{
  transform:scale(.94);
}
.watermark-position-grid button.active{
  border-color:rgba(255,255,255,.58);
  background:var(--accent);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 0 0 1px rgba(0,0,0,.45),0 0 12px rgba(242,118,34,.2);
}
.watermark-opacity-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) 64px;
  align-items:center;
  gap:10px;
}
.watermark-opacity-row input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:18px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  accent-color:#f0f0f0;
}
.watermark-opacity-row input[type="range"]:focus,
.watermark-opacity-row input[type="range"]:focus-visible{
  outline:none;
  border-color:transparent;
  box-shadow:none;
}
.watermark-opacity-row input[type="range"]::-webkit-slider-runnable-track{
  height:4px;
  border-radius:10px;
  background:#dcdcdc;
}
.watermark-opacity-row input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:18px;
  height:18px;
  margin-top:-7px;
  border-radius:50%;
  border:4px solid #676767;
  background:#f4f4f4;
  box-shadow:0 0 0 1px rgba(0,0,0,.2);
}
.watermark-opacity-row input[type="range"]::-moz-range-track{
  height:4px;
  border-radius:10px;
  background:#dcdcdc;
}
.watermark-opacity-row input[type="range"]::-moz-range-thumb{
  width:10px;
  height:10px;
  border-radius:50%;
  border:4px solid #676767;
  background:#f4f4f4;
}
.watermark-opacity-stepper{
  height:28px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 18px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:5px;
  background:#28292f;
  overflow:hidden;
}
.watermark-opacity-row input[type="text"]{
  width:100%;
  min-width:0;
  height:26px;
  border:0;
  border-radius:0;
  background:transparent;
  color:#f1ece4;
  padding:0 5px 0 8px;
  font-size:13px;
  font-weight:860;
  text-align:center;
  outline:none;
  box-sizing:border-box;
}
.watermark-opacity-stepper:focus-within{
  border-color:rgba(242,118,34,.58);
  box-shadow:0 0 0 1px rgba(242,118,34,.16);
}
.watermark-step-buttons{
  display:grid;
  grid-template-rows:1fr 1fr;
  border-left:1px solid rgba(255,255,255,.1);
}
.watermark-step-buttons button{
  position:relative;
  border:0;
  background:transparent;
  cursor:pointer;
}
.watermark-step-buttons button:first-child{
  border-bottom:1px solid rgba(255,255,255,.08);
}
.watermark-step-buttons button::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:6px;
  height:6px;
  border-right:1.5px solid #d7d1c7;
  border-bottom:1.5px solid #d7d1c7;
  transform:translate(-50%,-35%) rotate(225deg);
}
.watermark-step-buttons button:last-child::before{
  transform:translate(-50%,-65%) rotate(45deg);
}
.watermark-step-buttons button:hover{
  background:rgba(255,255,255,.07);
}
.watermark-upload-row{
  display:flex;
  align-items:center;
  gap:8px;
}
.watermark-upload-row button{
  flex:0 0 auto;
  min-width:96px;
  height:30px;
  padding:0 10px;
  border:0;
  border-radius:5px;
  background:#28292f;
  color:#d7d1c7;
  font-size:13px;
  font-weight:860;
  white-space:nowrap;
  cursor:pointer;
}
.watermark-upload-row button:hover{
  background:var(--accent);
  color:#170904;
}
.watermark-upload-row span{
  min-width:0;
  color:#827d75;
  font-size:11px;
  font-weight:760;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  line-height:1.35;
}
.watermark-upload-row span b{
  display:block;
  color:inherit;
  font:inherit;
  white-space:nowrap;
}
.watermark-upload-row input{
  display:none;
}
.plain-row{
  grid-template-columns:1fr auto auto;
  color:#8e8b86;
  font-size:12px;
  font-weight:820;
}
.plain-row b,
.notification-card b{
  color:#b8b2aa;
  font-size:12px;
  font-weight:780;
}
.notification-card{
  min-height:34px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:6px;
  padding:0 10px;
  color:#cfc9bf;
  font-size:12px;
  font-weight:800;
}
.info-card,.setting-group{border-radius:var(--radius);padding:14px;margin-bottom:12px}
.info-row{display:flex;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.06);padding:10px 0;color:var(--muted);gap:12px;font-size:13px}
.info-row:last-child{border-bottom:0}
.info-row b{color:#fff;text-align:right}
#sideFile .file-detail-card{
  height:340px;
  min-height:340px;
  max-height:340px;
  margin-bottom:12px;
  flex:0 0 340px;
  box-sizing:border-box;
  overflow:hidden;
}
#sideFile .side-detail-section .file-detail-card{
  height:auto;
  min-height:0;
  max-height:none;
  flex:1 1 auto;
  overflow-y:auto;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:rgba(150,150,150,.45) transparent;
}
#sideFile .side-detail-section .file-detail-card::-webkit-scrollbar{
  width:5px;
}
#sideFile .side-detail-section .file-detail-card::-webkit-scrollbar-track{
  background:transparent;
}
#sideFile .side-detail-section .file-detail-card::-webkit-scrollbar-thumb{
  background:rgba(150,150,150,.45);
  border-radius:999px;
}
#sideFile .side-detail-section .file-detail-card:not(.multi-file-detail):not(.empty-file-detail){
  display:flex;
  flex-direction:column;
}
#sideFile .file-thumb-slot{
  height:145px;
  display:grid;
  place-items:center;
  margin:0 auto 9px;
  overflow:visible;
}
#sideFile .file-thumb-slot img,
#sideFile .info-card > img{
  display:block;
  width:auto !important;
  height:auto !important;
  max-width:92%;
  max-height:160px;
  margin:0 auto;
  border-radius:7px !important;
  object-fit:contain;
  object-position:center;
  background:transparent;
  filter:contrast(1.02) saturate(1.04) !important;
}
#sideFile .file-thumb-slot img{
  transform:translateY(-8px);
}
.multi-file-detail{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:22px;
}
.multi-thumb-stack{
  position:relative;
  width:170px;
  height:150px;
}
.multi-thumb-stack img{
  position:absolute;
  left:50%;
  top:50%;
  width:112px;
  height:132px;
  object-fit:cover;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 12px 26px rgba(0,0,0,.36);
  transform:var(--stack-transform);
  opacity:1;
}
.multi-thumb-stack img:nth-child(1){
  --stack-transform:translate(calc(-50% - 34px),calc(-50% + 10px)) rotate(-10deg);
  z-index:1;
}
.multi-thumb-stack img:nth-child(2){
  --stack-transform:translate(calc(-50% - 16px),calc(-50% + 2px)) rotate(-5deg);
  z-index:2;
}
.multi-thumb-stack img:nth-child(3){
  --stack-transform:translate(-50%,-50%) rotate(0deg);
  z-index:3;
}
.multi-thumb-stack img:nth-child(4){
  --stack-transform:translate(calc(-50% + 16px),calc(-50% + 2px)) rotate(5deg);
  z-index:4;
}
.multi-thumb-stack img:nth-child(5){
  --stack-transform:translate(calc(-50% + 34px),calc(-50% + 10px)) rotate(10deg);
  z-index:5;
}
.multi-thumb-stack img:last-child{
  --stack-transform:translate(-50%,-50%) rotate(0deg);
  z-index:10;
  animation:stackTopSlideIn .22s var(--ease) both;
}
@keyframes stackTopSlideIn{
  from{
    opacity:.96;
    transform:translate(-50%,calc(-50% - 18px)) rotate(0deg);
  }
  to{
    opacity:1;
    transform:var(--stack-transform);
  }
}
.multi-selected-count{
  width:100%;
  padding-top:2px;
  color:#f0ede8;
  font-size:15px;
  line-height:1.2;
  font-weight:900;
  text-align:center;
}
#sideFile .info-row{
  padding:8px 0;
  border-bottom:0;
}
#sideFile .info-row span{
  color:#b6b1a8;
  font-size:14px;
  font-weight:860;
}
#sideFile .info-row b{
  font-size:13px;
  font-weight:820;
}
.client-avatar{
  width:22px;
  height:22px;
  border-radius:50%;
  object-fit:cover;
  margin-right:6px;
  vertical-align:middle;
  display:inline-block;
}
.customer-note-info{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:8px 0 0;
  margin-top:0;
  flex:1 1 0;
  min-height:0;
}
.customer-note-info span{
  flex:0 0 auto;
  color:#b6b1a8;
  font-size:14px;
  font-weight:860;
}
.customer-note-info div{
  flex:1 1 0;
  min-height:94px;
  padding:8px 12px 12px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:6px;
  background:#17181c;
  color:#d3cec6;
  font-size:12px;
  line-height:1.55;
  font-weight:760;
  white-space:normal;
  overflow-y:auto;
  overflow-x:hidden;
  word-break:break-word;
  scrollbar-width:thin;
  scrollbar-color:rgba(150,150,150,.45) transparent;
}
.customer-note-info.empty-customer-note div{
  display:none;
}
.customer-note-info div::-webkit-scrollbar{
  width:5px;
}
.customer-note-info div::-webkit-scrollbar-track{
  background:transparent;
}
.customer-note-info div::-webkit-scrollbar-thumb{
  background:rgba(150,150,150,.45);
  border-radius:999px;
}
.customer-note-placeholder{
  opacity:.35;
}
#sideFile [data-action="mark-cover"]{
  display:none;
}
.empty-file-detail{
  display:grid;
  place-items:center;
}
.empty-file-message{
  color:#8e8b86;
  font-size:14px;
  font-weight:850;
  letter-spacing:0;
}
.setting-group summary{cursor:pointer;font-weight:950;list-style:none}
.setting-group summary::after{content:"›";float:right;color:var(--accent)}
.setting{margin-top:14px}
.setting label,.modal label{display:block;color:#ddd8cf;font-size:14px;margin:12px 0 8px}
body[data-page="gallery"] .setting label{
  font-size:12px;
  margin:7px 0 5px;
}
.switch{
  float:right;
  position:relative;
  width:30px;
  height:18px;
  background:#333;
  border:0;
  border-radius:30px;
  padding:0;
  cursor:pointer;
  transition:background .2s var(--ease),box-shadow .2s var(--ease),transform .16s var(--ease);
}
.switch::after{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.28);
  transition:left .22s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);
}
.switch:hover{
  background:#424246;
  box-shadow:0 0 0 3px rgba(255,255,255,.05);
}
.switch:active{
  transform:scale(.94);
}
.switch:active::after{
  transform:scaleX(1.18);
}
.switch.on{
  background:var(--accent);
  box-shadow:0 0 0 3px rgba(242,118,34,.12);
}
.switch.on:hover{
  background:#ff8234;
  box-shadow:0 0 0 4px rgba(242,118,34,.16);
}
.switch.on::after{left:15px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.chips button{padding:8px 10px;border:1px solid rgba(255,255,255,.13);background:#28292f;color:#fff;border-radius:6px}
.chips button.active{border-color:var(--accent);color:var(--accent);background:rgba(242,118,34,.08)}
.task-float{
  position:relative;
  margin-left:auto;
  z-index:30;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:108px;
  height:36px;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  background:linear-gradient(180deg,#323231,#262625);
  color:#c4c1bb;
  font-weight:900;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
.task-float:hover{
  border-color:rgba(242,118,34,.5);
  color:#fff;
  transform:translateY(-1px);
}
.task-float:active{
  cursor:pointer;
  outline:none;
  transform:translateY(0);
}
.task-float:focus,
.task-float:focus-visible{
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.task-icon{
  position:relative;
  display:inline-block;
  width:15px;
  height:15px;
  flex:0 0 15px;
  border:1.8px solid currentColor;
  border-radius:3px;
}
.task-icon::before,
.task-icon::after{
  content:"";
  position:absolute;
  left:3px;
  right:3px;
  height:1.8px;
  border-radius:999px;
  background:currentColor;
}
.task-icon::before{
  top:4px;
}
.task-icon::after{
  top:8px;
}
.task-label{
  letter-spacing:0;
  font-size:13px;
  line-height:1;
  font-weight:950;
  white-space:nowrap;
}
.task-progress{
  position:absolute;
  right:-7px;
  top:-7px;
  display:none;
  min-width:18px;
  height:18px;
  padding:0 4px;
  border-radius:999px;
  background:#e3362d;
  color:#fff;
  font-size:10px;
  line-height:18px;
  font-weight:950;
  box-shadow:none;
}
.task-float.has-running-task .task-progress{
  display:block;
  background:#f27622;
}
.task-float.has-failed-task .task-progress{
  display:block;
  background:#e3362d;
  font-size:12px;
}

.account-menu{position:fixed;right:38px;top:64px;z-index:80;background:#202126;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:8px;min-width:205px}
.account-dashboard-only{display:none}
.account-menu-item svg,.account-menu-logout svg{display:none}
.account-menu button{display:block;width:100%;text-align:left;background:transparent;border:0;color:#ddd;padding:12px;border-radius:6px}
.account-menu button:hover{background:#2a2b31}
body[data-page="dashboard"] .account-menu{
  right:32px;
  top:70px;
  width:210px;
  min-width:210px;
  padding:10px 10px 12px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:14px;
  background:
    radial-gradient(circle at 12% 8%,rgba(255,255,255,.1),transparent 28%),
    linear-gradient(145deg,rgba(36,37,38,.96),rgba(11,12,13,.98));
  box-shadow:0 14px 30px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(12px);
}
body[data-page="dashboard"] .account-dashboard-only{
  display:block;
}
body[data-page="dashboard"] .account-menu-legacy{
  display:none;
}
body[data-page="dashboard"] .account-menu-profile{
  display:grid;
  grid-template-columns:46px 1fr;
  align-items:center;
  gap:10px;
  width:100%;
  padding:8px;
  text-align:left;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
}
body[data-page="dashboard"] .account-menu-profile:hover{
  background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.03));
}
body[data-page="dashboard"] .account-menu-avatar{
  width:46px;
  height:46px;
  display:block;
  overflow:hidden;
  border-radius:50%;
  background:#1f2024;
  border:1px solid rgba(255,255,255,.16);
}
body[data-page="dashboard"] .account-menu-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}
body[data-page="dashboard"] .account-menu-profile strong{
  display:block;
  color:#f4f4f4;
  font-size:16px;
  line-height:1.1;
  font-weight:760;
}
body[data-page="dashboard"] .account-menu-profile > div > span{
  width:max-content;
  display:flex;
  align-items:center;
  gap:4px;
  margin-top:6px;
  padding:4px 7px;
  border-radius:6px;
  color:#bdbdbd;
  background:rgba(255,255,255,.12);
  font-size:11px;
  line-height:1;
  font-weight:700;
}
body[data-page="dashboard"] .account-menu-profile > div > span svg{
  width:13px;
  height:13px;
}
body[data-page="dashboard"] .account-menu-valid{
  margin-top:8px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.018));
}
body[data-page="dashboard"] .account-menu-valid > span{
  display:block;
  color:#8f8f8f;
  font-size:12px;
  line-height:1;
  font-weight:800;
}
body[data-page="dashboard"] .account-menu-valid > div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:9px;
}
body[data-page="dashboard"] .account-menu-valid strong{
  min-width:0;
  color:#f3f3f3;
  font-size:12px;
  line-height:1.2;
  font-weight:760;
}
body[data-page="dashboard"] .account-menu-valid button{
  width:auto;
  flex:0 0 auto;
  padding:0;
  color:#ff5b14;
  background:transparent;
  font-size:12px;
  line-height:1;
  font-weight:900;
}
body[data-page="dashboard"] .account-menu-valid button:hover{
  background:transparent;
  color:#ff7a24;
}
body[data-page="dashboard"] .account-menu-item,
body[data-page="dashboard"] .account-menu-logout{
  height:32px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 8px;
  margin-top:6px;
  border-radius:7px;
  color:#d8d8d8;
  font-size:13px;
  line-height:1;
  font-weight:760;
}
body[data-page="dashboard"] .account-menu-legacy + .account-menu-item{
  margin-top:10px;
}
body[data-page="dashboard"] .account-menu-item svg,
body[data-page="dashboard"] .account-menu-logout svg{
  display:block;
  width:18px;
  height:18px;
  flex:0 0 18px;
}
body[data-page="dashboard"] .account-menu-item:hover{
  background:rgba(255,255,255,.06);
}
body[data-page="dashboard"] .account-menu-divider{
  height:1px;
  margin:9px 5px 6px;
  background:rgba(255,255,255,.12);
}
body[data-page="dashboard"] .account-menu-logout{
  margin-top:0;
  color:#ff5b14;
}
body[data-page="dashboard"] .account-menu-logout:hover{
  background:rgba(255,91,20,.08);
  color:#ff6f22;
}
.modal-layer{position:fixed;z-index:180;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(9px);display:grid;place-items:center;padding:30px}
.modal-layer.hidden{display:none!important}
body.modal-open{overflow:hidden}
.modal{width:min(530px,94vw);padding:28px;position:relative;border-radius:var(--radius);animation:modalIn .22s var(--ease) both;box-shadow:var(--shadow)}
.modal h2{margin:8px 0 20px;font-size:30px;line-height:1.12}
.modal p{color:var(--muted);line-height:1.7}
.close{position:absolute;right:16px;top:14px;border:0;background:transparent;color:var(--muted);font-size:28px;padding:0 6px}
.modal input,.modal textarea,.modal select{width:100%}
.photo-filter-modal{
  width:360px;
  padding:24px 28px 24px;
  border-radius:10px;
  background:rgba(30,31,35,.96);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 24px 80px rgba(0,0,0,.68), inset 0 1px 0 rgba(255,255,255,.04);
}
.photo-filter-modal h2{
  margin:0 0 20px;
  color:#fff;
  font-size:24px;
  line-height:1.2;
  font-weight:950;
  text-align:center;
}
.photo-filter-close{
  position:absolute;
  right:18px;
  top:16px;
  width:28px;
  height:28px;
  border:0;
  background:transparent;
  color:#e7e1d8;
  font-size:28px;
  line-height:1;
  font-weight:300;
}
.photo-filter-modal-body{
  display:block;
}
.photo-filter-form{
  min-width:0;
}
.photo-filter-modal label{
  margin:0;
}
.photo-filter-modal input{
  height:40px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:7px;
  background:#202126;
  color:#fff;
  padding:0 12px;
  font-size:14px;
  font-weight:760;
  box-shadow:none;
}
.photo-filter-modal input:focus{
  border-color:rgba(255,75,20,.76);
  box-shadow:0 0 0 3px rgba(255,75,20,.12);
}
.photo-filter-modal input::placeholder{
  color:#77736d;
}
.photo-filter-modal-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:20px;
}
.photo-filter-modal-actions button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:42px;
  border-radius:7px;
  font-size:16px;
  font-weight:900;
  line-height:1;
  text-align:center;
}
.photo-filter-modal-actions .cancel{
  border:1px solid rgba(255,255,255,.18);
  background:#202126;
  color:#fff;
}
.photo-filter-modal-actions .confirm{
  border:1px solid #ff4b14;
  background:#ff4b14;
  color:#fff;
}
.cover-position-modal{
  width:min(560px,92vw);
  padding:24px 28px 24px;
  border-radius:10px;
  background:rgba(30,31,35,.96);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 24px 80px rgba(0,0,0,.68), inset 0 1px 0 rgba(255,255,255,.04);
}
.cover-position-modal h2{
  margin:0 0 18px;
  color:#fff;
  font-size:24px;
  line-height:1.2;
  font-weight:900;
}
.cover-position-preview{
  position:relative;
  width:100%;
  aspect-ratio:1.28;
  overflow:hidden;
  border-radius:8px;
  background:#111216;
  border:1px solid rgba(255,255,255,.12);
  cursor:grab;
  user-select:none;
  touch-action:none;
}
.cover-position-preview.dragging{
  cursor:grabbing;
}
.cover-position-preview img{
  position:absolute;
  left:50%;
  top:50%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
  filter:none;
  opacity:0;
  transform:translate(-50%,-50%);
  pointer-events:none;
  will-change:left,top,width,height;
}
.cover-position-preview.ready img{
  opacity:1;
}
.cover-position-preview::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,transparent calc(33.333% - .5px),rgba(255,255,255,.16) calc(33.333% - .5px),rgba(255,255,255,.16) calc(33.333% + .5px),transparent calc(33.333% + .5px),transparent calc(66.666% - .5px),rgba(255,255,255,.16) calc(66.666% - .5px),rgba(255,255,255,.16) calc(66.666% + .5px),transparent calc(66.666% + .5px)),
    linear-gradient(0deg,transparent calc(33.333% - .5px),rgba(255,255,255,.16) calc(33.333% - .5px),rgba(255,255,255,.16) calc(33.333% + .5px),transparent calc(33.333% + .5px),transparent calc(66.666% - .5px),rgba(255,255,255,.16) calc(66.666% - .5px),rgba(255,255,255,.16) calc(66.666% + .5px),transparent calc(66.666% + .5px));
  pointer-events:none;
}
.cover-position-actions{
  margin-top:18px;
}
.cover-position-toolbar{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 34px 48px 62px;
  align-items:center;
  gap:10px;
  margin-top:16px;
}
.cover-zoom-button,
.cover-reset-button{
  height:34px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:7px;
  background:#1a1b1f;
  color:#f3eee7;
  font-size:18px;
  font-weight:900;
  cursor:pointer;
}
.cover-reset-button{
  font-size:13px;
}
.cover-zoom-button:hover,
.cover-reset-button:hover{
  border-color:rgba(242,118,34,.48);
  color:#fff;
}
.cover-zoom-range{
  width:100%;
  height:18px;
  margin:0;
  padding:0;
  background:transparent;
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
}
.cover-zoom-range:focus,
.cover-zoom-range:focus-visible{
  outline:none;
  border-color:transparent;
  box-shadow:none;
}
.cover-zoom-range::-webkit-slider-runnable-track{
  width:100%;
  height:4px;
  border-radius:999px;
  background:#5c5c5f;
}
.cover-zoom-range::-webkit-slider-thumb{
  width:18px;
  height:18px;
  margin-top:-7px;
  border:0;
  border-radius:50%;
  background:#f27622;
  box-shadow:0 0 0 3px rgba(242,118,34,.16);
  appearance:none;
  -webkit-appearance:none;
}
.cover-zoom-range::-moz-range-track{
  height:4px;
  border:0;
  border-radius:999px;
  background:#5c5c5f;
}
.cover-zoom-range::-moz-range-thumb{
  width:18px;
  height:18px;
  border:0;
  border-radius:50%;
  background:#f27622;
  box-shadow:0 0 0 3px rgba(242,118,34,.16);
}
.cover-zoom-value{
  color:#bdb7ae;
  font-size:12px;
  font-weight:850;
  text-align:center;
}
.delete-confirm-modal h2{
  margin-bottom:10px;
  text-align:center;
}
.delete-confirm-modal p{
  margin:0;
  color:#cfc8bf;
  font-size:15px;
  font-weight:760;
  text-align:center;
}
.delete-confirm-modal .modal-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:24px;
}
.delete-confirm-modal .modal-actions button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:42px;
  border-radius:7px;
  font-size:16px;
  font-weight:900;
  line-height:1;
  text-align:center;
}
.delete-confirm-modal .modal-actions .ghost{
  border:1px solid rgba(255,255,255,.18);
  background:#202126;
  color:#fff;
}
.selected-export-modal{
  width:420px;
}
.selected-export-modal .modal-actions{
  grid-template-columns:minmax(150px,1fr) minmax(180px,1.08fr);
}
.selected-export-modal .modal-actions button{
  min-width:0;
  white-space:nowrap;
}
.reset-select-form{
  text-align:left;
  margin-bottom:8px;
}
.reset-select-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}
.reset-select-modal{
  padding-bottom:44px;
}
.reset-select-modal h2{
  transform:translateY(-5px);
}
.reset-select-row label{
  color:#d6d1ca;
  font-size:16px;
  font-weight:800;
  white-space:nowrap;
}
.reset-select-count{
  display:flex;
  align-items:center;
  gap:8px;
}
.reset-select-count input{
  width:120px;
  height:36px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:7px;
  background:#202126;
  color:#fff;
  font-size:13px;
  text-align:left;
}
.reset-keep-select .custom-select-trigger{
  height:36px;
  width:144px;
}
.reset-select-count span{
  color:#d6d1ca;
  font-size:14px;
  font-weight:800;
}
.delete-confirm-modal .modal-actions .primary{
  border:1px solid #ff4b14;
  background:#ff4b14;
  color:#fff;
}
.inline-input{display:flex}
.inline-input input{border-radius:8px 0 0 8px}
.inline-input button{border-radius:0 8px 8px 0;white-space:nowrap}
body[data-page="gallery"] .settings-panel .inline-input{
  display:grid;
  grid-template-columns:minmax(0,1fr) 58px;
  width:100%;
}
body[data-page="gallery"] .settings-panel .inline-input input{
  min-width:0;
}
body[data-page="gallery"] .settings-panel .inline-input button{
  min-width:0;
  padding:0 6px;
  font-size:11px;
}
.legal{font-size:12px;text-align:center}
.legal a{color:var(--accent)}
.login-modal{
  width:min(880px,42vw);
  min-width:760px;
  padding:0;
  display:grid;
  grid-template-columns:48% 52%;
  overflow:hidden;
  background:#1b1c1f;
}
.login-modal .close{
  z-index:5;
  color:#fff;
  background:rgba(0,0,0,.28);
  border-radius:50%;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  line-height:1;
}
.login-visual{
  position:relative;
  min-height:520px;
  overflow:hidden;
  background:#050505;
}
.login-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(1) contrast(1.06);
  opacity:.86;
}
.login-visual::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.82));
}
.login-visual-copy{
  position:absolute;
  z-index:2;
  left:24px;
  right:24px;
  bottom:24px;
}
.login-logo{
  height:70px!important;
  width:auto!important;
  position:relative;
  top:17px;
  left:-18px;
  margin-bottom:6px;
  object-fit:contain!important;
  filter:none!important;
  opacity:1!important;
}
.login-visual-copy span{
  color:var(--accent);
  font-weight:950;
  font-size:13px;
}
.login-visual-copy h2{
  margin:10px 0 8px;
  font-size:28px;
}
.login-visual-copy p{
  margin:0;
  color:#d7d2c8;
  font-size:13px;
}
.login-form{
  padding:58px 52px 42px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}
.login-form>*{
  width:100%;
  max-width:320px;
}
.login-form h2{
  margin-bottom:8px;
}
.login-subtitle{
  margin:0 0 26px;
  font-size:13px;
}
.login-form label{
  margin-top:15px;
}
.login-form input{
  height:48px;
}
.login-form .inline-input button{
  min-width:112px;
  color:#fff;
  font-weight:900;
}
.login-form .primary{
  height:50px;
  margin-top:20px;
  font-size:16px;
}
.login-form .legal{
  max-width:300px;
  margin-left:auto;
  margin-right:auto;
}
.modal-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:22px;align-items:center;flex-wrap:wrap}
.batch-upload-modal{
  position:relative;
  width:min(1560px,94vw);
  height:min(780px,90vh);
  max-height:90vh;
  padding:20px 22px 18px;
  background:linear-gradient(145deg,#16171a,#101113 72%);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.batch-upload-modal>.close{
  position:absolute;
  top:16px;
  right:16px;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:50%;
  background:transparent;
  color:#bdb7ae;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  z-index:5;
  padding:0 0 4px 0;
}
.batch-upload-modal>.close:hover{
  background:rgba(255,255,255,.08);
  color:#f4eee7;
}
.batch-upload-modal>.close:active{
  transform:scale(.94);
}
.upload-shell{
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:12px;
  flex:1 1 auto;
  min-height:0;
}
.upload-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  min-height:40px;
}
.upload-head-left{
  display:flex;
  align-items:center;
  min-width:0;
  gap:14px;
}
.upload-head-left .eyebrow{display:none}
.upload-head-left h2{
  margin:0;
  font-size:24px;
  line-height:1;
  letter-spacing:0;
  white-space:nowrap;
}
.upload-head-left h2 span{
  margin-left:8px;
  color:#aaa49a;
  font-size:16px;
  line-height:1;
  font-weight:800;
  vertical-align:baseline;
}
.upload-head-meta{
  display:flex;
  align-items:center;
  gap:12px;
  color:#a8a39a;
  font-size:13px;
  font-weight:700;
}
.upload-head-meta::before{
  content:"";
  width:1px;
  height:22px;
  background:rgba(255,255,255,.08);
}
.upload-head-meta span+span{
  padding-left:16px;
  border-left:1px solid rgba(255,255,255,.08);
}
.upload-head-meta b{
  color:var(--accent);
  font-weight:900;
}
.upload-head-actions{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:-2px;
  margin-right:50px;
}
.upload-head-actions .ghost.small{
  min-width:92px;
  height:38px;
  padding:0 13px;
  justify-content:center;
  gap:10px;
  border-radius:8px;
  background:#111216;
}
.upload-sort-icon,
.upload-trash-icon{
  position:relative;
  display:inline-block;
  width:14px;
  height:14px;
  flex:0 0 auto;
}
.upload-sort-icon::before{
  content:"≡";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#d9d4cb;
  font-size:16px;
  line-height:1;
  font-weight:900;
}
.upload-trash-icon::before{
  content:"⌫";
  position:absolute;
  inset:-1px 0 0;
  display:grid;
  place-items:center;
  color:#d9d4cb;
  font-size:14px;
  line-height:1;
  font-weight:900;
}
.upload-layout{
  display:block;
  height:100%;
  min-height:0;
  overflow:hidden;
}
.upload-grid-panel{
  display:block;
  height:100%;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-gutter:stable;
  padding-right:4px;
  overscroll-behavior:contain;
  overflow-anchor:none;
  scrollbar-width:thin;
  scrollbar-color:rgba(150,150,150,.45) transparent;
}
.upload-grid-panel::-webkit-scrollbar{width:6px}
.upload-grid-panel::-webkit-scrollbar-track{background:transparent}
.upload-grid-panel::-webkit-scrollbar-thumb{background:rgba(150,150,150,.45);border-radius:999px}
.upload-grid{
  position:relative;
  display:block;
  padding-bottom:2px;
}
.upload-grid.upload-empty{
  min-height:280px;
}
.upload-empty-state{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  min-height:280px;
  color:#b9b3aa;
  font-size:15px;
  font-weight:800;
}
.upload-card{
  position:absolute;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  align-items:stretch;
  aspect-ratio:1/1;
  min-height:0;
  border:1px solid rgba(255,255,255,.12);
  border-radius:6px;
  background:#141517;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  overflow:hidden;
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease);
}
.upload-card:hover,
.upload-card:focus-within{
  border-color:var(--accent);
  box-shadow:0 0 0 1px rgba(242,118,34,.72),0 0 0 4px rgba(242,118,34,.1),inset 0 1px 0 rgba(255,255,255,.03);
}
.upload-card.selected{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(242,118,34,.82),0 0 0 5px rgba(242,118,34,.15);
}
.upload-card.selected::after{
  content:"";
  position:absolute;
  right:9px;
  bottom:9px;
  z-index:5;
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 6px 14px rgba(0,0,0,.34);
}
.upload-card.selected::before{
  content:"";
  position:absolute;
  right:11px;
  bottom:11px;
  z-index:6;
  width:20px;
  height:20px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='7 12.5 10.5 16 17 8.5' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") center/20px 20px no-repeat;
}
.upload-card.selected img{
  filter:brightness(.68);
}
.upload-bottom-bar{
  position:relative;
}
.upload-batch-bar{
  display:grid;
  grid-template-columns:repeat(2,minmax(140px,220px));
  align-items:center;
  justify-content:center;
  gap:16px;
}
.upload-batch-bar button{
  height:50px;
  width:100%;
  min-width:140px;
  font-size:16px;
  font-weight:900;
  border-radius:8px;
}
.upload-batch-bar .ghost{
  border:1px solid rgba(255,255,255,.18);
  background:#202126;
  color:#fff;
}
.upload-batch-bar .danger{
  border:1px solid #ff4b14;
  background:#ff4b14;
  color:#fff;
}
.upload-batch-bar .danger:hover:not(:disabled){
  background:#ff4b14;
  border-color:#ff4b14;
  color:#fff;
  transform:translateY(-2px);
}
.upload-batch-bar .ghost:hover{
  border-color:rgba(255,255,255,.18);
  background:#202126;
  color:#fff;
}
.upload-card img{
  display:block;
  width:100%;
  height:100%;
  min-height:0;
  object-fit:cover;
  background:#0f1012;
}
.upload-card.thumbnail-loading img{
  filter:blur(2px) brightness(.82);
  transform:scale(1.02);
}
.upload-size-warning,
.upload-name-warning{
  position:absolute;
  left:8px;
  top:8px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:22px;
  padding:0 7px;
  border-radius:5px;
  background:#ff3b30;
  color:#fff;
  font-size:11px;
  line-height:1;
  font-weight:900;
  box-shadow:0 5px 14px rgba(0,0,0,.3);
}
.upload-name-warning{
  background:#f27622;
}
.upload-size-warning + .upload-name-warning{
  top:34px;
}
.upload-order{
  position:absolute;
  left:10px;
  top:10px;
  min-width:22px;
  height:22px;
  padding:0 6px;
  border-radius:6px;
  background:var(--accent);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:950;
  z-index:2;
  box-shadow:0 2px 8px rgba(0,0,0,.32);
}
.upload-remove-btn{
  position:absolute;
  right:10px;
  top:10px;
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  padding:0;
  border:1px solid rgba(242,118,34,.72);
  border-radius:5px;
  background:rgba(242,118,34,.9);
  color:#170904;
  font-size:18px;
  font-weight:900;
  line-height:0;
  cursor:pointer;
  z-index:2;
  box-shadow:0 6px 18px rgba(0,0,0,.22),0 0 0 1px rgba(0,0,0,.12);
  opacity:0;
  transform:translateY(-5px);
  pointer-events:none;
  transition:opacity .16s var(--ease),transform .16s var(--ease),background .16s var(--ease),border-color .16s var(--ease);
}
.upload-card:hover .upload-remove-btn,
.upload-card:focus-within .upload-remove-btn{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.upload-remove-btn:hover{
  background:#ff8234;
  border-color:#ff8234;
}
.upload-remove-btn:active{
  transform:translateY(0) scale(.92);
}
.upload-card-meta{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  display:grid;
  gap:2px;
  padding:28px 10px 8px;
  color:#f0ece5;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.72) 52%,rgba(0,0,0,.88));
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
  transition:opacity .16s var(--ease),transform .16s var(--ease);
}
.upload-card:hover .upload-card-meta,
.upload-card:focus-within .upload-card-meta{
  opacity:1;
  transform:translateY(0);
}
.upload-batch-mode .upload-card:hover .upload-card-meta,
.upload-batch-mode .upload-card:focus-within .upload-card-meta{
  opacity:0;
  transform:translateY(8px);
}
.upload-card-name{
  font-size:12px;
  line-height:1.15;
  font-weight:780;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.upload-card-size{
  color:#a9a39a;
  font-size:11px;
  line-height:1.2;
}
.upload-add-card{
  place-items:center;
  gap:8px;
  min-height:0;
  border:1px dashed rgba(242,118,34,.85);
  background:linear-gradient(180deg,#16171a,#111215);
  color:#f3eee7;
  cursor:pointer;
}
.upload-add-card .upload-add-plus{
  display:grid;
  place-items:center;
  width:56px;
  height:56px;
  border-radius:50%;
  border:1px solid rgba(242,118,34,.5);
  color:var(--accent);
  font-size:42px;
  line-height:1;
  font-weight:300;
}
.upload-add-card .upload-add-title{
  font-size:16px;
  line-height:1.1;
  font-weight:800;
}
.upload-add-card .upload-add-subtitle{
  color:#9d988f;
  font-size:12px;
  line-height:1.25;
}
.upload-add-card-empty{
  grid-column:1/-1;
  min-height:240px;
}
.upload-hint{
  margin:0;
  padding-left:2px;
}
.upload-bottom-bar{
  display:grid;
  grid-template-columns:repeat(3,minmax(122px,158px)) minmax(160px,1fr);
  gap:clamp(8px,1vw,16px);
  align-items:center;
  margin-top:4px;
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:#1d1e22;
  box-shadow:0 -16px 44px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.04);
  flex:0 0 auto;
  overflow:visible;
}
.upload-bottom-bar.upload-batch-bar{
  grid-template-columns:repeat(2,minmax(140px,220px));
  justify-content:center;
  gap:16px;
}
.upload-setting-block{
  min-height:64px;
  min-width:0;
  padding-right:clamp(6px,.8vw,12px);
  border-right:1px solid rgba(255,255,255,.06);
}
.upload-setting-block.no-right-border{
  border-right:0;
}
.upload-setting-block h4{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 8px;
  color:#ddd8cf;
  font-size:13px;
  line-height:1.1;
}
.upload-info-dot{
  display:inline-grid;
  place-items:center;
  width:13px;
  height:13px;
  border:1px solid rgba(255,255,255,.42);
  border-radius:50%;
  color:#b7b1a8;
  font-size:9px;
  font-style:normal;
}
.upload-select-like{
  height:34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:7px;
  background:#17181c;
  color:#e9e4dc;
  font-size:13px;
  font-weight:780;
}
.upload-select{
  width:100%;
  max-width:100%;
}
.upload-select-trigger{
  width:100%;
  height:34px;
  min-width:0;
  border-radius:7px;
  background:#17181c;
  color:#e9e4dc;
  font-size:13px;
}
.upload-select-trigger i{
  width:14px;
  height:14px;
  flex:0 0 auto;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3.5 8.5L7 5L10.5 8.5' stroke='%23d7d1c7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px 14px no-repeat;
  transition:transform .16s var(--ease);
}
.upload-select.open .upload-select-trigger i{
  transform:translateY(-1px);
}
.upload-select-menu{
  top:auto;
  bottom:calc(100% + 7px);
  min-width:100%;
  z-index:420;
}
.upload-select-menu button{
  min-width:0;
  white-space:nowrap;
}
.upload-size-control{
  display:grid;
  grid-template-columns:1fr 120px;
  gap:12px;
  align-items:center;
}
.upload-size-slider{
  position:relative;
  height:4px;
  border-radius:999px;
  background:#3d3e42;
}
.upload-size-slider span{
  position:absolute;
  inset:0 auto 0 0;
  width:66%;
  border-radius:inherit;
  background:var(--accent);
}
.upload-size-slider i{
  position:absolute;
  left:66%;
  top:50%;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#f5f2ed;
  transform:translate(-50%,-50%);
}
.size-block p{
  margin:6px 0 0;
  color:#8e8981;
  font-size:11px;
}
.upload-source-inline{
  display:flex;
  align-items:center;
  gap:10px;
  color:#aaa49a;
  font-size:12px;
  font-weight:760;
}
.upload-summary-card{
  display:grid;
  gap:10px;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}
.upload-summary-card span{
  color:#aaa59b;
  font-size:12px;
}
.upload-summary-card b{
  color:#f3eee8;
  font-size:22px;
  line-height:1;
  font-weight:950;
}
.upload-confirm-overlay{
  position:absolute;
  inset:0;
  z-index:30;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.78);
}
.upload-confirm-dialog{
  width:min(400px,88vw);
  padding:20px 44px 28px;
}

.upload-submit-btn{
  height:50px;
  width:min(220px,100%);
  min-width:140px;
  justify-self:end;
  margin-right:clamp(0px,.5vw,8px);
  border-radius:8px;
  font-size:14px;
}
.upload-submit-panel{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  align-items:center;
  min-height:70px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}
.upload-submit-panel .hint{
  grid-column:2;
  margin:0;
  color:#8b857d!important;
  font-size:11px;
}
.upload-warning-overlay{
  position:absolute;
  inset:0;
  z-index:20;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(0,0,0,.58);
  backdrop-filter:blur(4px);
}
.upload-warning-modal{
  position:relative;
  width:min(460px,calc(100vw - 72px));
  max-height:min(620px,calc(100vh - 96px));
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto;
  padding:26px 24px 22px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  background:#202126;
  box-shadow:0 24px 70px rgba(0,0,0,.46);
}
.upload-warning-close{
  position:absolute;
  right:12px;
  top:10px;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:#bdb7ae;
  font-size:24px;
  line-height:1;
  cursor:pointer;
}
.upload-warning-close:hover{
  background:rgba(255,255,255,.08);
  color:#fff;
}
.upload-warning-modal h2{
  margin:0;
  color:#fff;
  text-align:center;
  font-size:22px;
  line-height:1.2;
  font-weight:950;
}
.upload-warning-modal p{
  margin:10px 0 18px;
  color:#aaa49a;
  text-align:center;
  font-size:13px;
  line-height:1.4;
  font-weight:760;
}
.upload-warning-list{
  min-height:0;
  display:grid;
  gap:8px;
  overflow:auto;
  padding-right:4px;
  scrollbar-width:thin;
  scrollbar-color:rgba(150,150,150,.45) transparent;
}
.upload-warning-list::-webkit-scrollbar{width:6px}
.upload-warning-list::-webkit-scrollbar-track{background:transparent}
.upload-warning-list::-webkit-scrollbar-thumb{background:rgba(150,150,150,.45);border-radius:999px}
.upload-warning-row{
  display:grid;
  grid-template-columns:44px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  min-height:54px;
  padding:6px 8px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  background:#18191d;
}
.upload-warning-row img{
  width:44px;
  height:44px;
  object-fit:cover;
  border-radius:5px;
  background:#111;
}
.upload-warning-row span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#f0ece5;
  font-size:13px;
  font-weight:800;
}
.upload-warning-row b{
  color:#ff6a5d;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}
.upload-warning-remove{
  width:100%;
  height:42px;
  margin-top:18px;
  border-radius:8px;
  font-size:14px;
}
.task-modal{
  width:min(1080px,80vw);
  height:min(660px,76vh);
  min-height:540px;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  gap:16px;
  padding:24px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(145deg,#202126,#15161a 72%);
  overflow:hidden;
}
.task-modal-head{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:18px;
  padding-right:36px;
}
.task-modal-head h2{
  margin:0;
  font-size:28px;
}
.task-tabs{
  display:flex;
  justify-content:center;
  gap:8px;
  grid-column:2;
}
.task-tabs button{
  min-width:124px;
  height:38px;
  padding:0 16px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  background:#17181c;
  color:#d9d4cb;
  font-size:14px;
  font-weight:850;
}
.task-tabs button.active{
  border-color:rgba(242,118,34,.6);
  background:rgba(242,118,34,.14);
  color:#fff;
}
.task-tabs button.has-failed{
  border-color:rgba(227,54,45,.42);
  background:rgba(227,54,45,.08);
}
.task-tabs button.has-failed.active{
  border-color:rgba(227,54,45,.62);
  background:rgba(227,54,45,.13);
}
.task-tabs span{
  color:var(--accent);
  margin-left:4px;
}
.task-tabs button.has-failed span{
  color:#ff5a4d;
}
.task-bulk-actions{
  grid-column:3;
  justify-self:end;
  display:flex;
  align-items:center;
  gap:8px;
}
.task-bulk-actions:empty{
  display:none;
}
.task-bulk-actions button{
  height:32px;
  min-width:82px;
  padding:0 13px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  background:#17181c;
  color:#d9d4cb;
  font-size:13px;
  font-weight:850;
  cursor:pointer;
}
.task-bulk-actions button:hover{
  border-color:rgba(242,118,34,.5);
  color:#fff;
}
.task-bulk-actions button:active{
  transform:scale(.97);
}
.task-list{
  --task-grid-columns:minmax(310px,1.55fr) minmax(160px,.82fr) minmax(96px,.48fr) minmax(190px,.92fr) minmax(76px,.32fr);
  width:100%;
  min-height:0;
  justify-self:stretch;
  box-sizing:border-box;
  display:grid;
  align-content:start;
  overflow:hidden;
  padding:0 12px;
}
.task-list.is-empty{
  align-content:stretch;
}
.task-scroll{
  min-height:0;
  height:100%;
  display:grid;
  align-content:start;
  overflow-x:hidden;
  overflow-y:scroll;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:rgba(150,150,150,.45) transparent;
}
.task-scroll::-webkit-scrollbar{width:6px}
.task-scroll::-webkit-scrollbar-track{background:transparent}
.task-scroll::-webkit-scrollbar-thumb{background:rgba(150,150,150,.45);border-radius:999px}
.task-empty-state{
  height:100%;
  min-height:360px;
  display:grid;
  place-items:center;
  border:1px dashed rgba(255,255,255,.1);
  border-radius:10px;
  color:#8f8980;
  font-size:16px;
  font-weight:850;
}
.task-table-head{
  position:sticky;
  top:0;
  z-index:1;
  display:grid;
  grid-template-columns:var(--task-grid-columns);
  min-width:820px;
  align-items:center;
  height:40px;
  padding:0 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:#1b1c20;
  color:#8e8982;
  font-size:12px;
  font-weight:900;
}
.task-card{
  display:grid;
  grid-template-columns:var(--task-grid-columns);
  min-width:820px;
  align-items:center;
  gap:0;
  min-height:56px;
  padding:0 14px;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.045);
  border-radius:0;
  background:#15161a;
  color:#f1ece5;
}
.task-card:hover{
  background:#1d1e23;
}
.task-file-name{
  min-width:0;
  display:flex;
  align-items:center;
  gap:9px;
}
.task-file-icon{
  position:relative;
  width:18px;
  height:18px;
  flex:0 0 auto;
  border:1px solid rgba(242,118,34,.55);
  border-radius:4px;
  background:linear-gradient(180deg,#222329,#17181c);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035);
}
.task-file-icon::before{
  content:"";
  position:absolute;
  left:4px;
  right:4px;
  bottom:4px;
  height:6px;
  border-radius:1px;
  background:linear-gradient(135deg,rgba(242,118,34,.92),rgba(255,148,77,.82));
  clip-path:polygon(0 100%,34% 42%,52% 70%,70% 36%,100% 100%);
}
.task-file-icon::after{
  content:"";
  position:absolute;
  right:4px;
  top:4px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#f27622;
}
.task-file-name strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
  font-weight:850;
}
.task-project,
.task-size,
.task-status,
.task-row-action{
  color:#d9d4cb;
  font-size:13px;
  font-weight:820;
}
.task-row-actions{
  justify-self:start;
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.task-project,
.task-size,
.task-status{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.task-size{
  color:#c8c2b8;
}
.task-card.queued{
  opacity:.5;
}
.task-card.running .task-status{
  color:#f1ece5;
}
.task-card.done .task-status{
  color:#f1ece5;
}
.task-card.failed .task-status{
  color:#ff4d3d;
}
.task-status i{
  display:inline-grid;
  place-items:center;
  width:14px;
  height:14px;
  margin-left:6px;
  border:1px solid currentColor;
  border-radius:50%;
  color:var(--accent);
  font-size:10px;
  font-style:normal;
  line-height:1;
}
.task-upload-progress{
  display:grid;
  grid-template-columns:74px 28px 48px;
  align-items:center;
  gap:5px;
  min-width:0;
}
.task-progress-track{
  display:block;
  width:100%;
  min-width:0;
  height:4px;
  border:0;
  border-radius:999px;
  background:linear-gradient(90deg,var(--accent) 0 var(--task-progress),#34353a var(--task-progress) 100%);
  overflow:hidden;
  margin:0;
}
.task-upload-progress em{
  color:#f0ece5;
  font-size:11px;
  font-style:normal;
  font-weight:850;
  white-space:nowrap;
}
.task-upload-progress small{
  color:#9c968e;
  font-size:11px;
  font-weight:760;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.task-row-action{
  padding:0;
  border:0;
  background:transparent;
  color:#928d86;
  cursor:pointer;
  white-space:pre;
  text-align:right;
}
.task-table-head span:last-child{
  justify-self:start;
}
.task-card.failed .task-row-action{
  color:#aaa49a;
}
.task-row-action:hover{
  color:var(--accent);
}
@media (max-width:760px){
  .task-modal{
    width:min(94vw,860px);
    height:min(620px,88vh);
    min-height:0;
  }
  .task-list{
    --task-grid-columns:260px 150px 96px 190px 76px;
  }
  .task-modal-head{
    display:grid;
  }
  .task-table-head,
  .task-card{
    grid-template-columns:var(--task-grid-columns);
  }
}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;min-width:760px}
th,td{padding:13px 10px;text-align:left;border-bottom:1px solid rgba(255,255,255,.07);color:#dcd8cf;font-size:14px}
th{color:var(--muted);font-weight:800}
td img{width:42px;height:42px;object-fit:cover;filter:grayscale(1);border-radius:6px;margin-right:10px;vertical-align:middle}
.progress-line{height:4px;background:#333;border-radius:6px;margin-top:7px;overflow:hidden}
.progress-line span{display:block;height:100%;background:var(--accent)}
.share-modal{width:min(760px,94vw)}
.share-card{border-radius:var(--radius);padding:24px;position:relative;overflow:hidden;background:#1b1c1f}
.share-card::before{content:"";position:absolute;inset:0;background:url('./assets/thumb-01.jpg') center/cover;filter:grayscale(1);opacity:.16}
.share-card>*{position:relative}
.qr{width:148px;height:148px;background:repeating-linear-gradient(45deg,#fff 0 6px,#111 6px 12px);border:10px solid #fff;margin:18px 0}
.wechat-service-modal{width:min(420px,92vw);text-align:center}
.wechat-service-modal h2{margin-bottom:12px}
.wechat-service-modal p{max-width:310px;margin:0 auto 20px;color:#aaa49a;font-size:14px}
.wechat-service-qr{margin:0 auto 8px}
.wechat-service-modal .modal-actions{justify-content:center}
.copy-box{border:1px dashed var(--line);border-radius:var(--radius);padding:16px;margin-top:16px}
.account-modal-backdrop{
  position:fixed;
  inset:0;
  z-index:108;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(9px);
}
.account-modal-backdrop.hidden{display:none!important}
.account-modal{position:fixed;z-index:110;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:var(--shadow);border-radius:var(--radius)}
.account-modal{animation:none}
.feedback-modal{
  padding:28px 32px 32px;
  border:1px solid rgba(255,255,255,.13);
  background:linear-gradient(145deg,rgba(34,35,39,.98),rgba(20,21,24,.98));
}
.feedback-modal .close{
  top:24px;
  right:24px;
  color:#b8b8b8;
}
.feedback-modal h2{
  margin:0;
  color:#f4f4f4;
  font-size:27px;
  line-height:32px;
  font-weight:900;
  letter-spacing:0;
}
.feedback-divider{
  height:1px;
  margin:16px 0 18px;
  background:rgba(255,255,255,.08);
}
.feedback-modal .feedback-field{
  display:block;
  margin:0 0 18px;
  color:#d8d4cc;
  font-size:16px;
  line-height:1;
  font-weight:860;
}
.feedback-modal .feedback-field input,
.feedback-modal .feedback-field textarea{
  margin-top:9px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:9px;
  background:rgba(12,13,16,.46);
  color:#f4f1eb;
  font-size:15px;
  line-height:1.5;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.feedback-modal .feedback-field input{
  height:50px;
  padding:0 14px;
}
.feedback-modal .feedback-textarea-wrap{
  position:relative;
  display:block;
}
.feedback-modal .feedback-field textarea{
  min-height:178px;
  padding:15px 16px 38px;
  resize:none;
}
.feedback-modal .feedback-field input::placeholder,
.feedback-modal .feedback-field textarea::placeholder{
  color:#77736d;
}
.feedback-count{
  position:absolute;
  right:16px;
  bottom:12px;
  color:#928d86;
  font-size:14px;
  line-height:1;
  font-weight:760;
  pointer-events:none;
}
.feedback-modal .primary.full{
  height:54px;
  margin-top:4px;
  border:1px solid #ff4b14;
  border-radius:9px;
  color:#fff;
  background:linear-gradient(180deg,#ff731f,#ff4b14);
  font-size:17px;
  font-weight:950;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
.security-modal{
  padding:28px 32px 32px;
  border:1px solid rgba(255,255,255,.13);
  background:linear-gradient(145deg,rgba(34,35,39,.98),rgba(20,21,24,.98));
}
.security-modal .close{
  top:24px;
  right:24px;
  color:#b8b8b8;
}
.security-modal h2{
  margin:0;
  color:#f4f4f4;
  font-size:27px;
  line-height:32px;
  font-weight:900;
  letter-spacing:0;
}
.security-divider{
  height:1px;
  margin:16px 0 18px;
  background:rgba(255,255,255,.08);
}
.security-list{
  display:grid;
  gap:12px;
}
.security-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto 72px;
  align-items:center;
  gap:18px;
  min-height:68px;
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  background:rgba(12,13,16,.34);
}
.security-row span{
  display:block;
  color:#f0ece5;
  font-size:16px;
  line-height:1.2;
  font-weight:880;
}
.security-row p{
  margin:6px 0 0;
  color:#8f8a83;
  font-size:13px;
  line-height:1.35;
  font-weight:700;
}
.security-row b{
  color:#f4f1eb;
  font-size:15px;
  line-height:1;
  font-weight:850;
  white-space:nowrap;
}
.security-row button{
  width:72px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border-radius:8px;
  font-size:14px;
  line-height:1;
  font-weight:900;
}
.security-row .ghost{
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);
  color:#f0ece5;
}
.security-row .ghost:hover{
  border-color:rgba(242,118,34,.72);
  background:rgba(242,118,34,.1);
}
.security-row.danger-row{
  color:inherit;
  border-color:rgba(255,91,20,.18);
  background:rgba(255,91,20,.045);
}
.security-row.danger-row span{
  color:#ffb9ad;
}
.security-row.danger-row b{
  color:#ff8d7b;
}
.security-row .danger{
  border:1px solid rgba(255,91,20,.74);
  background:rgba(255,91,20,.14);
  color:#ffb9ad;
}
.security-row .danger:hover{
  background:rgba(255,91,20,.2);
}
.profile-modal{
  width:min(720px,88vw);
  padding:28px 32px 32px;
  border:1px solid rgba(255,255,255,.13);
  background:linear-gradient(145deg,rgba(34,35,39,.98),rgba(20,21,24,.98));
}
.profile-modal .close{
  top:24px;
  right:24px;
  color:#b8b8b8;
}
.profile-modal h2{
  margin:0;
  color:#f4f4f4;
  font-size:27px;
  line-height:32px;
  font-weight:900;
  letter-spacing:0;
}
.profile-divider{
  height:1px;
  margin:16px 0 24px;
  background:rgba(255,255,255,.08);
}
.profile-modal .profile-grid{
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  gap:30px;
  align-items:start;
}
.profile-avatar-panel{
  min-height:276px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding-right:28px;
  border-right:1px solid rgba(255,255,255,.09);
}
.profile-avatar-wrap{
  position:relative;
  width:132px;
  height:132px;
}
.profile-modal .profile-img{
  width:132px;
  height:132px;
  border-radius:50%;
  object-fit:cover;
  filter:grayscale(.15) contrast(1.02);
}
.profile-camera-btn{
  position:absolute;
  right:2px;
  bottom:6px;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  color:#fff;
  background:rgba(36,37,40,.92);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.profile-camera-btn svg{
  width:23px;
  height:23px;
}
.profile-avatar-panel p{
  margin:24px 0 0;
  color:#8f8a83;
  font-size:15px;
  line-height:1.7;
  font-weight:760;
  text-align:center;
}
.profile-form{
  min-width:0;
}
.profile-modal .profile-field{
  display:block;
  margin:0 0 24px;
  color:#d8d4cc;
  font-size:16px;
  line-height:1;
  font-weight:860;
}
.profile-input-wrap{
  position:relative;
  display:flex;
  align-items:center;
  margin-top:10px;
}
.profile-modal .profile-input-wrap input{
  width:100%;
  height:54px;
  padding:0 70px 0 16px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:9px;
  background:rgba(12,13,16,.46);
  color:#f4f1eb;
  font-size:17px;
  line-height:1;
  font-weight:820;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.profile-name-count{
  position:absolute;
  right:16px;
  color:#928d86;
  font-size:16px;
  line-height:1;
  font-weight:760;
  pointer-events:none;
}
.profile-id-wrap input{
  padding-right:92px;
}
.profile-id-wrap button{
  position:absolute;
  right:8px;
  width:70px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid rgba(255,255,255,.16);
  border-radius:8px;
  background:rgba(255,255,255,.04);
  color:#f0ece5;
  font-size:14px;
  line-height:1;
  font-weight:900;
}
.profile-id-wrap button:hover{
  border-color:rgba(242,118,34,.72);
  background:rgba(242,118,34,.1);
}
.profile-id-tip{
  margin:2px 0 0;
  color:#8f8a83;
  font-size:14px;
  line-height:1.7;
  font-weight:740;
}
.profile-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  margin-top:42px;
}
.profile-actions button{
  height:54px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border-radius:9px;
  font-size:17px;
  line-height:1;
  font-weight:950;
}
.profile-actions .ghost{
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);
  color:#f0ece5;
}
.profile-actions .primary{
  border:1px solid #ff4b14;
  background:linear-gradient(180deg,#ff731f,#ff4b14);
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
.membership-modal{
  width:min(920px,90vw);
  height:min(584px,86vh);
  max-height:86vh;
  display:flex;
  flex-direction:column;
  padding:22px 28px 0;
  overflow:hidden;
  border-radius:12px;
  background:
    radial-gradient(circle at 8% 10%,rgba(255,255,255,.07),transparent 22%),
    radial-gradient(circle at 82% 0,rgba(242,118,34,.08),transparent 26%),
    linear-gradient(135deg,rgba(28,29,32,.98),rgba(9,10,11,.98) 58%,rgba(24,25,27,.98));
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 32px 96px rgba(0,0,0,.66),inset 0 1px 0 rgba(255,255,255,.05);
  scrollbar-width:none;
}
.membership-modal::-webkit-scrollbar{width:0;height:0}
.membership-modal::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.28;
  background:linear-gradient(120deg,rgba(255,255,255,.08),transparent 24%,transparent 70%,rgba(255,255,255,.04));
}
.membership-close{
  top:20px;
  right:22px;
  z-index:2;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  padding:0;
  border-radius:50%;
  color:transparent;
  font-size:36px;
  font-weight:220;
  line-height:38px;
  transition:transform .16s var(--ease),background .16s var(--ease),color .16s var(--ease);
}
.membership-close::before,
.membership-close::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:22px;
  height:2px;
  border-radius:999px;
  background:#c8c3bc;
  transform-origin:center;
}
.membership-close::before{
  transform:translate(-50%,-50%) rotate(45deg);
}
.membership-close::after{
  transform:translate(-50%,-50%) rotate(-45deg);
}
.membership-close:hover{
  background:rgba(255,255,255,.1);
}
.membership-close:hover::before,
.membership-close:hover::after{
  background:#fff;
}
.membership-close:active{transform:scale(.94)}
.membership-brand{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  width:max-content;
  flex:0 0 auto;
  margin-left:-21px;
  margin-top:-18px;
  margin-bottom:-4px;
}
.membership-brand .brand-logo{
  width:152px;
  height:auto;
}
.membership-layout{
  position:relative;
  z-index:1;
  flex:1 1 auto;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(370px,1fr) 300px;
  gap:24px;
  align-items:start;
}
.membership-main{
  min-width:0;
  padding-top:26px;
}
.membership-hero h2{
  margin:0;
  color:#fff;
  font-size:34px;
  line-height:1.12;
  font-weight:950;
  letter-spacing:0;
}
.membership-hero p{
  margin:8px 0 32px;
  color:#b7b1aa;
  font-size:16px;
  line-height:1.45;
}
.membership-section-title{
  color:#f5f1eb;
  font-size:23px;
  line-height:1;
  font-weight:900;
}
.membership-plans{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:14px;
}
.membership-plan-card{
  position:relative;
  min-height:174px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:20px 18px 18px;
  overflow:hidden;
  text-align:left;
  color:#eee8df;
  background:linear-gradient(145deg,rgba(37,38,42,.72),rgba(15,16,18,.82));
  border:1px solid rgba(255,255,255,.13);
  border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease);
}
.membership-plan-card:hover{
  border-color:rgba(255,255,255,.22);
  background:linear-gradient(145deg,rgba(42,43,47,.82),rgba(16,17,19,.88));
}
.membership-plan-card.is-selected{
  border-color:rgba(242,118,34,.95);
  box-shadow:0 0 0 1px rgba(242,118,34,.32),inset 0 1px 0 rgba(255,255,255,.05);
}
.membership-radio{
  width:20px;
  height:20px;
  border-radius:50%;
  border:2px solid #a9a7a3;
  background:rgba(255,255,255,.03);
}
.membership-plan-card.is-selected .membership-radio{
  border-color:#d8d3ca;
  box-shadow:inset 0 0 0 4px #1b1c1f;
  background:var(--accent);
}
.membership-plan-name{
  margin-top:-22px;
  margin-left:32px;
  color:#fff;
  font-size:16px;
  line-height:22px;
  font-weight:950;
}
.membership-plan-card strong{
  margin-top:22px;
  color:#ff7b24;
  font-size:36px;
  line-height:1;
  font-weight:950;
  letter-spacing:0;
}
.membership-plan-card strong span{
  margin-right:5px;
  font-size:18px;
}
.membership-plan-card strong small{
  margin-left:5px;
  color:#bdb8b1;
  font-size:14px;
  font-weight:800;
}
.membership-plan-card em{
  margin-top:auto;
  color:#aaa49c;
  font-size:12px;
  line-height:1.5;
  font-style:normal;
  font-weight:760;
}
.membership-plan-card[data-plan="monthly"] em{
  margin-top:10px;
}
.membership-save{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
  color:#7e7971;
  font-size:12px;
  font-weight:800;
}
.membership-save b{
  padding:3px 8px;
  border-radius:999px;
  color:#ff8b33;
  background:rgba(242,118,34,.17);
}
.membership-recommend{
  position:absolute;
  top:0;
  right:0;
  padding:8px 10px 9px;
  border-bottom-left-radius:14px;
  color:#ff8b33;
  background:linear-gradient(135deg,rgba(242,118,34,.28),rgba(242,118,34,.12));
  font-size:12px;
  line-height:1;
  font-weight:950;
}
.membership-benefits{
  min-width:0;
  padding:20px 22px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:rgba(8,9,10,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.membership-benefits h3{
  margin:0 0 18px;
  color:#fff;
  font-size:16px;
  line-height:1.2;
}
.membership-benefits ul{
  display:grid;
  gap:14px;
  margin:0;
  padding:0;
  list-style:none;
}
.membership-benefits li{
  display:grid;
  grid-template-columns:38px 1fr;
  gap:12px;
  align-items:center;
  min-width:0;
}
.membership-benefits li > span{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:#ff852e;
  background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.06);
  font-size:12px;
  font-weight:950;
}
.membership-benefits b{
  display:block;
  color:#f5f1ec;
  font-size:14px;
  line-height:1.25;
}
.membership-benefits p{
  margin:3px 0 0;
  color:#9f9992;
  font-size:12px;
  line-height:1.45;
}
.membership-payment{
  position:relative;
  z-index:1;
  flex:0 0 auto;
  display:grid;
  grid-template-columns:minmax(260px,1fr) minmax(170px,210px) 170px;
  gap:18px;
  align-items:center;
  margin:18px -28px 0;
  padding:16px 36px 20px;
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.025);
}
.membership-pay-methods{
  display:flex;
  gap:10px;
  margin-top:12px;
}
.membership-pay-method{
  width:120px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:#eee8df;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  font-size:14px;
  font-weight:900;
  transition:border-color .18s var(--ease),background .18s var(--ease),transform .18s var(--ease);
}
.membership-pay-method:hover{transform:translateY(-1px)}
.membership-pay-method.is-selected{
  border-color:rgba(242,118,34,.95);
  background:rgba(242,118,34,.08);
}
.membership-pay-method .pay-method-icon{
  width:22px;
  height:22px;
  display:block;
  flex:0 0 22px;
  border-radius:6px;
  overflow:hidden;
  background:transparent;
}
.membership-pay-method .pay-method-icon img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.membership-pay-method .pay-method-icon-alipay img{
  transform:scale(1.12);
}
.membership-total{
  text-align:center;
}
.membership-total p{
  margin:0;
  color:#aca69f;
  font-size:14px;
  font-weight:820;
}
.membership-total strong{
  margin-left:8px;
  color:#ff7b24;
  font-size:22px;
  line-height:1;
}
.membership-total small{
  display:block;
  margin-top:9px;
  color:#9c968e;
  font-size:11px;
}
.membership-total a{color:#4b8cff}
.membership-submit{
  height:58px;
  border:0;
  border-radius:10px;
  color:#fff8ef;
  background:linear-gradient(180deg,#ff8e36,#ff651d);
  box-shadow:0 18px 38px rgba(242,118,34,.28),inset 0 1px 0 rgba(255,255,255,.22);
  font-size:18px;
  font-weight:950;
  transition:transform .18s var(--ease),filter .18s var(--ease);
}
.membership-submit:hover{
  transform:translateY(-2px);
  filter:brightness(1.05);
}
.membership-submit:active{transform:scale(.98)}
@media (max-width:1320px){
  .membership-modal{
    width:min(900px,90vw);
    height:min(570px,86vh);
    padding:20px 24px 0;
  }
  .membership-brand{
    margin-top:-16px;
    margin-bottom:-4px;
  }
  .membership-layout{
    grid-template-columns:minmax(360px,1fr) 290px;
    gap:20px;
  }
  .membership-plan-card{
    min-height:166px;
    padding:18px 16px 16px;
  }
  .membership-plan-card strong{font-size:34px}
  .membership-benefits{
    padding:18px 20px;
  }
  .membership-benefits ul{gap:12px}
  .membership-payment{
    grid-template-columns:minmax(250px,1fr) 190px 160px;
    gap:16px;
    margin:16px -24px 0;
    padding:14px 32px 18px;
  }
  .membership-pay-method{
    width:116px;
  }
}
@media (max-width:1040px){
  .membership-modal{
    width:min(760px,94vw);
    height:min(720px,90vh);
    padding:22px 24px 0;
  }
  .membership-close{
    top:24px;
    right:24px;
  }
  .membership-layout{
    grid-template-columns:1fr;
  }
  .membership-hero h2{font-size:34px}
  .membership-hero p{margin-bottom:36px}
  .membership-benefits ul{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px;
  }
  .membership-benefits li{
    grid-template-columns:50px 1fr;
    gap:14px;
  }
  .membership-benefits li > span{
    width:50px;
    height:50px;
  }
  .membership-payment{
    grid-template-columns:1fr;
    gap:16px;
    margin:20px -24px 0;
    padding:18px 24px 24px;
  }
  .membership-total{
    text-align:left;
  }
  .membership-submit{
    height:62px;
  }
}
@media (max-width:680px){
  .membership-brand .brand-logo{width:152px}
  .membership-plans,
  .membership-benefits ul{
    grid-template-columns:1fr;
  }
  .membership-plan-card{
    min-height:250px;
  }
  .membership-pay-methods{
    flex-direction:column;
  }
.membership-pay-method{
    width:100%;
  }
}
.resource-modal{
  width:min(660px,82vw);
  height:min(570px,82vh);
  padding:30px 30px 30px;
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(circle at 9% 12%,rgba(255,255,255,.1),transparent 27%),
    radial-gradient(circle at 82% 8%,rgba(255,255,255,.045),transparent 31%),
    linear-gradient(145deg,rgba(31,33,38,.99),rgba(14,15,18,.99) 62%,rgba(24,26,30,.99));
  box-shadow:0 32px 110px rgba(0,0,0,.68),inset 0 1px 0 rgba(255,255,255,.07);
}
.resource-close{
  top:20px;
  right:22px;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  padding:0;
  border-radius:50%;
  color:transparent;
  font-size:42px;
  font-weight:200;
  line-height:38px;
  transition:transform .16s var(--ease),background .16s var(--ease),color .16s var(--ease);
}
.resource-close::before,
.resource-close::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:22px;
  height:2px;
  border-radius:999px;
  background:#d0cbc4;
  transform-origin:center;
}
.resource-close::before{
  transform:translate(-50%,-50%) rotate(45deg);
}
.resource-close::after{
  transform:translate(-50%,-50%) rotate(-45deg);
}
.resource-close:hover{
  background:rgba(255,255,255,.1);
}
.resource-close:hover::before,
.resource-close:hover::after{
  background:#fff;
}
.resource-close:active{transform:scale(.94)}
.resource-close:focus,
.resource-close:focus-visible{
  outline:0;
  box-shadow:none;
}
.resource{
  height:100%;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.resource-hero h2{
  margin:0;
  color:#fff;
  font-size:28px;
  line-height:1.05;
  font-weight:950;
  letter-spacing:0;
  text-shadow:0 9px 18px rgba(0,0,0,.48);
}
.resource-hero p{
  margin:10px 0 18px;
  color:#b5b1ac;
  font-size:25px;
  line-height:1;
  font-weight:820;
}
.resource-hero p b{
  color:#eee9e2;
  font-size:27px;
  font-weight:950;
}
.resource-expand-link{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-left:12px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--accent);
  font-size:14px;
  font-weight:900;
  vertical-align:baseline;
}
.resource-expand-link i{
  width:7px;
  height:7px;
  border-top:2px solid currentColor;
  border-right:2px solid currentColor;
  transform:rotate(45deg);
}
.resource-expand-link:hover,
.resource-expand-link:focus-visible{
  color:#ff8a2f;
}
.resource-expand-link:focus,
.resource-expand-link:focus-visible{
  outline:0;
  box-shadow:none;
}
.capacity-modal{
  width:min(700px,86vw);
  height:auto;
  max-height:84vh;
  padding:28px 32px 20px;
  overflow:hidden;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(circle at 14% 12%,rgba(255,255,255,.08),transparent 28%),
    radial-gradient(circle at 84% 94%,rgba(242,118,34,.08),transparent 22%),
    linear-gradient(145deg,rgba(31,33,38,.98),rgba(14,15,18,.98) 62%,rgba(25,27,31,.98));
  box-shadow:0 32px 100px rgba(0,0,0,.66),inset 0 1px 0 rgba(255,255,255,.06);
}
.capacity-close{
  top:18px;
  right:20px;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  padding:0 0 6px;
  border-radius:50%;
  color:#d0cbc4;
  font-size:36px;
  font-weight:220;
  line-height:1;
  transition:transform .16s var(--ease),background .16s var(--ease),color .16s var(--ease);
}
.capacity-close:hover{
  background:rgba(255,255,255,.1);
  color:#fff;
  transform:translateY(-1px);
}
.capacity-close:focus,
.capacity-close:focus-visible{
  outline:0;
  box-shadow:none;
}
.capacity-head{
  text-align:center;
}
.capacity-head h2{
  margin:0;
  color:#fff;
  font-size:26px;
  line-height:1.15;
  font-weight:950;
  letter-spacing:0;
}
.capacity-head p{
  margin:10px 0 22px;
  color:#aaa49c;
  font-size:15px;
  line-height:1.45;
  font-weight:760;
}
.capacity-plans{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.capacity-plan-card{
  position:relative;
  min-height:176px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:18px 12px 14px;
  color:#eee8df;
  background:linear-gradient(145deg,rgba(37,38,42,.68),rgba(15,16,18,.8));
  border:1px solid rgba(255,255,255,.13);
  border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease),transform .18s var(--ease);
}
.capacity-plan-card:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.22);
}
.capacity-plan-card.is-selected{
  border-color:rgba(242,118,34,.95);
  box-shadow:0 0 0 1px rgba(242,118,34,.32),0 18px 38px rgba(242,118,34,.12),inset 0 1px 0 rgba(255,255,255,.05);
}
.capacity-plan-card strong{
  color:#fff;
  font-size:30px;
  line-height:1;
  font-weight:950;
}
.capacity-plan-card strong small{
  margin-left:2px;
  font-size:16px;
}
.capacity-plan-card b{
  color:#ff7b24;
  font-size:30px;
  line-height:1;
  font-weight:950;
}
.capacity-plan-card b span{
  margin-right:4px;
  font-size:17px;
}
.capacity-plan-card b small{
  margin-left:4px;
  color:#bdb8b1;
  font-size:15px;
  font-weight:800;
}
.capacity-plan-card p{
  margin:0;
  color:#aaa49c;
  font-size:13px;
  line-height:1.35;
  font-style:normal;
  font-weight:760;
}
.capacity-plan-card i{
  width:20px;
  height:20px;
  margin-top:8px;
  border:2px solid rgba(255,255,255,.45);
  border-radius:50%;
  box-shadow:inset 0 0 0 4px rgba(0,0,0,.24);
}
.capacity-plan-card.is-selected i{
  border-color:var(--accent);
  background:radial-gradient(circle,var(--accent) 0 33%,transparent 36%);
}
.capacity-recommend{
  position:absolute;
  top:0;
  right:0;
  padding:8px 11px 10px;
  border-top-right-radius:12px;
  border-bottom-left-radius:12px;
  color:#fff;
  background:linear-gradient(180deg,#ff8e36,#ff651d);
  font-size:12px;
  line-height:1;
  font-weight:950;
}
.capacity-payment{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:18px;
  margin-top:18px;
  padding:16px 18px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  background:rgba(255,255,255,.035);
}
.capacity-payment h3{
  margin:0 0 14px;
  color:#f5f1eb;
  font-size:16px;
  line-height:1;
}
.capacity-pay-methods{
  display:flex;
  gap:12px;
}
.capacity-pay-method{
  width:118px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:#eee8df;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  font-size:14px;
  font-weight:900;
}
.capacity-pay-method.is-selected{
  border-color:rgba(242,118,34,.95);
  background:rgba(242,118,34,.08);
}
.capacity-pay-method .pay-method-icon{
  width:24px;
  height:24px;
  display:block;
  flex:0 0 24px;
  border-radius:6px;
  overflow:hidden;
  background:transparent;
}
.capacity-pay-method .pay-method-icon img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.capacity-pay-method .pay-method-icon-alipay img{
  transform:scale(1.12);
}
.capacity-total{
  text-align:right;
}
.capacity-total p{
  margin:0;
  color:#aca69f;
  font-size:15px;
  font-weight:820;
}
.capacity-total strong{
  margin-left:8px;
  color:#ff7b24;
  font-size:30px;
  line-height:1;
}
.capacity-total small{
  display:block;
  margin-top:10px;
  color:#9c968e;
  font-size:12px;
}
.capacity-total a{color:#ff8b33}
.capacity-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  width:min(560px,100%);
  margin:14px auto 0;
}
.capacity-submit,
.capacity-later{
  height:50px;
  border-radius:8px;
  font-size:16px;
  font-weight:950;
}
.capacity-submit{
  border:0;
  color:#fff8ef;
  background:linear-gradient(180deg,#ff8e36,#ff651d);
  box-shadow:0 14px 30px rgba(242,118,34,.22),inset 0 1px 0 rgba(255,255,255,.22);
}
.capacity-later{
  color:#f0ece5;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.13);
}
@media (max-width:820px){
  .capacity-modal{
    width:min(620px,94vw);
    height:auto;
    max-height:90vh;
    overflow:auto;
    padding:30px 28px 26px;
  }
  .capacity-plans{
    grid-template-columns:1fr;
  }
  .capacity-plan-card{
    min-height:156px;
  }
  .capacity-payment{
    grid-template-columns:1fr;
  }
  .capacity-total{
    text-align:left;
  }
}
.resource-progress{
  height:9px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.1);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.3);
}
.resource-progress span{
  display:block;
  height:100%;
  border-radius:999px 0 0 999px;
  background:linear-gradient(90deg,#ff7b24,#ff8c32);
  box-shadow:0 0 24px rgba(242,118,34,.28);
}
.resource-usage-card{
  display:grid;
  grid-template-columns:1fr 1px 1fr;
  align-items:center;
  margin-top:18px;
  padding:0 20px;
  min-height:86px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.027));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.resource-usage-item{
  display:grid;
  grid-template-columns:54px 1fr;
  gap:18px;
  align-items:center;
  align-self:stretch;
  min-height:86px;
  min-width:0;
}
.resource-usage-card .resource-usage-item:first-child{
  padding-right:28px;
}
.resource-usage-card .resource-usage-item:last-child{
  padding-left:28px;
}
.resource-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.resource-icon svg{
  width:28px;
  height:28px;
  fill:none;
  stroke:currentColor;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.resource-icon-gallery{
  color:#ff8b2f;
  background:linear-gradient(145deg,rgba(242,118,34,.38),rgba(242,118,34,.14));
}
.resource-icon-recycle{
  color:#65e86a;
  background:linear-gradient(145deg,rgba(67,205,88,.38),rgba(67,205,88,.14));
}
.resource-icon-package{
  color:#b393ff;
  background:linear-gradient(145deg,rgba(147,103,255,.38),rgba(147,103,255,.14));
}
.resource-icon-package-orange{
  color:#ffae46;
  background:linear-gradient(145deg,rgba(255,150,42,.5),rgba(255,127,31,.2));
}
.resource-usage-item p{
  margin:0 0 7px;
  color:#b0aca7;
  font-size:14px;
  line-height:1;
  font-weight:800;
}
.resource-usage-item b{
  color:#fff;
  font-size:22px;
  line-height:1;
  font-weight:950;
  text-shadow:0 8px 18px rgba(0,0,0,.38);
}
.resource-usage-value-row{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}
.resource-manage-link{
  flex:0 0 auto;
  margin-left:0;
  font-size:13px;
  line-height:1;
  white-space:nowrap;
}
.resource-manage-link i{
  width:6px;
  height:6px;
}
.resource-divider{
  width:1px;
  height:62px;
  background:rgba(255,255,255,.13);
}
.resource-package{
  margin-top:18px;
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
}
.resource-package h3{
  margin:0 0 14px;
  color:#fff;
  font-size:18px;
  line-height:1;
  font-weight:950;
  text-shadow:0 8px 18px rgba(0,0,0,.38);
}
.resource-package-list{
  display:grid;
  gap:8px;
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  padding-right:4px;
  scrollbar-width:thin;
  scrollbar-color:rgba(160,160,160,.45) transparent;
}
.resource-package-list::-webkit-scrollbar{width:6px}
.resource-package-list::-webkit-scrollbar-track{background:transparent}
.resource-package-list::-webkit-scrollbar-thumb{background:rgba(160,160,160,.45);border-radius:999px}
.resource-package-card{
  min-height:66px;
  display:grid;
  grid-template-columns:44px minmax(150px,1fr) minmax(92px,.6fr) 1px minmax(142px,.86fr);
  gap:14px;
  align-items:center;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.03));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.resource-package-card strong{
  color:#fff;
  font-size:15px;
  line-height:1.2;
  font-weight:950;
  text-shadow:0 8px 18px rgba(0,0,0,.34);
}
.resource-package-card .resource-icon{
  width:44px;
  height:44px;
  border-radius:12px;
}
.resource-package-card .resource-icon svg{
  width:25px;
  height:25px;
}
.resource-package-card span{
  color:#aaa6a0;
  font-size:14px;
  line-height:1.2;
  font-weight:800;
}
.resource-package-card i{
  width:1px;
  height:36px;
  background:rgba(255,255,255,.13);
}
@media (max-width:1100px){
  .resource-modal{
    width:min(620px,86vw);
    height:min(540px,82vh);
    padding:28px 26px 28px;
  }
  .resource-hero h2{font-size:26px}
  .resource-hero p{margin:12px 0 20px;font-size:14px}
  .resource-usage-card{margin-top:22px;padding:0 20px}
  .resource-icon{width:48px;height:48px;border-radius:13px}
  .resource-icon svg{width:28px;height:28px}
  .resource-usage-item{grid-template-columns:48px 1fr;gap:16px;align-self:stretch;min-height:86px}
  .resource-usage-card .resource-usage-item:first-child{padding-right:24px}
  .resource-usage-card .resource-usage-item:last-child{padding-left:24px}
  .resource-usage-item p{font-size:14px}
  .resource-usage-item b{font-size:21px}
  .resource-package{margin-top:22px}
  .resource-package h3{font-size:18px}
  .resource-package-list{
    flex:1 1 auto;
  }
  .resource-package-card{
    grid-template-columns:42px minmax(136px,1fr) minmax(86px,.58fr) 1px minmax(122px,.84fr);
    gap:12px;
    min-height:68px;
    padding:11px 14px;
  }
  .resource-package-card strong{font-size:15px}
  .resource-package-card span{font-size:13px}
}
@media (max-width:760px){
  .resource-modal{
    width:min(520px,94vw);
    height:min(690px,88vh);
    padding:34px 24px 30px;
  }
  .resource-hero h2{font-size:25px}
  .resource-hero p{font-size:14px}
  .resource-icon svg{width:27px;height:27px}
  .resource-usage-card{
    grid-template-columns:1fr;
    gap:20px;
  }
  .resource-divider{
    width:100%;
    height:1px;
  }
  .resource-usage-card .resource-usage-item:first-child,
  .resource-usage-card .resource-usage-item:last-child{
    padding:0;
  }
  .resource-package-card{
    grid-template-columns:48px 1fr;
    gap:12px 16px;
  }
  .resource-package-list{
    flex:1 1 auto;
  }
  .resource-package-card .resource-icon{grid-row:1 / 4}
  .resource-package-card i{display:none}
  .resource-package-card strong{font-size:15px}
  .resource-package-card span{font-size:13px}
}
.recycle-modal{
  width:min(1100px,82vw);
  height:auto;
  max-height:92vh;
  display:flex;
  flex-direction:column;
}
.recycle-modal > .close{
  top:22px;
  right:22px;
  width:42px;
  height:42px;
  padding:0 0 4px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#d8d2c9;
  font-size:34px;
  font-weight:260;
  line-height:1;
  transition:transform .16s var(--ease),background .16s var(--ease),color .16s var(--ease),box-shadow .16s var(--ease);
}
.recycle-modal > .close:hover{
  background:rgba(255,255,255,.12);
  color:#fff;
  box-shadow:0 0 0 4px rgba(255,255,255,.05);
  transform:translateY(-1px);
}
.recycle-modal > .close:active{
  transform:scale(.94);
  background:rgba(255,255,255,.16);
}
.recycle-modal-actions{
  position:absolute;
  top:24px;
  right:74px;
  display:flex;
  align-items:center;
  gap:8px;
}
.recycle-modal-actions button{
  height:36px;
  padding:0 14px;
  border-radius:8px;
  font-size:13px;
  font-weight:900;
}
.recycle-modal h2{
  min-height:42px;
  margin:-2px 230px 18px 0;
  line-height:42px;
}
.recycle-modal-body{
  flex:1 1 auto;
  height:min(694px,calc(92vh - 116px));
  min-height:0;
  overflow:auto;
  padding-right:4px;
  scrollbar-width:thin;
  scrollbar-color:rgba(150,150,150,.5) transparent;
}
.recycle-modal-body::-webkit-scrollbar{width:6px}
.recycle-modal-body::-webkit-scrollbar-track{background:transparent}
.recycle-modal-body::-webkit-scrollbar-thumb{background:rgba(150,150,150,.5);border-radius:999px}
.recycle-gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.recycle-gallery-card{
  height:340px;
  cursor:default;
}
.recycle-gallery-card .gallery-more-btn{
  right:10px;
  top:10px;
}
.recycle-gallery-card:hover .gallery-more-btn,
.recycle-gallery-card .gallery-more-btn:focus-visible{
  opacity:1;
  transform:translateY(0);
}
.recycle-gallery-card:hover{
  transform:translateY(-3px);
}
.recycle-gallery-card .gallery-cover-frame,
.recycle-gallery-card .gallery-empty-cover{
  height:66%;
}
.recycle-gallery-card .body{
  min-height:34%;
}
.recycle-gallery-card h3{
  padding-right:34px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.recycle-gallery-card p,
.recycle-gallery-card small{
  font-size:13px;
}
.recycle-gallery-card .recycle-status{
  color:#f5d7b8;
  background:rgba(242,118,34,.13);
  border-color:rgba(242,118,34,.34);
}
.recycle-empty-state{
  display:grid;
  place-items:center;
  min-height:100%;
  border:1px dashed rgba(255,255,255,.12);
  border-radius:8px;
  color:var(--muted);
  text-align:center;
}
.recycle-empty-state strong{
  display:block;
  margin-bottom:8px;
  color:#fff;
  font-size:18px;
}
.recycle-empty-state span{
  display:block;
  font-size:14px;
}
.profile-grid{display:grid;grid-template-columns:170px 1fr;gap:22px}
.profile-img{width:132px;height:132px;border-radius:50%;object-fit:cover}
.compact-price{grid-template-columns:1fr 1fr}
.resource .list-row,.list-row{display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid var(--line);padding:15px 0;color:var(--muted)}
.list-row b{color:#fff}
.resource-section-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:18px 0 10px;
  color:#fff;
  font-weight:900;
}
.resource-section-title b{color:var(--accent)}
.recycle-gallery-list{
  display:grid;
  gap:8px;
  margin-bottom:14px;
}
.recycle-gallery-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:8px;
  padding:11px 0;
  border-top:1px solid var(--line);
}
.recycle-gallery-row strong{
  display:block;
  color:#fff;
  font-size:14px;
  line-height:1.25;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.recycle-gallery-row span{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
}
.recycle-empty{
  display:grid;
  place-items:center;
  min-height:82px;
  margin-bottom:14px;
  border:1px dashed rgba(255,255,255,.12);
  border-radius:8px;
  color:var(--muted);
  font-size:13px;
  font-weight:800;
}
.danger-row{color:#ffb0a8}
.notice-icon{width:76px;height:76px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;font-size:36px}
.notice-icon.ok{background:rgba(76,207,122,.14);color:var(--green)}
.notice-icon.warn{background:rgba(242,118,34,.14);color:var(--accent)}
.toast-stack{
  position:fixed;
  left:50%;
  bottom:156px;
  z-index:200;
  display:grid;
  justify-items:center;
  gap:10px;
  width:min(420px,calc(100vw - 36px));
  transform:translateX(-50%);
  pointer-events:none;
}
.toast{
  width:max-content;
  max-width:min(440px,calc(100vw - 36px));
  box-sizing:border-box;
  padding:13px 18px;
  border:1px solid rgba(54,231,137,.78);
  border-radius:8px;
  background:linear-gradient(135deg,#184f35,#123926);
  box-shadow:0 18px 48px rgba(0,0,0,.36),0 0 0 1px rgba(54,231,137,.14),0 0 24px rgba(54,231,137,.22);
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
}
.toast.toast-detail{
  width:min(390px,calc(100vw - 36px));
  align-items:flex-start;
  justify-content:flex-start;
  padding:14px 18px;
}
.toast.toast-warn{
  background:linear-gradient(135deg,#6a3511,#402410);
  border-color:rgba(255,139,38,.82);
  box-shadow:0 18px 48px rgba(0,0,0,.38),0 0 0 1px rgba(255,139,38,.18),0 0 26px rgba(255,111,24,.26);
}
.toast .ok,
.toast .warn{
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  flex:0 0 auto;
  border-radius:50%;
  background:#36e789;
  color:#092416;
  font-size:13px;
  font-weight:950;
}
.toast .warn{
  background:#ff8b26;
  color:#1f0f04;
}
.toast p{
  min-width:0;
  margin:0;
  color:#fff;
  font-size:15px;
  line-height:1.35;
  font-weight:900;
  text-align:center;
  white-space:normal;
}
.toast.toast-detail p{
  text-align:left;
}
.toast p strong{
  display:-webkit-box;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:1;
}
.toast p small{
  display:-webkit-box;
  overflow:hidden;
  margin-top:3px;
  color:#c7c1b8;
  font-size:12px;
  line-height:1.45;
  font-weight:750;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

.preview{
  position:fixed;
  z-index:130;
  inset:0;
  background:#090909;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  overflow:hidden;
}
.preview.hidden{display:none}
.preview-stage{
  position:relative;
  min-height:0;
  display:block;
  padding:0;
  overflow:hidden;
}
.preview-image-layer{
  position:absolute;
  left:0;
  top:0;
  transform-origin:0 0;
  transition:none;
}
.preview-image-layer.dragging{transition:none}
.preview img#previewImg{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:contain;
  filter:contrast(1.02) saturate(1.02);
  user-select:none;
  -webkit-user-drag:none;
}
.preview img#previewImg.draggable{cursor:grab}
.preview img#previewImg.dragging{
  cursor:grabbing;
  transition:none;
}
.preview-close{
  position:absolute;
  z-index:5;
  right:28px;
  top:24px;
  width:48px;
  height:48px;
  border:0;
  border-radius:50%;
  background:transparent;
  color:#f2f2f2;
  font-size:32px;
  line-height:1;
  font-weight:280;
  display:grid;
  place-items:center;
  padding-bottom:4px;
  transition:background .14s var(--ease),color .14s var(--ease);
}
.preview-close:hover{background:rgba(255,255,255,.14);color:#fff}
.preview-close:active{transform:scale(.96);background:rgba(255,255,255,.18)}
.preview-nav{
  position:absolute;
  z-index:4;
  top:0;
  bottom:0;
  width:14vw;
  border:0;
  background:transparent;
  opacity:0;
  display:flex;
  align-items:flex-start;
  transition:opacity .16s var(--ease);
}
.preview-nav:hover{opacity:1}
.preview-nav:disabled{
  opacity:.16;
  pointer-events:none;
}
.preview-nav.prev{left:0;justify-content:flex-start;padding-left:14px}
.preview-nav.next{right:0;justify-content:flex-end;padding-right:14px}
.preview-nav span{
  margin-top:calc(var(--preview-nav-center, 50vh) - 24px);
  width:48px;
  height:48px;
  border-radius:50%;
  background:rgba(28,28,29,.78);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 28px rgba(0,0,0,.28);
  display:grid;
  place-items:center;
  transition:transform .08s var(--ease),background .14s var(--ease);
}
.preview-nav:active span{
  transform:scale(.96);
  background:rgba(255,255,255,.16);
}
.preview-nav span::before{
  content:"";
  width:0;
  height:0;
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
}
.preview-nav.prev span::before{
  border-right:13px solid #fff;
  margin-left:-3px;
}
.preview-nav.next span::before{
  border-left:13px solid #fff;
  margin-right:-3px;
}
.preview-photo-info{
  position:fixed;
  left:30px;
  top:30px;
  z-index:7;
  display:grid;
  gap:10px;
  color:rgba(255,255,255,.92);
  width:260px;
  min-width:260px;
  max-width:260px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  text-shadow:none;
  pointer-events:none;
  letter-spacing:0;
}
.preview-photo-info.light-photo{
  color:rgba(255,255,255,.92);
  text-shadow:none;
}
.preview-info-block,
.preview-selection-info{
  display:grid;
  gap:8px;
  padding:14px 16px 15px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  background:rgba(18,18,19,.58);
  box-shadow:0 10px 28px rgba(0,0,0,.22);
  backdrop-filter:blur(10px);
  width:100%;
  box-sizing:border-box;
  min-width:0;
}
.preview-photo-info strong{
  font-size:26px;
  line-height:1.05;
  letter-spacing:0;
  font-weight:480;
  color:rgba(255,255,255,.9);
  margin-bottom:6px;
}
.preview-photo-info span{
  font-size:15px;
  line-height:1.15;
  font-weight:360;
  color:rgba(255,255,255,.52);
  opacity:1;
}
.preview-photo-info b{
  font-size:15px;
  line-height:1.15;
  font-weight:420;
  color:rgba(255,255,255,.68);
}
.preview-selection-info{
  justify-items:start;
  gap:8px;
  padding:14px 16px 15px;
  height:auto;
  max-height:none;
  align-content:start;
  overflow:visible;
}
.preview-selection-info strong{
  margin:0 0 4px;
  font-size:20px;
  line-height:1.05;
  font-weight:480;
  color:rgba(255,255,255,.9);
}
.preview-selection-client{
  display:flex;
  align-items:center;
  gap:8px;
}
.preview-selection-client img{
  width:24px;
  height:24px;
  border-radius:50%;
  object-fit:cover;
}
.preview-selection-client b,
.preview-selection-info time{
  font-size:15px;
  line-height:1.25;
  font-weight:420;
  color:rgba(255,255,255,.68);
}
.preview-selection-info time{
  display:block;
  font-style:normal;
  color:rgba(255,255,255,.52);
}
.preview-customer-note{
  display:grid;
  width:100%;
  min-width:0;
  height:auto;
  max-height:none;
  padding-top:3px;
  overflow:visible;
}
.preview-customer-note p{
  margin:0;
  padding:8px 9px;
  width:100%;
  box-sizing:border-box;
  min-height:0;
  height:auto;
  max-height:none;
  border-radius:6px;
  background:rgba(0,0,0,.32);
  border:1px solid rgba(255,255,255,.06);
  color:rgba(255,255,255,.78);
  font-size:13px;
  line-height:1.45;
  font-weight:460;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  overflow:visible;
}
.preview-bottom{
  position:relative;
  z-index:6;
  width:100vw;
  min-width:0;
  background:#171717;
  border-top:1px solid rgba(255,255,255,.06);
}
.preview-film-wrap{
  width:100vw;
  max-width:100vw;
  min-width:0;
  height:86px;
  padding:4px 4px 7px;
  overflow:hidden;
  box-sizing:border-box;
}
.filmstrip{
  width:100%;
  max-width:100%;
  min-width:0;
  height:100%;
  display:flex;
  gap:7px;
  overflow-x:scroll;
  overflow-y:hidden;
  scroll-behavior:smooth;
  padding-bottom:12px;
  scrollbar-gutter:stable;
}
.filmstrip::-webkit-scrollbar{height:7px}
.filmstrip::-webkit-scrollbar-track{background:#383838;border-radius:999px}
.filmstrip::-webkit-scrollbar-thumb{background:#8b8b8b;border-radius:999px}
.preview-thumb{
  flex:0 0 96px;
  height:62px;
  padding:0;
  border:2px solid transparent;
  border-radius:4px;
  background:#2b2c30;
  overflow:hidden;
  outline:0;
}
.preview-thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:contrast(1.02) saturate(1.03);
  opacity:.78;
}
.preview-thumb.active{
  border-color:var(--accent);
  box-shadow:0 0 0 1px rgba(242,118,34,.72);
}
.preview-thumb.active img{opacity:1}
.preview-thumb:focus,
.preview-thumb:focus-visible{
  outline:0;
}
.preview-actionbar{
  position:relative;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-top:1px solid rgba(255,255,255,.05);
}
.preview-tools{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
}
.preview-tool{
  position:relative;
  width:34px;
  height:34px;
  flex:0 0 34px;
  box-sizing:border-box;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#f2f2f2;
  display:grid;
  place-items:center;
  transition:background .14s var(--ease),color .14s var(--ease),transform .08s var(--ease);
}
.preview-tool:hover{background:rgba(255,255,255,.11)}
.preview-tool:active{transform:scale(.96);background:rgba(255,255,255,.16)}
.preview-tool:focus,
.preview-tool:focus-visible{
  outline:0;
}
.preview-tool::after{
  content:attr(data-tooltip);
  position:absolute;
  left:50%;
  bottom:calc(100% + 10px);
  transform:translateX(-50%) translateY(4px);
  opacity:0;
  pointer-events:none;
  white-space:nowrap;
  padding:6px 9px;
  border-radius:6px;
  background:rgba(18,18,19,.96);
  border:1px solid rgba(255,255,255,.1);
  color:#fff;
  font-size:12px;
  font-weight:760;
  line-height:1;
  box-shadow:0 8px 24px rgba(0,0,0,.34);
  transition:opacity .14s var(--ease) .3s,transform .14s var(--ease) .3s;
}
.preview-tool:hover::after{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.preview-tool:active::after{
  opacity:0;
  transition-delay:0s;
}
.preview-tool.active{
  background:rgba(242,118,34,.18);
  color:var(--accent);
}
.preview-tool.danger:hover{color:#ff735f}
.tool-icon{
  position:relative;
  width:26px;
  height:26px;
  display:block;
  transform:translateX(-2px);
}
.film-icon{
  background:url("./assets/preview-tool-film.svg") center/contain no-repeat;
}
.film-icon::before,
.film-icon::after{
  display:none;
}
.info-icon{
  background:url("./assets/preview-tool-info.svg") center/contain no-repeat;
}
.info-icon::before{
  display:none;
}
.info-icon::after{
  display:none;
}
.preview-tools .recommend-icon::before,
.preview-tools .recommend-icon::after,
.preview-tools .required-icon::before,
.preview-tools .required-icon::after,
.preview-tools .delete-icon::before,
.preview-tools .delete-icon::after{
  display:none;
}
.preview-tools .recommend-icon{background:url("./assets/menu-recommend.svg") center/contain no-repeat}
.preview-tools .required-icon{background:url("./assets/menu-required.svg") center/contain no-repeat}
.preview-tools .delete-icon{
  position:absolute;
  left:50%;
  top:50%;
  width:28px;
  height:28px;
  background:url("./assets/preview-tool-delete.svg") center/28px 28px no-repeat;
  transform:translate(-50%,-50%);
}
.zoom-out-icon::before,
.zoom-out-icon::after,
.zoom-in-icon::before,
.zoom-in-icon::after{
  display:none;
}
.zoom-out-icon{
  width:28px;
  height:28px;
  background:url("./assets/preview-tool-zoom-out.svg") center/contain no-repeat;
}
.zoom-in-icon{
  width:28px;
  height:28px;
  background:url("./assets/preview-tool-zoom-in.svg") center/contain no-repeat;
}
.preview-count{
  position:absolute;
  right:24px;
  top:50%;
  transform:translateY(-50%);
  color:#6a6a6a;
  font-size:14px;
  font-weight:760;
  white-space:nowrap;
  opacity:1;
  visibility:visible;
  transition:opacity .12s var(--ease),visibility .12s var(--ease);
}
.preview-count.hidden-overlap{
  opacity:0;
  visibility:hidden;
}
.stars{color:var(--yellow)}

@keyframes modalIn{
  from{opacity:0;transform:translateY(12px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes settingReveal{
  from{max-height:0;opacity:0}
  to{max-height:620px;opacity:1}
}
@media (max-width:1500px){
  .dashboard .cards{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:1700px){
  .dashboard .storage-stat{
    padding-right:22px!important;
  }
  .dashboard .storage-stat strong{
    display:none;
  }
}
@media (max-width:1180px){
  .feature-grid,.stats{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .recycle-modal{width:min(980px,92vw)}
  .recycle-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dashboard .stats{grid-template-columns:repeat(5,minmax(0,1fr))}
  .dashboard .stats article{
    padding:20px 18px;
  }
  .dashboard .stats article i,
  .dashboard .storage-stat strong{
    display:none;
  }
  .dashboard .stats span,
  .dashboard .stats b{
    margin-left:0;
  }
  .dashboard .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dashboard .gallery-tools{gap:12px}
  .dashboard .gallery-search{
    flex:1 1 280px;
    justify-content:flex-start;
  }
  .photo-grid{grid-template-columns:repeat(4,minmax(120px,1fr))}
  .dashboard-grid{grid-template-columns:1fr}
  .quick-panel{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
  .quick-panel h2,.usage{grid-column:1/-1}
}
@media (max-width:1000px){
  .hero{min-height:660px}
  .hero h1{font-size:68px}
  .hero-note{position:relative;right:auto;bottom:auto;margin:0 30px 30px}
  .section-head,.help-band,.gallery-layout,.upload-layout{display:block}
  .settings-panel{height:auto;position:static}
  .gallery-bottom{right:0}
  .task-float{right:0}
  body[data-page="gallery"]{
    --gallery-side-width:0px;
  }
  body[data-page="gallery"] .settings-panel,
  body[data-page="gallery"] .task-float{
    display:none!important;
  }
  body[data-page="gallery"] .app-topbar{
    right:0;
  }
  body[data-page="gallery"] .gallery-top-title{
    display:none;
  }
  body[data-page="gallery"] .gallery-top-tabs{
    left:calc(50% + 44px);
    transform:translateX(-50%);
  }
  .case-layout{grid-template-columns:1fr}
  .photo-grid{grid-template-columns:repeat(3,minmax(110px,1fr))}
  .login-modal{
    width:min(92vw,760px);
    min-width:0;
    grid-template-columns:48% 52%;
  }
  .login-visual{min-height:clamp(360px,58vw,520px)}
  .login-form{padding:clamp(30px,5vw,58px) clamp(24px,4vw,52px) clamp(24px,4vw,42px)}
}
@media (max-width:1500px){
  body[data-page="gallery"] .gallery-view-tools{
    gap:8px;
  }
  body[data-page="gallery"] .custom-select-trigger{
    min-width:104px;
  }
}
@media (max-width:1280px){
  body[data-page="gallery"] .app-topbar{
    gap:8px;
    padding:0 18px;
  }
  body[data-page="gallery"] .gallery-top-title{
    font-size:16px;
  }
  body[data-page="gallery"] .top-tab-count{
    display:none;
  }
  body[data-page="gallery"] .gallery-top-tabs button{
    flex-basis:150px;
    width:150px;
    padding:0 10px;
  }
  body[data-page="gallery"] .custom-select-trigger{
    min-width:92px;
    padding:0 9px 0 10px;
    gap:10px;
  }
  body[data-page="gallery"] .gallery-tools-menu .custom-select-trigger{
    min-width:0;
    height:38px;
    padding:0 11px 0 12px;
    font-size:13px;
    gap:10px;
  }
  body[data-page="gallery"] .gallery-view-tools,
  body[data-page="gallery"] .gallery-photo-actions > .gallery-layout-toggle{
    display:none;
  }
  body[data-page="gallery"] .gallery-tools-compact{
    display:block;
  }
}
@media (max-width:1400px){
  .zoom-control{
    display:none;
  }
}
@media (max-width:1120px){
  body[data-page="gallery"] .gallery-top-title{
    display:none;
  }
}
@media (max-width:760px){
  body[data-page="gallery"] .gallery-top-tabs button{
    flex-basis:48px;
    width:48px;
    padding:0;
    gap:0;
  }
  body[data-page="gallery"] .gallery-top-tabs button.active{
    font-size:19px;
  }
  body[data-page="gallery"] .gallery-top-tabs button .top-tab-icon,
  body[data-page="gallery"] .gallery-top-tabs button.active .top-tab-icon{
    width:24px;
    height:24px;
    flex-basis:24px;
  }
  body[data-page="gallery"] .top-tab-label,
  body[data-page="gallery"] .top-tab-count{
    display:none;
  }
}
@media (max-width:760px){
  body[data-page="gallery"] .gallery-bottom{
    display:none;
  }
}
@media (max-width:900px){
  .dashboard-toolbar-right{display:none}
  .dashboard{
    padding:0 18px 22px;
  }
  .dashboard .page-head{
    margin-left:-18px;
    margin-right:-18px;
  }
  .dashboard .stats{grid-template-columns:repeat(5,minmax(0,1fr))}
  .dashboard .stats article{
    height:116px;
    padding:18px 14px;
  }
  .dashboard .stats span{
    min-height:32px;
    padding-top:0;
    font-size:15px;
  }
  .dashboard .stats b{
    margin-top:8px;
    font-size:27px;
  }
  .dashboard .storage-stat b{
    font-size:25px;
  }
  .dashboard .stats b small{
    font-size:10px;
  }
  .dashboard .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dashboard .gallery-tabs,
  .dashboard .gallery-search{
    flex:1 1 100%;
  }
  .dashboard .gallery-search{
    justify-content:stretch;
  }
  .dashboard .gallery-search input{
    width:100%;
  }
  .dashboard .gallery-sort{
    flex:0 0 auto;
  }
  .dashboard .gallery-card,
  .dashboard .create-card{
    min-height:320px;
  }
}
@media (max-width:700px){
  .page{padding:84px 16px 46px}
  .topbar{padding:0 16px}
  .public-nav,.app-nav{display:none}
  .brand{font-size:24px}
  .hero{min-height:auto}
  .hero-copy{padding:104px 22px 42px}
  .hero h1{font-size:50px}
  .hero-desc{font-size:15px}
  .metric-strip,.feature-grid,.pricing-grid,.stats,.cards,.compact-price{grid-template-columns:1fr}
  .dashboard .stats{grid-template-columns:repeat(5,minmax(0,1fr))}
  .dashboard .stats{
    gap:8px;
  }
  .dashboard .stats article{
    height:102px;
    padding:14px 9px;
  }
  .dashboard .stats span{
    min-height:28px;
    font-size:12px;
    line-height:1.18;
  }
  .dashboard .stats b{
    margin-top:7px;
    font-size:21px;
  }
  .dashboard .storage-stat b{
    font-size:19px;
    gap:3px;
  }
  .dashboard .stats b small{
    margin-left:2px;
    font-size:9px;
  }
  .dashboard .cards{grid-template-columns:1fr}
  .dashboard .gallery-card,
  .dashboard .create-card{
    min-height:300px;
  }
  .recycle-modal{width:94vw;max-height:88vh}
  .recycle-modal h2{margin-right:48px}
  .recycle-modal-actions{
    position:static;
    margin:-6px 48px 14px 0;
  }
  .recycle-modal-actions button{
    flex:1 1 0;
  }
  .recycle-modal-body{height:min(654px,calc(88vh - 108px))}
  .recycle-gallery-grid{grid-template-columns:1fr}
  .recycle-gallery-card{height:320px}
  .metric-strip article{padding:18px}
  .photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gallery-main{padding:22px 16px 136px}
  .recycle-preview-banner{
    align-items:flex-start;
    flex-direction:column;
    padding:12px 16px;
  }
  .recycle-preview-actions{
    width:100%;
  }
  .recycle-preview-actions button{
    flex:1 1 0;
  }
  .gallery-bottom{align-items:flex-start;flex-direction:column;padding:12px 16px}
  .upload-thumbs{grid-template-columns:repeat(3,1fr)}
  .quick-panel{display:block}
  .modal{padding:22px}
  .login-modal{padding:0}
  .profile-grid{grid-template-columns:1fr}
  .hero-topline{left:22px;right:22px}
}