:root{
  color-scheme: dark;
  --bg: #111716;
  --panel: #1a211f;
  --panel2: #222b27;
  --line: #303b34;
  --text: #edf1e9;
  --muted: #a3aea6;
  --accent: #bbf36b;
  --ink: #172017;
  --danger: #ffb4a5;
  --radius: 16px;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}
*{
  box-sizing: border-box;
}
body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
}
button,
input,
textarea,
select{
  font: inherit;
}
button{
  cursor: pointer;
}
a{
  color: inherit;
  text-decoration: none;
}
button:disabled{
  cursor: wait;
  opacity: 0.55;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.shell{
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: 100vh;
}
.sidebar{
  position: sticky;
  top: 0;
  height: 100vh;
  border-right: 1px solid var(--line);
  padding: 38px 24px 22px;
  display: flex;
  flex-direction: column;
  background: #141b18;
}
.brand{
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 23px;
  line-height: 1.05;
  font-weight: 850;
  letter-spacing: 0.04em;
}
.mark{
  background: var(--accent);
  color: var(--ink);
  width: 43px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 12px 3px 12px 3px;
  font-size: 32px;
  font-weight: 900;
  transform: skew(-5deg);
}
.brand-sub{
  display: block;
  font-size: 12px;
  letter-spacing: 0.38em;
  font-weight: 500;
  margin-top: 7px;
}
.nav-label{
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.13em;
  margin: 54px 10px 15px;
}
.nav-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 5px;
  border-radius: 9px;
  color: var(--muted);
  font-size: 15px;
}
.nav-item:hover{
  background: var(--panel);
}
.nav-item.active{
  background: #2b3828;
  color: var(--accent);
}
.nav-icon{
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
}
.sidebar-bottom{
  margin-top: auto;
  padding-top: 40px;
}
.edition{
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.sidebar-bottom p{
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
}
.profile{
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  color: var(--text);
  border: none;
  border-top: 1px solid var(--line);
  padding: 20px 0 0;
  margin-top: 24px;
  text-align: left;
  width: 100%;
  font-size: 14px;
  overflow: hidden;
}
.avatar{
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #354634;
  color: var(--accent);
  font-weight: 650;
}
.profile-copy{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile small{
  display: block;
  color: var(--muted);
  font-size: 12px;
}
.workspace{
  min-width: 0;
}
.topbar{
  height: 82px;
  display: flex;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  padding: 0 48px;
  font-size: 14px;
}
.top-note{
  margin-left: auto;
  color: var(--muted);
  font-size: 13px;
}
main{
  padding: 44px 48px 70px;
  min-height: calc(100vh - 142px);
  max-width: 1700px;
  margin: auto;
}
h1{
  font-size: clamp(30px, 3.4vw, 48px);
  letter-spacing: -0.045em;
  line-height: 1.12;
  margin: 10px 0 15px;
  font-weight: 650;
}
h2{
  font-size: 24px;
  letter-spacing: -0.025em;
  line-height: 1.3;
  margin: 0 0 14px;
}
h3{
  font-size: 18px;
  margin: 0 0 7px;
}
.eyebrow{
  color: var(--accent);
  font-size: 12px;
  letter-spacing: 0.15em;
  font-weight: 600;
}
.sub{
  color: var(--muted);
  max-width: 650px;
  margin: 0;
  font-size: 16px;
}
.page-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 34px;
}
.page-head .button{
  flex-shrink: 0;
}
.button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--accent);
  color: var(--ink);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.4;
  min-height: 44px;
}
.button:hover{
  filter: brightness(1.07);
}
.button.secondary{
  background: transparent;
  border-color: #455144;
  color: var(--text);
}
.button.ghost{
  background: transparent;
  border-color: var(--line);
  color: var(--muted);
}
.button.small{
  padding: 8px 14px;
  min-height: 36px;
}
.button.danger{
  background: transparent;
  border-color: #745044;
  color: var(--danger);
}
.toolbar{
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 28px 0 24px;
}
.search{
  flex: 1;
}
.toolbar input{
  max-width: 480px;
}
.toolbar select{
  max-width: 240px;
}
.counter{
  font-size: 14px;
  color: var(--muted);
  margin-left: auto;
  white-space: nowrap;
}
.grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.card{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
  transition:
    transform 0.18s,
    border-color 0.18s;
}
.card:hover{
  transform: translateY(-3px);
  border-color: #536544;
}
.cover{
  height: auto;
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  background: #25332b;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cover img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cover-empty{
  color: #738d6d;
  font-size: 48px;
  font-weight: 300;
  letter-spacing: -0.06em;
}
.cover .tag{
  position: absolute;
  left: 14px;
  top: 14px;
  background: #172019e8;
  color: var(--text);
}
.card-body{
  padding: 20px;
}
.card-author{
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.card-title{
  font-size: 20px;
  letter-spacing: -0.025em;
  line-height: 1.3;
  margin: 0 0 14px;
}
.card-meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.card-actions{
  display: flex;
  gap: 8px;
  padding: 0 20px 20px;
}
.card-actions .button{
  flex: 1;
  padding: 9px;
  font-size: 13px;
}
.tag{
  display: inline-block;
  border: 1px solid #43503f;
  padding: 4px 9px;
  border-radius: 5px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--accent);
}
.tag.muted{
  color: var(--muted);
  border-color: var(--line);
}
.tag.warning{
  color: #f7ce89;
  border-color: #6a5837;
}
.empty{
  border: 1px dashed #40503f;
  border-radius: var(--radius);
  padding: 66px 30px;
  text-align: center;
  background: linear-gradient(120deg, #1a251b, #18201d);
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.empty-icon{
  width: 62px;
  height: 62px;
  border: 1px solid #4c6145;
  border-radius: 17px;
  display: grid;
  place-items: center;
  color: var(--accent);
  margin-bottom: 22px;
}
.empty-icon svg{
  width: 28px;
  height: 28px;
}
.empty p{
  color: var(--muted);
  max-width: 480px;
  margin: 0 0 22px;
}
.empty h2{
  font-size: 24px;
}
.panel{
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 25px;
  border-radius: var(--radius);
  margin-bottom: 20px;
}
.panel.accent{
  background: #233222;
  border-color: #50633a;
}
.panel p{
  color: var(--muted);
}
.stats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
.stat{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
}
.stat strong{
  display: block;
  font-size: 30px;
  letter-spacing: -0.04em;
  color: var(--accent);
}
.stat span{
  color: var(--muted);
  font-size: 14px;
}
.row{
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.row.between{
  justify-content: space-between;
}
.stack{
  display: grid;
  gap: 18px;
}
label{
  display: block;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 7px;
}
input,
textarea,
select{
  width: 100%;
  border: 1px solid #3c483e;
  border-radius: 8px;
  background: #131b16;
  color: var(--text);
  padding: 11px 12px;
  min-height: 44px;
}
input[type="checkbox"]{
  width: 18px;
  min-height: 18px;
  accent-color: var(--accent);
}
input[type="file"]{
  font-size: 14px;
}
textarea{
  resize: vertical;
  min-height: 105px;
}
input::placeholder,
textarea::placeholder{
  color: #7f8d82;
}
.help{
  font-size: 13px;
  color: var(--muted);
  margin: 6px 0 0;
}
.error{
  border: 1px solid #72463f;
  background: #3c2924;
  color: #ffc4b5;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.notice{
  background: #303324;
  border: 1px solid #5d623f;
  color: #e2e5b8;
  padding: 14px 16px;
  border-radius: 9px;
  font-size: 14px;
  margin-bottom: 20px;
}
.notice a{
  text-decoration: underline;
}
footer{
  height: 60px;
  border-top: 1px solid var(--line);
  margin: 0 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
}
.loading{
  color: var(--muted);
  padding: 40px;
  text-align: center;
}
.tabs{
  display: flex;
  gap: 4px;
  background: #111914;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 24px;
}
.tab{
  flex: 1;
  border: 0;
  border-radius: 6px;
  padding: 10px 18px;
  color: var(--muted);
  background: none;
  font-size: 14px;
}
.tab.active{
  background: #33432d;
  color: var(--accent);
}
dialog{
  width: min(760px, calc(100vw - 32px));
  max-height: 90vh;
  border: 1px solid #465240;
  border-radius: 18px;
  background: #1b231e;
  color: var(--text);
  padding: 0;
  box-shadow: 0 30px 100px #0009;
}
dialog::backdrop{
  background: #070c09c9;
  backdrop-filter: blur(6px);
}
.modal-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 28px 0;
}
.modal-head h2{
  margin-bottom: 6px;
}
.modal-body{
  padding: 24px 28px 28px;
}
.close{
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 26px;
  line-height: 1;
  width: 32px;
  height: 32px;
}
.modal-actions{
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}
.dropzone{
  border: 1px dashed #607451;
  border-radius: 10px;
  padding: 24px;
  background: #212e20;
}
.dropzone p{
  color: var(--muted);
  font-size: 14px;
}
.detail{
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 32px;
}
.detail-cover{
  border-radius: 16px;
  overflow: hidden;
}
.detail-cover .cover{
  aspect-ratio: 16 / 9;
}
.detail-copy h1{
  font-size: 38px;
}
.description{
  white-space: pre-wrap;
  color: var(--muted);
  margin: 22px 0;
  overflow-wrap: anywhere;
}
.file-row{
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
}
.file-row:last-child{
  border-bottom: none;
}
.file-row .file-name{
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 14px;
}
.file-row small{
  display: block;
  color: var(--muted);
  font-size: 12px;
}
.table-wrap{
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  max-height: 360px;
}
table{
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
  text-align: left;
}
td,
th{
  padding: 12px 15px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
th{
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  background: #182119;
  position: sticky;
  top: 0;
}
td small{
  display: block;
  color: var(--muted);
}
.mapping{
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.mapping-head{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 14px;
}
.mapping-fields{
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: 10px;
}
.mapping-fields select{
  font-size: 14px;
}
.check{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  margin: 18px 0;
}
.check input{
  flex-shrink: 0;
  margin-top: 3px;
}
.check label{
  margin: 0;
}
progress{
  width: 100%;
  height: 12px;
  accent-color: var(--accent);
}
#toast{
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 14px 22px;
  border: 1px solid #536b41;
  border-radius: 10px;
  background: #2c3d24;
  color: var(--text);
  box-shadow: 0 10px 40px #0008;
  max-width: 90vw;
  z-index: 100;
  display: none;
}
.skip{
  position: fixed;
  top: -100px;
  left: 20px;
  z-index: 1000;
  background: var(--accent);
  color: var(--ink);
  padding: 12px;
}
.skip:focus{
  top: 12px;
}
.muted{
  color: var(--muted);
}
.spaced{
  margin-top: 28px;
}
.full{
  width: 100%;
}
.inline-link{
  color: var(--accent);
  text-decoration: underline;
}
.screen-title{
  margin-bottom: 24px;
}
.progress-label{
  color: var(--muted);
  font-size: 14px;
  margin-top: 10px;
}
.preview-list{
  margin: 18px 0;
}
.preview-list summary{
  cursor: pointer;
  color: var(--muted);
  font-size: 14px;
}
.pagination{
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}
@media (min-width: 1500px){.grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }}
@media (max-width: 1100px){.shell{
    grid-template-columns: 200px minmax(0, 1fr);
  }
.sidebar{
    padding: 30px 16px;
  }
.topbar{
    padding: 0 28px;
  }
main{
    padding: 32px 28px 50px;
  }
.grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
footer{
    margin: 0 28px;
  }
.top-note{
    display: none;
  }
#account{
    margin-left: auto;
  }
.detail{
    grid-template-columns: 1fr;
  }}
@media (max-width: 700px){.shell{
    display: block;
  }
.sidebar{
    height: auto;
    position: static;
    padding: 18px 20px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
.brand{
    font-size: 20px;
  }
.brand-sub{
    font-size: 10px;
  }
.mark{
    width: 34px;
    height: 38px;
    font-size: 26px;
  }
.nav-label,
  .sidebar-bottom{
    display: none;
  }
nav{
    display: flex;
    gap: 6px;
    overflow: auto;
    margin-top: 20px;
  }
.nav-item{
    white-space: nowrap;
    padding: 9px 12px;
    font-size: 14px;
    margin: 0;
  }
.nav-icon{
    width: 18px;
  }
.topbar{
    height: 62px;
    padding: 0 20px;
  }
main{
    padding: 28px 20px 40px;
  }
.page-head{
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 26px;
  }
h1{
    font-size: 36px;
  }
.toolbar{
    flex-wrap: wrap;
  }
.toolbar input,
  .toolbar select{
    max-width: none;
  }
.toolbar .search{
    flex-basis: 100%;
  }
.toolbar select{
    flex: 1;
  }
.grid{
    gap: 15px;
  }
.card-body{
    padding: 14px;
  }
.card-title{
    font-size: 18px;
  }
.card-actions{
    padding: 0 14px 14px;
    flex-direction: column;
  }
.card-author{
    font-size: 11px;
  }
.card-meta{
    font-size: 12px;
  }
.cover{
    aspect-ratio: 16 / 9;
  }
.stats{
    gap: 8px;
  }
.stat{
    padding: 14px 10px;
  }
.stat strong{
    font-size: 25px;
  }
.stat span{
    font-size: 12px;
  }
.panel{
    padding: 20px;
  }
.modal-head{
    padding: 22px 20px 0;
  }
.modal-body{
    padding: 20px;
  }
.mapping-fields{
    grid-template-columns: 1fr;
  }
.modal-actions{
    flex-wrap: wrap;
  }
.modal-actions .button{
    flex: 1;
  }
.empty{
    padding: 42px 20px;
  }
footer{
    margin: 0 20px;
  }
footer span{
    display: none;
  }
.detail-copy h1{
    font-size: 32px;
  }}
@media (max-width: 400px){.grid{
    grid-template-columns: 1fr;
  }
.stats{
    grid-template-columns: 1fr;
  }
.stat{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
.cover{
    aspect-ratio: 16 / 9;
  }}
#toast.visible{
  display: block;
}
.login-code{ font-size: 30px; text-align: center; letter-spacing: .35em; font-variant-numeric: tabular-nums; }
.file-folder{ padding: 12px 0; }
.file-folder summary{ cursor: pointer; font-weight: 600; overflow-wrap: anywhere; }
.folder-content{ padding-left: 20px; border-left: 1px solid #354638; }
.profile-avatar{ position:relative; overflow:hidden; flex-shrink:0; }
.profile-avatar img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.account-identity{ display:flex; align-items:center; gap:20px; }
.account-identity .avatar{ width:80px; height:80px; font-size:28px; }
.account-identity p{ margin:6px 0; overflow-wrap:anywhere; }
.account-footer{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:24px; padding-top:20px; border-top:1px solid #354638; }
#logout{ background: #b42332; border-color: #b42332; color: #fff; }
#logout:hover{ background: #941c29; border-color: #941c29; color: #fff; }
#logout:focus-visible{ outline: 2px solid #ff9ba5; outline-offset: 3px; }
.topbar #breadcrumb{ margin-right: auto; }
.project-tabs{ margin-bottom: 24px; }
.project-tabs a{ text-decoration: none; }
.bulk-project-list{ max-height:320px; overflow:auto; padding:12px; border:1px solid var(--line); border-radius:12px; }
.bulk-project-list .check{ padding:8px 0; }
:root{--bg:#0b1015;--panel:#111a21;--panel2:#18232c;--line:#29343e;--text:#f4f5f7;--muted:#a7b2c0;--accent:#ff672e;--ink:#170b04;--radius:12px;font-size:15px}
body{background:radial-gradient(ellipse at 80% 0, #1b2026 0,transparent 50%),var(--bg)}
.sidebar{background:linear-gradient(180deg,#0d141b 40%,#10191e);padding:30px 20px 22px}
.brand{font-size:22px;gap:10px}
.brand-sub{letter-spacing:.26em;font-size:11px;font-weight:650}
.mark{background:none;transform:none;color:var(--accent);width:49px;height:42px;border-radius:0}
.mark svg{width:100%;height:100%}
.nav-label{font-size:10px;letter-spacing:.16em;margin-top:45px;color:#7e8c9c}
.nav-item{font-size:14px;border:1px solid transparent;padding:13px 12px}
.nav-item.active{background:linear-gradient(90deg,#ff672e24,#ff672e09);border-color:#ff672e27;color:#ff8659;box-shadow:inset 3px 0 var(--accent)}
.nav-item:hover{background:#1b252d}
.nav-item[href="/help.html"]{margin-top:20px;font-size:12px}
.avatar{background:#26303a;color:#ff955f}
.topbar{background:#0c131bcc;height:78px;padding:0 36px;gap:22px}
.top-help{margin-left:auto;color:var(--muted)}
#account{margin-left:0}
#menu-toggle{display:none}
#breadcrumb{color:var(--muted);font-size:13px}
main{padding:38px 36px 64px;max-width:1680px}
h1{font-weight:750;letter-spacing:-.045em;font-size:clamp(32px,3.2vw,48px)}
h2{font-weight:700}
.eyebrow{font-size:10px;letter-spacing:.18em}
.page-head{margin-bottom:30px}
.sub{line-height:1.7}
.button{border-radius:8px;font-weight:700;background:linear-gradient(135deg,#ff763b,#ff5520);border-color:#ff773e;transition:background .15s,box-shadow .15s;min-height:44px}
.button:hover{filter:brightness(1.12);box-shadow:0 4px 20px #ff62251a}
.button.secondary,.button.ghost{background:#111a21;border-color:#33414d;color:var(--text)}
.button.danger{background:#321c20;border-color:#743540;color:#ffaaa7}
.button:disabled{cursor:not-allowed;box-shadow:none}
.button.full{width:100%}
input,select,textarea{background:#0e171e;border-color:#33414d;color:var(--text);border-radius:8px}
input::placeholder,textarea::placeholder{color:#7f8c9b}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
input[type="checkbox"]{accent-color:var(--accent);width:17px;height:17px;min-height:0;flex-shrink:0}
label{font-size:13px;color:#dce2e9}
.help{color:var(--muted);line-height:1.65}
.panel,.card,.stat,.mapping{background:linear-gradient(135deg,#141e26,#10171e);border-color:var(--line)}
.panel.accent{background:#122822;border-color:#265347;color:#a6e2cf}
.notice,.review-note{background:#251e19;border:1px solid #634027;border-radius:10px;padding:18px;color:#f3d4b3}
.review-note{margin-bottom:22px}
.review-note p{margin:5px 0 0;color:#c9beb4;font-size:13px}
.error{background:#361e22;border-color:#6d343f;color:#ffbcb9}
.tag{background:#18252d;border-color:#374957;color:#d4e0ea}
.tag.warning{background:#3b2c17;color:#ffd593}
.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.card{padding:9px;box-shadow:0 8px 24px #0002}
.card:hover{border-color:#a55835;transform:translateY(-2px)}
.card .cover{border-radius:7px;background:#0a1015}
.cover-empty{color:#ce8054;background:radial-gradient(circle at 65% 30%,#683821,#18242e 70%);display:grid;place-items:center;width:100%;height:100%;font-weight:700;font-size:52px}
.card-body{padding:17px 8px 6px}
.card-author{font-size:10px;color:#a3adba;letter-spacing:.09em}
.card-title{font-size:18px;margin:8px 0 18px;min-height:24px}
.card-meta{font-size:12px;border-color:var(--line);padding-top:13px}
.card-open{display:flex;margin-top:17px;justify-content:space-between}
.card-actions{padding:8px;gap:8px}
.card-actions .button{padding:10px;font-size:12px}
.card-actions+.card-actions{padding-top:0}
.card-actions+.card-actions .button{background:transparent;min-height:34px;border-color:transparent}
.card-actions+.card-actions .button:hover{border-color:var(--line)}
.library-toolbar,.file-tools{display:flex;align-items:center;gap:14px;margin:0 0 24px}
.search-field{display:flex;align-items:center;gap:10px;flex:1;min-width:0;background:#101920;border:1px solid #33414d;border-radius:9px;padding:0 14px}
.search-field:focus-within{border-color:var(--accent)}
.search-field>span{font-size:28px;line-height:1;color:#b2bfcd}
.search-field input{background:transparent;border:0;outline:none;min-width:0;width:100%;box-shadow:none;padding:13px 0}
.search-field input:focus-visible{outline:none}
.library-toolbar select{width:185px}
.library-toolbar .help{white-space:nowrap}
.search-empty{grid-column:1/-1;padding:38px;text-align:center;color:var(--muted)}
.back-link{display:inline-block;color:var(--muted);margin:0 0 26px;font-size:13px}
.back-link:hover{color:var(--accent)}
.project-hero{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:center;margin-bottom:36px}
.project-intro h1{font-size:clamp(30px,3.4vw,48px);overflow-wrap:anywhere}
.project-art .cover{border:1px solid var(--line);border-radius:12px}
.project-facts{display:flex;gap:14px;flex-wrap:wrap;color:#c0cad5;font-size:12px}
.project-facts>span{display:flex;gap:6px;align-items:center}
.description{white-space:pre-wrap;font-size:14px;color:#b6c1cd;line-height:1.8;margin:20px 0;overflow-wrap:anywhere;max-height:250px;overflow:auto}
.license-badge,.access-badge{background:#112b24;color:#66ddb5;border:1px solid #24503f;border-radius:20px;padding:4px 10px;font-size:11px}
.access-badge{display:inline-block}
.file-browser{border:1px solid var(--line);border-radius:12px;background:#10171e;overflow:hidden}
.files-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px}
.files-heading h2{margin:6px 0 0;font-size:23px}
.file-tools{margin:0;padding:0 24px 22px}
.file-tools select{width:240px;max-width:45%}
.files-table{width:100%;border-collapse:collapse}
.files-table th{background:#151f28;color:#9aaabc;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.08em}
.files-table th,.files-table td{padding:15px 20px;border-bottom:1px solid #24313c}
.files-table th:first-child,.files-table td:first-child{width:48px;padding-right:0}
.files-table th:last-child,.files-table td:last-child{width:100px;text-align:right}
.files-table td:nth-child(3){white-space:nowrap;color:#a8b5c3;font-size:12px}
.file-title{display:flex;align-items:center;gap:12px;min-width:0}
.file-title>svg{flex-shrink:0;color:#ffb373}
.file-title>span{overflow-wrap:anywhere;font-size:13px}
.file-title small{display:block;color:#7f90a1;font-size:11px;margin-top:4px}
.files-table tr:hover{background:#17212a}
.selection-bar{padding:18px 24px;display:flex;justify-content:space-between;align-items:center;gap:15px;color:var(--muted);font-size:12px}
.workflow{display:flex;gap:10px;list-style:none;padding:0;margin:0 0 28px}
.workflow li{display:flex;align-items:center;gap:8px;flex:1;font-size:12px;color:#8795a6}
.workflow li:not(:last-child):after{content:'';height:1px;background:var(--line);flex:1;margin:0 6px}
.workflow li>span{display:grid;place-items:center;width:30px;height:30px;border:1px solid #455361;border-radius:50%;flex-shrink:0}
.workflow li.current{color:#ff915c}
.workflow li.current>span{background:var(--accent);border-color:var(--accent);color:#190e08;font-weight:800}
.workflow li.complete>span{color:#55d6ac;border-color:#277f64}
.editor-details{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.editor-details>h3,.editor-details>p,.editor-details>div:nth-of-type(1),.editor-details>div:nth-of-type(2){grid-column:1/-1}
.editor-details>p{margin-top:-14px}
.editor-files{border-top:1px solid var(--line);padding-top:22px}
.dropzone{background:transparent;border:0;padding:0}
#folder-drop{border:1px dashed #556471;background:radial-gradient(ellipse at top,#242322,#101820 70%);text-align:center;padding:28px 20px;margin-top:15px}
#folder-drop:focus-visible,#folder-drop.dragover{border-color:var(--accent);outline:2px solid var(--accent)}
#folder-drop strong{display:block;font-size:18px}
#folder-drop p{font-size:12px;color:var(--muted);max-width:420px;margin:8px auto 20px}
.upload-symbol{font-size:35px;color:#ff9a6d;display:block;line-height:1.3;margin-bottom:10px}
.file-row{border-color:var(--line)}
.file-name{overflow-wrap:anywhere;min-width:0}
#uploaded-files:has(.ft-file){margin-top:24px}
#uploaded-files:not(:has(.ft-file)){display:none}
dialog{background:#111a21;border:1px solid #3c4753;border-radius:16px;box-shadow:0 35px 150px #000b;max-height:92vh}
dialog::backdrop{background:#03080dc9;backdrop-filter:blur(7px)}
dialog:has(#project-form),dialog:has(#review-form){width:min(920px,94vw);max-width:920px}
.modal-head{border-color:var(--line)}
.close{border-radius:50%;color:var(--muted);background:#1b2630}
.modal-actions{position:sticky;bottom:-24px;padding:18px 0;background:#111a21;border-top:1px solid var(--line)}
progress{accent-color:var(--accent)}
progress::-webkit-progress-bar{background:#26313a}
progress::-webkit-progress-value{background:linear-gradient(90deg,#ff8344,#ff5827)}
progress::-moz-progress-bar{background:#ff672e}
.tab.active{color:var(--accent);border-color:var(--accent)}
.stats{gap:14px}
.stat{padding:20px;border-radius:10px}
.stat strong{font-size:28px}
.empty{background:linear-gradient(145deg,#17212a,#0e171e);border:1px dashed #3c4854}
.empty-icon{border-color:#5e4536;background:#272019;color:#ff985e}
footer{border-color:var(--line);color:#7f90a1;font-size:11px}
.guest .shell{display:block}
.guest .sidebar{height:78px;position:absolute;z-index:2;top:0;left:0;background:transparent;border:0;padding:20px 36px}
.guest .sidebar>*:not(.brand){display:none}
.guest .topbar{padding-left:300px}
.guest #breadcrumb{display:none}
.guest main{max-width:1600px;padding:0}
.guest footer{max-width:1440px;margin:auto}
.landing-hero{min-height:600px;background:linear-gradient(90deg,#090f16f0 0%,#0b1116bd 35%,#0b111612 80%),linear-gradient(0deg,#0b1015,transparent 30%),url('/forge-workshop.png') center 52%/cover;display:flex;align-items:center;padding:70px 6%}
.landing-copy{max-width:670px}
.hero-label{display:inline-block;border:1px solid #a554304d;background:#2c1d1680;border-radius:30px;padding:7px 14px;color:#ff965e;font-size:10px;letter-spacing:.13em;font-weight:700}
.landing-copy h1{font-size:clamp(42px,4.8vw,72px);line-height:1.08;margin:24px 0}
.landing-copy h1 em{font-style:normal;color:#ff723c}
.landing-copy>p{font-size:18px;line-height:1.7;color:#b9c3ce;max-width:560px}
.hero-actions{display:flex;gap:12px;margin:28px 0 18px}
.hero-actions .button{min-height:50px;padding:14px 25px}
.landing-copy .hero-hint{font-size:12px;color:#b4bec8}
.hero-perks{display:flex;gap:26px;margin-top:34px;font-size:12px;color:#d4dbe3}
.landing-workflow{padding:36px 6% 50px}
.landing-workflow>h2{font-size:30px;margin:10px 0 28px}
.workflow-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.workflow-cards article{border:1px solid var(--line);border-radius:12px;padding:23px;background:linear-gradient(145deg,#19232c,#10171e)}
.workflow-cards article>span{color:#ff8c55;font-size:12px;font-weight:750}
.workflow-cards h3{font-size:17px;margin:20px 0 10px}
.workflow-cards p{font-size:13px;color:var(--muted);line-height:1.7;margin:0}
.creator-plan{margin:0 6% 64px;padding:32px;border:1px solid #684732;border-radius:13px;display:flex;justify-content:space-between;gap:30px;background:linear-gradient(110deg,#282017,#121b22)}
.creator-plan h2{margin:10px 0}
.creator-plan p{color:var(--muted);font-size:13px}
.creator-plan>div:last-child{min-width:280px}
.creator-plan strong{display:block;font-size:30px;margin-bottom:15px}
.creator-plan strong small{font-weight:400;font-size:12px;color:var(--muted)}
@media(min-width:1600px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1150px){.shell{grid-template-columns:205px minmax(0,1fr)}
.sidebar{padding:26px 14px}
.brand{font-size:19px}
.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
main{padding:30px 24px}
.topbar{padding:0 24px}
.project-hero{gap:24px}
.project-intro h1{font-size:34px}
.workflow-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.shell{display:block}
.sidebar{display:none;position:fixed;top:66px;left:0;width:260px;height:calc(100dvh - 66px);z-index:20;box-shadow:20px 0 80px #0009}
.menu-open .sidebar{display:flex}
.topbar{height:66px;padding:0 18px;gap:13px;position:sticky;top:0;z-index:21;background:#0c131bf5}
.top-help{font-size:11px}
#menu-toggle{display:inline-flex}
#breadcrumb{font-size:11px}
#account{font-size:11px;padding:8px 13px}
main{padding:27px 18px 50px}
.page-head{align-items:flex-start;gap:18px}
.page-head .button{padding:11px;font-size:12px}
.library-toolbar{flex-wrap:wrap;gap:10px}
.library-toolbar .search-field{flex-basis:100%}
.library-toolbar select{flex:1}
.grid{gap:12px}
.card{padding:6px}
.card-body{padding:12px 5px 4px}
.card-title{font-size:16px}
.card-author{font-size:9px}
.card-meta{font-size:10px}
.card-open{font-size:12px;padding:10px}
.card-actions{padding:5px;flex-wrap:wrap}
.card-actions .button{flex:1;min-width:95px}
.project-hero{grid-template-columns:1fr;gap:22px}
.project-art{grid-row:1}
.project-art .cover{max-height:320px}
.project-intro h1{font-size:32px}
.files-heading{padding:20px;flex-wrap:wrap}
.files-heading .button{width:100%}
.file-tools{padding:0 15px 18px;flex-wrap:wrap}
.file-tools .search-field{flex-basis:100%}
.file-tools select{max-width:100%;width:100%}
.files-table th,.files-table td{padding:12px 10px}
.files-table th:first-child,.files-table td:first-child{width:32px}
.files-table th:last-child,.files-table td:last-child{width:48px}
.file-title{gap:7px}
.file-title>svg{display:none}
.file-title>span{font-size:12px}
.files-table td:last-child .button{padding:7px}
.selection-bar{padding:16px;flex-wrap:wrap}
.selection-bar .button{width:100%}
.workflow{gap:5px}
.workflow li{font-size:10px;flex-direction:column;text-align:center;gap:6px}
.workflow li:after{display:none}
.editor-details{grid-template-columns:1fr}
.editor-details>*{grid-column:1!important}
.modal-body,.modal-head{padding:20px}
.guest .sidebar{display:block;position:absolute;height:66px;top:0;left:0;width:200px;padding:16px 18px;box-shadow:none}
.guest #menu-toggle{display:none}
.guest .topbar{padding-left:200px;justify-content:flex-end}
.guest .top-help{display:none}
.guest .brand{font-size:19px}
.guest .mark{width:38px;height:34px}
.landing-hero{padding:56px 24px 40px;min-height:570px;background-position:63% center}
.landing-copy h1{font-size:45px}
.landing-copy>p{font-size:16px}
.hero-actions{flex-wrap:wrap}
.hero-actions .button{padding:12px 18px;font-size:13px}
.hero-perks{gap:15px;flex-wrap:wrap;font-size:11px}
.landing-workflow{padding:30px 24px}
.landing-workflow>h2{font-size:26px}
.workflow-cards{gap:12px}
.workflow-cards article{padding:18px}
.creator-plan{margin:12px 24px 40px;padding:24px;flex-direction:column;gap:15px}
.creator-plan>div:last-child{min-width:0}
.guest footer{padding:20px 24px}
.brand-sub{font-size:9px}}
@media(max-width:430px){.grid{grid-template-columns:1fr}
.workflow-cards{grid-template-columns:1fr}
.landing-copy h1{font-size:40px}
.top-help{display:none}
.topbar #account{margin-left:auto}
.card-title{font-size:19px}
.card-meta{font-size:12px}
.card-open{font-size:14px}
.card-actions .button{font-size:13px}
.files-table{min-width:0}
.files-table th{font-size:9px}
.files-table td:nth-child(3){font-size:10px}
.page-head{flex-wrap:wrap}
.selection-bar{font-size:11px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.storage-summary{display:grid;grid-template-columns:auto 1fr;gap:8px 24px;padding:18px 22px;margin:20px 0 14px}
.storage-summary h2{font-size:14px;margin:0}
.storage-summary>p{margin:0;text-align:right;font-size:12px}
.storage-summary progress{grid-column:1/-1;height:6px}
.storage-summary .help{display:none}
.project-stats{display:flex;margin:0 0 22px;gap:22px}
.project-stats .stat{display:flex;align-items:center;gap:9px;background:none;border:0;padding:0}
.project-stats .stat strong{font-size:18px}
.project-stats .stat span{font-size:12px}
.guest:has(.preview-banner) .sidebar{top:40px}
@media(min-width:850px){#project-form{display:grid;grid-template-columns:.9fr 1.1fr;gap:26px}
.editor-details{display:flex;flex-direction:column;gap:15px}
.editor-details>p{margin:0}
.editor-files{padding:0 0 0 24px;border-top:0;border-left:1px solid var(--line)}
#project-form #upload-progress,#save-project{grid-column:1/-1}
.editor-details textarea{min-height:105px}}
:root{--surface:#101920;--surface-raised:#16222c;--border-soft:#23323f;--orange-soft:#ff743d;--success:#6dd8b5}
.sidebar{width:auto;padding:26px 18px 18px;background:linear-gradient(180deg,#0b1219 0%,#101922 70%,#192027 100%);overflow-y:auto;scrollbar-width:thin}
.sidebar .brand{margin-bottom:5px}
.nav-label{margin:36px 12px 12px}
.nav-item{min-height:46px;font-size:13px}
.sidebar-bottom{padding-top:16px}
.sidebar .profile{margin-top:0}
.sidebar .nav-item[href="/help.html"]{border-top:1px solid var(--line);border-radius:0;padding-top:22px;margin-top:24px}
.topbar{background:#0a1118ed;height:78px;backdrop-filter:blur(14px)}
.top-help{font-size:12px}
.top-pricing{color:#a7b2c0;font-size:12px}
.topbar #account{background:#1a2630;border-color:#354552;color:#f3f5f7;border-radius:24px;padding:9px 18px}
.guest .topbar #account{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.workspace-intro{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;isolation:isolate;padding:36px;margin:0 0 30px;border:1px solid #33404a;border-radius:16px;overflow:hidden;background:#121b23}
.workspace-intro:before{content:'';position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,#101922 0%,#111921e8 48%,#10182096),url('/forge-workshop.png') right 48%/cover;opacity:.8}
.workspace-intro h1{font-size:clamp(30px,3vw,44px);max-width:800px;margin:12px 0}
.workspace-intro p{color:#b6c2cf;font-size:14px;margin:0;max-width:650px;line-height:1.7}
.intro-metric{font-size:11px;white-space:nowrap;padding:8px 13px;background:#0d171ecf;border:1px solid #46515b;border-radius:30px;color:#dee6ed;flex-shrink:0}
.workspace-intro .eyebrow{color:#ff9e71}
.workspace-actionbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}
.workspace-actionbar .tabs{margin:0;border:0}
.workspace-actionbar .tab{padding:12px 18px;font-size:13px}
.workspace-actionbar .search-field{max-width:440px}
.workspace-actionbar .button{flex-shrink:0}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:25px;margin:32px 0 20px}
.section-heading h2{font-size:23px;margin:0}
.section-heading h2>span{display:inline-grid;place-items:center;font-size:11px;background:#28333d;border-radius:20px;padding:4px 9px;vertical-align:middle;margin-left:8px}
.section-heading p{color:var(--muted);font-size:12px;margin:7px 0 0}
.section-heading .search-field{max-width:340px}
.storage-card{display:flex;align-items:center;gap:22px;background:linear-gradient(110deg,#1b242c,#101a22);border:1px solid #33434e;border-radius:12px;padding:26px;margin-bottom:24px}
.storage-icon{width:50px;height:50px;border-radius:12px;display:grid;place-items:center;color:#ff995f;background:#422c20;flex-shrink:0}
.storage-icon .nav-icon{width:26px;height:26px}
.storage-content{flex:1;min-width:0}
.storage-label{display:flex;justify-content:space-between;gap:20px;font-size:14px;margin-bottom:13px}
.storage-label strong{font-weight:650}
.storage-label>span{font-size:13px}
.storage-card progress{width:100%;height:7px;border:0;border-radius:20px;display:block;overflow:hidden}
.storage-card p{margin:9px 0 0;color:#9cabb9;font-size:11px;line-height:1.6}
.storage-card.compact .storage-content{max-width:750px}
.storage-card.compact .button{margin-left:auto;white-space:nowrap;font-size:12px}
.creator-grid .card{padding:10px;background:#111b23}
.creator-grid .card .cover{border:1px solid #273440}
.creator-grid .card-title{font-size:19px}
.creator-grid .card-actions{flex-direction:row}
.creator-grid .card-actions .button{min-width:0}
.creator-grid .card-actions:first-of-type .button:first-child{flex:1.25}
.creator-grid .card-actions+.card-actions .button{font-size:11px;color:#a8b8c8}
.creator-grid .card-actions+.card-actions .danger{color:#eb9b94}
.workspace-note{display:flex;gap:17px;align-items:flex-start;padding:22px 24px;background:#111c24;border:1px solid #293b49;border-radius:12px;margin:28px 0}
.workspace-note>.nav-icon{color:#ff985f;flex-shrink:0;width:23px;height:23px}
.workspace-note strong{font-size:14px}
.workspace-note p{font-size:12px;color:#a2b2c2;margin:7px 0 0;line-height:1.8;max-width:900px}
.group-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.group-card{background:linear-gradient(145deg,#18242e,#101920);border:1px solid #30404b;border-radius:14px;padding:24px}
.group-card[hidden],.card[hidden]{display:none}
.group-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}
.group-icon,.delivery-symbol{display:grid;place-items:center;width:46px;height:46px;flex-shrink:0;background:#3e2a20;color:#ff9b68;border-radius:12px}
.group-card h2{margin:24px 0 18px;font-size:22px;overflow-wrap:anywhere}
.group-counts{display:flex;gap:40px;padding-bottom:20px;border-bottom:1px solid #30404b}
.group-counts>div{display:flex;flex-direction:column;gap:3px}
.group-counts strong{font-size:28px;font-weight:650}
.group-counts span{font-size:11px;color:#97a8b9}
.group-rule{color:#9fabb6;font-size:12px;line-height:1.7;min-height:40px;margin:19px 0}
.group-secondary{display:flex;gap:10px;margin-top:10px}
.group-secondary .button{flex:1;padding:9px;font-size:11px}
.status-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid #40505e;border-radius:20px;font-size:10px;color:#bbcad8;text-transform:capitalize;white-space:nowrap}
.status-pill.approved{background:#153129;border-color:#2b6451;color:#72deb7}
.status-pill.pending{background:#342b1d;border-color:#6a512c;color:#eecb84}
.status-pill.rejected,.status-pill.cancelled{background:#281e24;border-color:#573643;color:#dba3ae}
.delivery-list{display:flex;flex-direction:column;gap:14px;margin-top:25px}
.delivery-card{display:flex;align-items:center;gap:24px;background:#121e27;padding:24px;border:1px solid #30424f;border-radius:12px}
.delivery-symbol{background:#1d3435;color:#8ed8c1}
.delivery-main{flex:1}
.delivery-main h3{font-size:17px;margin:0 0 8px}
.delivery-main p{font-size:12px;color:#9aabba;margin:0 0 12px}
.delivery-main progress{width:100%;height:4px;display:block;border:0;max-width:450px}
.delivery-card .button{font-size:12px}
body[data-page="account"] .settings-layout{max-width:1050px;display:grid;grid-template-columns:270px 1fr;border:1px solid #30404d;border-radius:15px;overflow:hidden;background:#111d26}
.settings-layout>.modal-head{padding:28px;background:linear-gradient(155deg,#25323a,#151f28);border-right:1px solid #30404d;display:block}
.settings-layout>.modal-head h2{font-size:25px;margin-bottom:12px}
.settings-layout>.modal-head .sub{font-size:13px}
.settings-layout>.modal-body{padding:30px}
.settings-layout .account-identity{padding:0 0 25px;border-bottom:1px solid #30404b;margin-bottom:8px}
.settings-layout .profile-avatar{width:64px;height:64px}
.settings-layout .account-footer{padding-top:25px;margin-top:30px;border-top:1px solid #30404b}
.settings-layout #profile-form>.button{justify-self:start;width:fit-content;min-width:160px}
.settings-layout input[type="file"]{font-size:12px}
.settings-layout #profile-form>div:has(#delivery-emails){padding:20px;background:#172730;border:1px solid #314854;border-radius:10px}
.settings-layout h3{font-size:16px}
.settings-layout .check label{font-size:12px}
.settings-layout .account-identity p{overflow-wrap:anywhere;font-size:13px}
.free-plan-note{background:linear-gradient(140deg,#2e2820,#122b29);border:1px solid #585044;border-radius:12px;padding:24px}
.free-plan-note h3{font-size:25px;margin:12px 0}
.free-plan-note p{font-size:13px;color:#b9c6c9;line-height:1.8}
.free-plan-note a{color:#ff9b67;font-size:13px}
#creator-form{max-width:760px;padding:30px}
#creator-form label{font-size:13px}
#creator-form>button{margin-top:12px}
#creator-form .help{font-size:12px}
.plan-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:28px 0}
.plan-card{display:flex;flex-direction:column;background:linear-gradient(150deg,#182530,#101a22);border:1px solid #324451;border-radius:13px;padding:24px 20px;position:relative;min-width:0}
.plan-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:47px}
.plan-top h3{font-size:17px;margin:0}
.plan-price{font-size:39px;font-weight:750;letter-spacing:-.04em;margin:20px 0 24px}
.plan-price small{display:block;font-size:10px;letter-spacing:0;color:#95a9ba;font-weight:400;margin-top:5px}
.plan-capacity{font-size:25px;font-weight:650;padding-bottom:20px;border-bottom:1px solid #31404b}
.plan-capacity span{display:block;font-size:11px;font-weight:400;color:#a1b0bd;margin-top:4px}
.plan-description{font-size:12px;color:#bcc8d1;line-height:1.7;min-height:41px;margin:20px 0 0}
.plan-card ul{padding:0;list-style:none;margin:19px 0 25px;color:#b9c6d0;font-size:11px;line-height:2.2}
.plan-card li:before{content:'✓';color:#ef9b69;margin-right:8px}
.plan-card>.button,.plan-card>.help{margin-top:auto;font-size:12px}
.current-plan{border-color:#d47142;box-shadow:0 0 0 1px #ff762d25}
.plan-top .status-pill{font-size:9px;padding:4px 7px}
.billing-summary{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:22px 0 34px;border:1px solid #30434e;padding:26px;border-radius:12px}
.billing-summary h2{font-size:23px;margin:9px 0}
.billing-summary p{font-size:12px;color:#a0b2c1;line-height:1.8;margin:6px 0}
.billing-summary>div+div{padding-left:28px;border-left:1px solid #30434e}
.billing-summary strong{font-size:14px}
.pending-invoice{background:#2d261d;border:1px solid #695131;padding:24px;border-radius:12px;margin-bottom:26px}
.pending-invoice h3{margin:16px 0 8px;font-size:18px}
.pending-invoice p{font-size:13px;color:#c9bca7;overflow-wrap:anywhere}
.invoice-plan{display:flex;align-items:center;gap:15px;background:#22303a;border:1px solid #42525d;border-radius:10px;padding:20px}
.invoice-plan p{margin:5px 0 0;font-size:12px;color:#b5c0c7}
.invoice-plan>.nav-icon,.invoice-plan>span>.nav-icon{width:30px;height:30px;color:#ff9c67}
.landing-pricing{padding:20px 6% 70px}
.landing-pricing>h2{font-size:32px;margin:13px 0}
.pricing-foot{display:flex;align-items:center;gap:22px}
.pricing-foot>span{font-size:12px;color:#9aabba;max-width:450px}
.guest[data-page="pricing"] main{padding:38px 6% 70px}
.guest[data-page="pricing"] .workspace-intro{margin-top:0}
.project-hero{padding:30px;background:linear-gradient(120deg,#16212b,#101921);border:1px solid #33424e;border-radius:15px}
.project-intro h1{font-size:36px}
.project-art{align-self:center}
.project-art .cover{box-shadow:0 15px 45px #0005}
.project-facts{margin-top:22px}
.file-browser{border-color:#344551}
.files-heading{background:linear-gradient(110deg,#1b2a34,#14202a)}
.file-tools{padding-top:20px}
.selection-bar{background:#14232e}
.file-browser .table-wrap{border-radius:0}
.files-table tr:has(input:checked){background:#3b2d22}
.file-browser .files-table td{border-color:#2a3945}
.files-table th{background:#0f1a23}
dialog:has(#project-form){max-width:1160px;width:96vw}
dialog:has(#project-form) .modal-head,dialog:has(#delivery-form) .modal-head,dialog:has(#review-form) .modal-head{padding:28px 32px;background:linear-gradient(110deg,#21303a,#141f28);border-bottom:1px solid #394b58}
dialog:has(#project-form) .modal-body{padding:28px 32px}
#folder-drop{min-height:245px;display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:8px}
#folder-drop .upload-symbol,#folder-drop strong,#folder-drop p{flex-basis:100%;margin-top:0}
#folder-drop p{margin-bottom:9px}
#folder-drop strong{font-size:19px}
.dropzone>.help{font-size:11px}
#queued-files{padding:15px 0;font-size:12px;color:#b7c3cd}
#save-project{position:sticky;bottom:-28px;margin:0;z-index:1;min-height:48px}
dialog:has(#delivery-form),dialog:has(#review-form){width:92vw;max-width:920px}
#delivery-form{padding:24px;background:#16242d;border:1px solid #354853;border-radius:12px}
#delivery-form>.check{padding:15px;background:#1d3038;border:1px solid #3a545b;border-radius:8px}
#delivery-form .check label{font-size:12px}
#review-form .mapping{border-radius:10px;border-color:#3a4d5a;padding:18px}
#review-form .preview-list{background:#14212b;border:1px solid #344653;border-radius:10px;padding:18px}
dialog:has(#group-access-form){width:94vw;max-width:980px}
#group-access-form .bulk-project-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;border:0;padding:0;max-height:330px}
#group-access-form .bulk-project-list .check{margin:0;padding:14px;background:#17252f;border:1px solid #354b59;border-radius:9px}
#group-access-form .bulk-project-list .check:has(input:checked){background:#3b2a20;border-color:#9d603e}
#group-access-form .bulk-project-list label{font-size:13px}
#group-form textarea{min-height:220px}
dialog:has(#group-form){max-width:720px}
.check{align-items:flex-start}
.check input{margin-top:3px}
.modal-body .stack>p{line-height:1.7;font-size:13px}
.login-code{font-size:30px;letter-spacing:.3em;text-align:center}
@media(min-width:850px){#project-form{grid-template-columns:.8fr 1.2fr;gap:30px}
.editor-files{padding-left:30px}
.editor-details{gap:16px}
.editor-details textarea{min-height:130px}}
@media(max-width:1250px){.group-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.plan-top{min-height:30px}
.plan-price small{display:inline;margin-left:8px}
.plan-price{margin:14px 0 20px}
.plan-description{min-height:0}
.workspace-intro{padding:28px}
.workspace-intro h1{font-size:34px}}
@media(max-width:900px){body[data-page="account"] .settings-layout{grid-template-columns:1fr}
.settings-layout>.modal-head{border-right:0;border-bottom:1px solid #30404d;padding:22px}
.settings-layout>.modal-body{padding:24px}
.storage-card{gap:14px;padding:21px;flex-wrap:wrap}
.storage-card.compact .button{margin-left:64px}
.project-hero{padding:22px}
.project-intro h1{font-size:29px}
.group-grid{gap:14px}
.group-card{padding:20px}}
@media(max-width:760px){.sidebar{width:270px;padding:24px 18px}
.sidebar .nav-label{margin-top:26px}
.sidebar-bottom{margin-top:20px}
.workspace-intro{padding:25px 21px;flex-direction:column;align-items:flex-start;margin-bottom:22px}
.workspace-intro h1{font-size:31px;line-height:1.15;margin:13px 0}
.workspace-intro p{font-size:13px}
.intro-metric{font-size:10px;padding:6px 10px}
.workspace-actionbar{gap:12px;flex-wrap:wrap}
.workspace-actionbar>.search-field{flex-basis:100%}
.workspace-actionbar>.button{width:100%}
.workspace-actionbar .tabs{width:100%;display:flex}
.workspace-actionbar .tab{flex:1;text-align:center;padding:10px;font-size:12px}
.storage-card{padding:18px;gap:13px}
.storage-icon{width:36px;height:36px;border-radius:9px}
.storage-icon .nav-icon{width:20px;height:20px}
.storage-label{flex-direction:column;gap:5px;font-size:12px}
.storage-label>span{font-size:12px}
.storage-card.compact .button{width:100%;margin:5px 0 0}
.section-heading{flex-direction:column;align-items:stretch;gap:16px}
.section-heading .search-field{max-width:none}
.section-heading h2{font-size:21px}
.group-grid{grid-template-columns:1fr}
.group-card{padding:24px}
.group-rule{min-height:0}
.group-secondary .button{font-size:12px}
.delivery-card{padding:18px;gap:13px;flex-wrap:wrap}
.delivery-symbol{width:36px;height:36px}
.delivery-main{min-width:180px}
.delivery-card .button{width:100%}
.delivery-card .status-pill{margin-left:49px}
.delivery-main h3{font-size:15px}
.delivery-main p{font-size:11px}
.workspace-note{padding:18px;gap:12px}
.workspace-note p{font-size:12px}
.billing-summary{grid-template-columns:1fr;padding:21px;gap:20px}
.billing-summary>div+div{border-left:0;border-top:1px solid #30434e;padding:20px 0 0}
.plan-grid{gap:12px}
.plan-card{padding:20px 16px}
.plan-top h3{font-size:16px}
.plan-price{font-size:34px}
.plan-price small{display:block;margin:3px 0 0}
.plan-capacity{font-size:23px}
.plan-card ul{font-size:10px}
.plan-card>.button{font-size:11px;padding:10px 8px}
.landing-pricing{padding:25px 24px 45px}
.landing-pricing>h2{font-size:29px}
.pricing-foot{flex-direction:column;align-items:flex-start;gap:16px}
.guest[data-page="pricing"] main{padding:24px 18px}
.top-pricing{font-size:11px}
.guest .topbar{padding-left:180px}
.guest .brand{font-size:17px}
.guest .brand-sub{font-size:8px}
.guest .mark{width:31px}
.guest .topbar #account{font-size:11px;padding:8px 12px}
.guest .topbar .top-pricing{margin-left:auto}
.settings-layout .account-footer{gap:15px;flex-wrap:wrap}
.settings-layout .account-identity{gap:14px}
.settings-layout .profile-avatar{width:46px;height:46px}
#creator-form{padding:21px}
.free-plan-note{padding:19px}
.free-plan-note h3{font-size:22px}
.project-hero{padding:18px}
.project-intro h1{font-size:30px}
.project-hero .row{flex-wrap:wrap}
.project-hero .row .button{flex:1;font-size:12px}
.file-tools{padding-top:18px}
dialog:has(#project-form) .modal-head,dialog:has(#delivery-form) .modal-head,dialog:has(#review-form) .modal-head{padding:21px}
dialog:has(#project-form) .modal-body{padding:21px}
#delivery-form{padding:18px}
#folder-drop{min-height:235px;padding:22px 12px}
#folder-drop strong{font-size:17px}
#folder-drop .button{font-size:12px;padding:11px}
#group-access-form .bulk-project-list{grid-template-columns:1fr}
#group-access-form>.row{flex-wrap:wrap}
#group-access-form>.row .button{flex:1;font-size:12px}
#save-project{bottom:-21px}
.creator-grid .card-actions .button{font-size:12px}}
@media(max-width:380px){.plan-grid{grid-template-columns:1fr}
.guest .topbar{gap:9px;padding-left:164px}
.guest .sidebar{padding-left:14px}
.plan-price small{display:inline;margin-left:8px}
.plan-card ul{font-size:12px}
.plan-card>.button{font-size:13px}}
.tabs{background:#101a22}
.tab.active{background:#36261e;color:#ff884f}
.project-tabs{min-width:300px}
.signin-gateway{max-width:1080px;margin:0 auto;padding:52px 28px;min-height:65vh}
.signin-gateway>.button{margin-right:12px;margin-bottom:12px}
[hidden]{display:none!important}
@media(max-width:760px){.project-tabs{min-width:0}
.signin-gateway{padding:24px 18px}
.signin-gateway>.button{width:100%}}
.guest .sidebar{overflow:hidden}
.landing-hero{box-shadow:inset -90px 0 90px -55px #0b1015;background-image:linear-gradient(270deg,#0b1015 0%,transparent 12%),linear-gradient(90deg,#090f16f0 0%,#0b1116bd 35%,#0b111612 80%),linear-gradient(0deg,#0b1015,transparent 30%),url('/forge-workshop.png')}
.status-pill.blocked{background:#542723;color:#ffb7a5}
.status-pill.reviewed{background:#163c31;color:#88e0b6}
.landing-hero{background-size:100% 100%,100% 100%,100% 100%,cover;background-position:center,center,center,center 52%}
@media(max-width:760px){.landing-hero{background-position:center,center,center,63% center}}
/* Landing hero: the artwork fades into the page on every side instead of ending in a hard edge. */
.landing-hero{position:relative;isolation:isolate;overflow:hidden;background:none!important;box-shadow:none!important}
.landing-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:url('/forge-workshop.png') 72% 48%/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 38%,#000 78%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 14%,#000 72%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0%,#000 38%,#000 78%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 14%,#000 72%,transparent 100%);mask-composite:intersect}
.landing-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 60% 70% at 18% 50%,#0b1015e6 0%,#0b101599 45%,transparent 75%)}
@media(max-width:760px){.landing-hero::before{background-position:63% center;-webkit-mask-image:linear-gradient(180deg,#000 60%,transparent 100%);mask-image:linear-gradient(180deg,#000 60%,transparent 100%);opacity:.55}.landing-hero::after{background:linear-gradient(180deg,#0b101599,#0b1015cc)}}
/* Report link, review state */
button.text-button{background:none;border:0;box-shadow:none;min-height:0;padding:4px 6px;color:#9fb0bf;font-size:12px;font-weight:500;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
button.text-button:hover{color:#ffb088}
.review-banner{margin:16px 0 0;padding:12px 14px;border-radius:10px;background:#33291a;border:1px solid #6a512c;color:#f6dfb2;font-size:13px;line-height:1.55}
.tag.review{background:#33291a;border-color:#6a512c;color:#f0c36f}
/* Signed in: no top bar on desktop (navigation, settings and help live in the sidebar).
   On phones only the menu button and the page name remain. Guests keep Pricing / How it works / Sign in. */
body:not(.guest) .topbar .top-pricing,body:not(.guest) .topbar .top-help,body:not(.guest) #account{display:none}
@media(min-width:761px){body:not(.guest) .topbar{display:none}}
/* File tree: folders keep the structure the creator uploaded */
.ft-tree{border:1px solid #26333e;border-radius:12px;background:#0f171e;padding:6px;max-height:none}
.ft-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 2px 8px;font-size:12px;color:#95a3b2}
.ft-all{display:flex;align-items:center;gap:8px;cursor:pointer;color:#d3dbe2}
.ft-folder>summary{list-style:none;display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;cursor:pointer;user-select:none}
.ft-folder>summary::-webkit-details-marker{display:none}
.ft-folder>summary:hover,.ft-file:hover{background:#16222c}
.ft-caret{width:0;height:0;border-left:6px solid #95a3b2;border-top:5px solid transparent;border-bottom:5px solid transparent;transition:transform .15s;flex:0 0 auto}
.ft-folder[open]>summary .ft-caret{transform:rotate(90deg)}
.ft-children{margin-left:20px;padding-left:10px;border-left:1px dashed #2c3a46}
.ft-file{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;min-height:40px}
.ft-icon{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:#95a3b2;stroke-width:1.6;stroke-linejoin:round}
.ft-icon.folder{fill:#ff8a4c33;stroke:#ff9a6a}
.ft-name{flex:1;min-width:0;overflow-wrap:anywhere;font-size:14px}
.ft-folder>summary .ft-name{font-weight:700}
.ft-meta{color:#95a3b2;font-size:12px;white-space:nowrap}
.ft-check{width:17px;height:17px;flex:0 0 17px;margin:0;accent-color:var(--accent)}
.button.ft-action{min-height:30px;padding:4px 10px;font-size:12px;flex:0 0 auto;width:auto;margin:0}
.button.ft-action .nav-icon{width:15px;height:15px}
.file-tools .button.small{min-height:40px;width:auto;flex:0 0 auto}
@media(max-width:760px){.ft-children{margin-left:10px;padding-left:6px}.ft-meta{display:none}.ft-legend{display:none}}
/* Project file explorer: folders as tiles, breadcrumb navigation, compact file list */
.fx-bar{display:flex;align-items:center;gap:14px;margin:4px 0 16px;flex-wrap:wrap}
.fx-crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:4px;flex:1 1 320px;min-width:0;font-size:14px}
.fx-crumb{background:none;border:0;padding:6px 8px;border-radius:7px;color:#ffb088;font:inherit;font-weight:600;cursor:pointer;min-height:0}
.fx-crumb:hover{background:#1a2631}
.fx-crumb.current{color:#f4f5f7;cursor:default;background:none}
.fx-sep{color:#5d6d7b}
.fx-search{flex:0 1 340px;min-width:200px}
.fx-up{background:none;border:0;color:#95a3b2;font:inherit;font-size:13px;padding:4px 0;margin:0 0 12px;cursor:pointer;min-height:0}
.fx-up:hover{color:#ffb088}
.fx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-bottom:22px}
.fx-tile{position:relative;display:flex;flex-direction:column;gap:6px;padding:16px 16px 14px;border:1px solid #26333e;border-radius:12px;background:linear-gradient(160deg,#16222c,#0f171e);cursor:pointer;transition:border-color .15s,transform .15s;min-width:0}
.fx-tile:hover,.fx-tile:focus-visible{border-color:#6b3a24;transform:translateY(-1px)}
.fx-tile .ft-check{position:absolute;top:12px;right:12px}
.fx-folder-icon{width:34px;height:34px;fill:#ff8a4c33;stroke:#ff9a6a;stroke-width:1.4;stroke-linejoin:round}
.fx-tile-name{font-size:15px;overflow-wrap:anywhere;padding-right:20px}
.fx-tile-meta{color:#95a3b2;font-size:12px}
.button.fx-zip{align-self:flex-start;margin-top:4px;min-height:30px;padding:4px 10px;font-size:12px;width:auto;flex:0 0 auto}
.button.fx-zip .nav-icon{width:14px;height:14px}
.fx-heading{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:#95a3b2;margin:0 0 8px}
.fx-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:6px}
.fx-file{display:flex;align-items:center;gap:10px;padding:7px 10px;border:1px solid #1f2b35;border-radius:9px;background:#0f171e;min-height:44px;min-width:0}
.fx-file:hover{border-color:#33424f}
.fx-file.picked{border-color:#6b3a24;background:#1c140f}
.fx-file .ft-icon{flex:0 0 18px}
.fx-file-name{flex:1;min-width:0;display:flex;flex-direction:column;overflow-wrap:anywhere;font-size:14px}
.fx-file-name small{color:#95a3b2;font-size:11px}
.fx-selection{position:sticky;bottom:14px;z-index:5;display:flex;align-items:center;gap:10px;margin-top:18px;padding:10px 12px 10px 18px;border:1px solid #6b3a24;border-radius:12px;background:#1b130ef2;box-shadow:0 12px 40px #000a;backdrop-filter:blur(8px)}
.fx-selection[hidden]{display:none}
.fx-selection span{flex:1;font-size:14px;font-weight:600}
.fx-selection .button.small{min-height:36px;width:auto;flex:0 0 auto;margin:0}
@media(max-width:760px){.fx-search{flex:1 1 100%}.fx-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.fx-list{grid-template-columns:1fr}.fx-file .ft-meta{display:inline}.fx-selection{flex-wrap:wrap}}
.file-browser>.fx-bar{padding:18px 24px 0;margin-bottom:16px}
.file-browser>.fx-view{padding:0 24px 24px}
.file-browser>.fx-selection{margin:0 24px 24px}
@media(max-width:760px){.file-browser>.fx-bar{padding:14px 14px 0}.file-browser>.fx-view{padding:0 14px 16px}.file-browser>.fx-selection{margin:0 14px 16px}}
/* Folder pictures */
.fx-tile{overflow:hidden;isolation:isolate}
.fx-tile>:not(.fx-tile-img){position:relative;z-index:1}
.fx-tile .ft-check{position:absolute;z-index:2}
.fx-tile-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s;z-index:0}
.fx-tile.has-preview::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,#0b101500 20%,#0b1015e6 85%);opacity:0;transition:opacity .25s}
.fx-tile.preview-ready:hover .fx-tile-img,.fx-tile.preview-ready:focus-visible .fx-tile-img,.fx-tile.preview-ready:hover::after,.fx-tile.preview-ready:focus-visible::after{opacity:1}
.fx-tile.preview-ready:hover .fx-folder-icon,.fx-tile.preview-ready:focus-visible .fx-folder-icon{opacity:0}
.fx-pic-badge{position:absolute!important;top:14px;left:58px;font-size:9px;font-weight:800;letter-spacing:.08em;color:#ffb088;background:#2e1c15;border:1px solid #6b3a24;border-radius:5px;padding:2px 6px}
.fx-tile.preview-ready:hover .fx-pic-badge{opacity:0}
.fx-gallery{display:flex;gap:12px;margin:0 0 20px;align-items:stretch}
.fx-gallery-main{flex:1;min-width:0;padding:0;border:1px solid #26333e;border-radius:12px;overflow:hidden;background:#0b1117;cursor:zoom-in;min-height:0}
.fx-gallery-main img{display:block;width:100%;max-height:360px;object-fit:contain}
.fx-thumbs{display:grid;grid-template-columns:repeat(2,72px);grid-auto-rows:72px;gap:8px;align-content:start;max-height:360px;overflow:auto}
.fx-thumb{padding:0;border:2px solid transparent;border-radius:9px;overflow:hidden;background:#0b1117;cursor:pointer;min-height:0}
.fx-thumb.active{border-color:#ff7a45}
.fx-thumb img{width:100%;height:100%;object-fit:cover;display:block}
dialog:has(.fx-zoom){width:min(1200px,96vw);max-width:1200px}
.fx-zoom{display:block;max-width:100%;max-height:78vh;margin:auto;border-radius:10px}
@media(max-width:760px){.fx-gallery{flex-direction:column}.fx-thumbs{grid-template-columns:repeat(auto-fill,64px);grid-auto-rows:64px;max-height:none}}
/* Modal close button: perfectly centred icon */
.modal-head{align-items:flex-start}
.modal-head .close,button.close{display:grid;place-items:center;width:38px;height:38px;min-width:38px;min-height:0;padding:0;margin:0;flex:0 0 38px;border:1px solid #33424f;border-radius:50%;background:#1b2630;color:#c3ccd5;line-height:0;font-size:0;cursor:pointer}
button.close:hover{background:#26333e;color:#fff;border-color:#50616f}
button.close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
/* Project editor: compact file lists that scroll inside their box, save button always visible */
.ft-tree.ft-compact{max-height:340px;overflow:auto;scrollbar-width:thin}
.ft-compact .ft-file{min-height:34px;padding:5px 10px}
.ft-compact .ft-folder>summary{padding:7px 10px}
.queue-head{display:flex;justify-content:space-between;align-items:baseline;margin:16px 2px 8px;font-size:13px;color:#95a3b2}
.queue-head strong{color:#f4f5f7}
#queued-files>p:empty{display:none}
.editor-footer{position:sticky;bottom:0;z-index:6;margin:8px -32px -28px;padding:16px 32px 20px;background:linear-gradient(180deg,#111a2100,#111a21 30%);display:flex;flex-direction:column;gap:10px}
.editor-footer #save-project{width:100%;box-shadow:0 10px 30px #000a}
@media(max-width:760px){.editor-footer{margin:8px -21px -21px;padding:14px 21px 18px}}
.editor-footer{grid-column:1/-1}
/* Project access: search and revoke */
.access-search{margin:0 0 12px}
.access-table{max-height:52vh;overflow:auto}
.access-actions{text-align:right;white-space:nowrap}
.access-actions .button.small{min-height:30px;padding:4px 10px;font-size:12px;width:auto}
.access-actions .tag{margin-left:6px}
/* Report button on project pages */
.button.report-button{display:inline-flex;align-items:center;gap:7px;width:auto;min-height:36px;padding:7px 14px;font-size:13px;border-color:#5a3a2e;color:#ffb088;background:transparent}
.button.report-button:hover{background:#2a1a14;border-color:#8a4a32}
.report-button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}

/* Public share links */
.tag.shared{background:#16302a;border-color:#2f6655;color:#8fe0c0}
.share-copy{display:flex;gap:8px}
.share-copy input{flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.share-copy .button{flex:none}
@media (max-width:560px){.share-copy{flex-direction:column}}

/* Archives the site cannot open (upload summary) */
.archive-issues{margin:12px 0 18px;padding-left:18px;display:grid;gap:10px}
.archive-issues .help{display:block;margin-top:2px}

/* Billing period switch and PayPal subscription */
.period-switch{display:inline-flex;gap:4px;padding:4px;margin-top:22px;border:1px solid #324451;border-radius:999px;background:#0d151c}
.period-switch button{border:0;background:none;color:#b9c6d0;font:inherit;font-size:13px;font-weight:650;padding:8px 16px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.period-switch button.active{background:#ff672e;color:#14100d}
.period-switch .save-badge{font-size:10px;letter-spacing:.04em;padding:2px 7px;border-radius:999px;background:#16302a;color:#8fe0c0}
.period-switch button.active .save-badge{background:#14100d;color:#ffb48f}
.period-switch+.plan-grid{margin-top:16px}
.subscription-card{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin:16px 0;padding:18px 20px;border:1px solid #2f6655;border-radius:13px;background:#122520}
.subscription-card h3{margin:4px 0}
.subscription-card p{margin:0;color:#b9c6d0}
.subscription-card.suspended{border-color:#6a512c;background:#2a2116}
.subscription-card.cancelled,.subscription-card.expired{border-color:#324451;background:#141e26}

/* Phone menu: a clear vertical drawer (older rules laid the links out in one long row). */
@media(max-width:760px){
 body:not(.guest) .sidebar{width:min(300px,86vw);padding:18px 14px 20px;overflow-y:auto;flex-direction:column}
 body:not(.guest) .sidebar .brand{padding:4px 8px 14px;border-bottom:1px solid var(--line);margin-bottom:8px}
 body:not(.guest) .sidebar nav{display:flex;flex-direction:column;gap:2px;overflow:visible;margin-top:6px}
 body:not(.guest) .sidebar .nav-item{display:flex;align-items:center;gap:12px;white-space:normal;width:100%;padding:13px 12px;font-size:15px;border-radius:10px;min-height:46px}
 body:not(.guest) .sidebar .nav-item .nav-icon{width:20px;height:20px;flex:none}
 body:not(.guest) .sidebar .nav-item.active{background:#ff672e1f;color:#ffb48f}
 body:not(.guest) .sidebar .nav-item[href="/help.html"]{margin-top:10px;padding-top:16px;border-radius:0}
 body:not(.guest) .sidebar .nav-label,body:not(.guest) .sidebar-bottom{display:block}
 body:not(.guest) .sidebar-bottom{margin-top:auto;padding-top:16px}
 body.menu-open::after{content:"";position:fixed;inset:66px 0 0 0;background:#0008;z-index:19}
}