/* ==========================================================================
   准星生成器 · 战术工作台
   ========================================================================== */

.page-builder{
  min-height:100%;
  background:
    radial-gradient(900px 520px at 12% -12%, rgba(255,70,85,.10), transparent 62%),
    radial-gradient(760px 500px at 100% 12%, rgba(255,70,85,.055), transparent 66%),
    linear-gradient(180deg,#111821 0,#151C28 36%,#121923 100%);
  background-attachment:fixed;
}

.builder-topbar{
  position:sticky;
  top:0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:72px;
  padding:0 clamp(18px,2.4vw,42px);
  background:rgba(13,19,26,.92);
  border-bottom:1px solid var(--hair);
  backdrop-filter:blur(14px);
}

.builder-brand{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--color-foreground);
  text-decoration:none;
}
.builder-brand__mark{
  width:34px;
  height:34px;
  padding:5px;
  color:var(--color-primary-bright);
  border:1px solid rgba(255,70,85,.34);
  background:rgba(255,70,85,.08);
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
}
.builder-brand span{ display:flex; flex-direction:column; line-height:1; }
.builder-brand strong{ font-family:var(--font-display); font-size:18px; font-weight:400; }
.builder-brand small{
  margin-top:4px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.24em;
  color:var(--color-muted-foreground);
}

.builder-topbar__actions{ display:flex; align-items:center; gap:18px; }
.builder-live{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--color-muted-foreground);
}
.builder-live i{
  width:7px;
  height:7px;
  background:#4ADE80;
  box-shadow:0 0 0 4px rgba(74,222,128,.10);
}
.builder-back{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  padding:0 15px;
  color:var(--color-foreground);
  text-decoration:none;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.13);
  transition:color var(--t-fast),background var(--t-fast),border-color var(--t-fast);
}
.builder-back:hover{ color:#fff; background:rgba(255,70,85,.12); border-color:rgba(255,70,85,.48); }

.builder-layout{
  display:grid;
  grid-template-columns:minmax(390px,.92fr) minmax(520px,1.08fr);
  gap:clamp(22px,2.6vw,42px);
  align-items:start;
  width:min(1840px,100%);
  margin:0 auto;
  padding:clamp(24px,3vw,44px) clamp(16px,2.4vw,42px) clamp(52px,6vw,86px);
}

.builder-preview{
  position:sticky;
  top:96px;
  min-width:0;
}

.builder-heading{ margin-bottom:20px; }
.builder-heading h1{
  font-size:clamp(36px,4.2vw,58px);
  line-height:1;
  color:#fff;
}
.builder-heading p{
  margin:12px 0 0;
  max-width:58ch;
  color:var(--color-muted-foreground);
  line-height:1.7;
}

.preview-stage{
  position:relative;
  aspect-ratio:4.8/1;
  min-height:180px;
  max-height:none;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.13);
  background:#5F666D;
  clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px);
  transition:background var(--t);
}
.preview-stage[data-background="grass"]{
  background:
    linear-gradient(135deg,rgba(10,28,19,.22),transparent 54%),
    linear-gradient(180deg,#657044,#25391E);
}
.preview-stage[data-background="sand"]{
  background:
    linear-gradient(130deg,rgba(255,255,255,.06),transparent 45%),
    linear-gradient(180deg,#A98362,#5B412C);
}
.preview-stage[data-background="sky"]{
  background:
    linear-gradient(180deg,rgba(211,231,244,.98),rgba(104,133,154,.96) 52%,rgba(58,77,89,.98));
}
.preview-stage::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(70% 60% at 50% 50%,transparent 42%,rgba(0,0,0,.16) 100%);
}

#previewCanvas{
  position:absolute;
  inset:0;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  image-rendering:pixelated;
}

.preview-hud{
  position:absolute;
  left:18px;
  top:16px;
  z-index:2;
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 10px;
  color:#E8EDF3;
  background:rgba(8,12,18,.62);
  border:1px solid rgba(255,255,255,.12);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  backdrop-filter:blur(8px);
}
.preview-hud span + span{ color:var(--color-muted-foreground); }

.preview-corner{
  position:absolute;
  z-index:2;
  width:24px;
  height:24px;
  opacity:.58;
  pointer-events:none;
}
.preview-corner--tl{ left:14px; top:14px; border-left:1px solid #fff; border-top:1px solid #fff; }
.preview-corner--tr{ right:14px; top:14px; border-right:1px solid #fff; border-top:1px solid #fff; }
.preview-corner--bl{ left:14px; bottom:14px; border-left:1px solid #fff; border-bottom:1px solid #fff; }
.preview-corner--br{ right:14px; bottom:14px; border-right:1px solid #fff; border-bottom:1px solid #fff; }

.preview-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-top:14px;
}
.preview-backgrounds{ display:flex; flex-wrap:wrap; gap:6px; }
.preview-backgrounds button{
  min-height:36px;
  padding:0 12px;
  color:var(--color-muted-foreground);
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.11);
  cursor:pointer;
  transition:color var(--t-fast),background var(--t-fast),border-color var(--t-fast);
}
.preview-backgrounds button:hover{ color:#fff; border-color:rgba(255,255,255,.28); }
.preview-backgrounds button.is-active{
  color:#fff;
  background:rgba(224,48,48,.23);
  border-color:rgba(255,70,85,.58);
}
.preview-note{
  margin:0;
  max-width:34ch;
  font-size:11.5px;
  line-height:1.5;
  color:var(--color-muted-foreground);
  text-align:right;
}

.builder-settings{
  min-width:0;
  background:#111A24;
  border:1px solid #2A3745;
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.profile-bar{
  display:grid;
  grid-template-columns:auto auto;
  justify-content:start;
  align-items:center;
  gap:14px;
  min-height:48px;
  padding:0 14px;
  background:#111B25;
  border-bottom:1px solid #2A3745;
}
.profile-bar__label{
  font-size:13px;
  font-weight:500;
  color:#F2F5F8;
  white-space:nowrap;
}
.profile-bar__tools{ display:flex; align-items:center; gap:0; }
.profile-bar__tools button{
  display:grid;
  place-items:center;
  width:36px;
  height:32px;
  padding:0;
  color:#D7DDE3;
  background:#1A2632;
  border:1px solid #35424F;
  cursor:pointer;
}
.profile-bar__tools button + button{ border-left:0; }
.profile-bar__tools button:hover{ color:#fff; background:#2A3744; }
.profile-bar__tools button:first-child{ color:#FF6D72; }
.profile-bar__tools svg{ width:17px; height:17px; }
.profile-bar__divider{ width:1px; height:22px; margin:0 5px; background:#3B4854; }
.profile-bar__select{ display:block; min-width:0; }
.profile-bar__select select{
  width:100%;
  min-height:32px;
  padding:0 32px 0 10px;
  color:#F3F6F8;
  background:#1A2632;
  border:1px solid #35424F;
  appearance:none;
  cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,#AAB4BD 50%),linear-gradient(135deg,#AAB4BD 50%,transparent 50%);
  background-position:calc(100% - 16px) 13px,calc(100% - 11px) 13px;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
}

.builder-tabs{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  min-height:48px;
  background:#0C141D;
  border-bottom:1px solid #2A3745;
}
.builder-tabs button{
  min-height:48px;
  padding:0 12px;
  color:#7F8C99;
  background:transparent;
  border:0;
  border-bottom:2px solid transparent;
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  cursor:pointer;
  transition:color var(--t-fast),background var(--t-fast),border-color var(--t-fast);
}
.builder-tabs button:hover{ color:#fff; background:#131E29; }
.builder-tabs button[aria-selected="true"]{
  color:#fff;
  background:#151F2A;
  border-bottom-color:#FF4655;
}
.builder-tabs button:disabled{ color:#46525E; cursor:not-allowed; background:transparent; }

.settings-panel{
  max-height:calc(100vh - 386px);
  min-height:420px;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#56616C #111A24;
}
.settings-panel::-webkit-scrollbar{ width:10px; }
.settings-panel::-webkit-scrollbar-track{ background:#111A24; }
.settings-panel::-webkit-scrollbar-thumb{
  background:#56616C;
  border:3px solid #111A24;
}

.control-group{ border-bottom:1px solid #2A3745; }
.control-group:last-child{ border-bottom:0; }
.control-group__title{
  margin:0;
  padding:13px 14px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  color:#F6F8FA;
  background:#0E1720;
  border-bottom:1px solid #293642;
  text-transform:uppercase;
}

.control-row{
  display:grid;
  grid-template-columns:minmax(190px,1fr) minmax(290px,1.05fr);
  gap:16px;
  align-items:center;
  min-height:52px;
  padding:8px 14px;
  background:#17212C;
  border-top:1px solid #273440;
  transition:background var(--t-fast),opacity var(--t-fast);
}
.control-row:nth-child(even){ background:#1B2631; }
.control-row:first-of-type{ border-top:0; }
.control-row:hover{ background:#202C38; }
.control-row.is-disabled{ opacity:.38; pointer-events:none; }
.control-label{ min-width:0; }
.control-label strong{
  display:block;
  font-size:13px;
  font-weight:500;
  color:#F2F5F8;
}
.control-label small{
  display:block;
  margin-top:2px;
  font-size:11px;
  line-height:1.35;
  color:#8D99A6;
}
.control-input{ min-width:0; }

.toggle-group{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; }
.toggle-option{
  min-height:34px;
  color:#8794A0;
  background:#1E2935;
  border:1px solid #34414E;
  cursor:pointer;
  font-size:12px;
  font-weight:600;
  transition:color var(--t-fast),background var(--t-fast),border-color var(--t-fast);
}
.toggle-option + .toggle-option{ border-left:0; }
.toggle-option:hover{ color:#fff; background:#2A3744; }
.toggle-option.is-active{
  color:#fff;
  background:#2D8C69;
  border-color:#37A77B;
}

.range-group{
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:10px;
  align-items:center;
}
.range-group input[type="number"],
.hex-input,
.select-wrap select{
  width:100%;
  min-height:34px;
  color:#F4F7FA;
  background:#0A1118;
  border:1px solid #34414E;
  border-radius:0;
}
.range-group input[type="number"]{
  padding:0 7px;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
.range-group input[type="number"]:focus,
.hex-input:focus,
.select-wrap select:focus{ outline:0; border-color:#9CA8B3; box-shadow:0 0 0 1px #9CA8B3; }
input[type="range"]{
  width:100%;
  height:4px;
  appearance:none;
  background:#7A858F;
  border-radius:0;
  cursor:pointer;
}
input[type="range"]::-webkit-slider-thumb{
  width:13px;
  height:13px;
  appearance:none;
  background:#F4F7FA;
  border:2px solid #8D99A6;
  border-radius:50%;
}
input[type="range"]::-moz-range-thumb{
  width:11px;
  height:11px;
  background:#F4F7FA;
  border:2px solid #8D99A6;
  border-radius:50%;
}

.color-group{
  display:grid;
  grid-template-columns:minmax(130px,1fr) 40px minmax(110px,1fr);
  gap:6px;
  align-items:center;
}
.select-wrap{ position:relative; }
.select-wrap select{
  padding:0 32px 0 9px;
  appearance:none;
  cursor:pointer;
}
.select-wrap::after{
  content:"";
  position:absolute;
  right:12px;
  top:50%;
  width:6px;
  height:6px;
  border-right:1px solid #AAB4BD;
  border-bottom:1px solid #AAB4BD;
  transform:translateY(-65%) rotate(45deg);
  pointer-events:none;
}
.color-group input[type="color"]{
  width:40px;
  height:34px;
  padding:3px;
  background:#0A1118;
  border:1px solid #34414E;
  cursor:pointer;
}
.hex-input{ padding:0 9px; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
.hex-input.is-invalid{ border-color:#FF8A8A; box-shadow:0 0 0 1px #FF8A8A; }

.builder-actions{
  display:grid;
  grid-template-columns:1.35fr repeat(3,minmax(0,1fr));
  gap:7px;
  padding:14px;
  background:#0E1720;
  border-top:1px solid #2A3745;
}
.action{
  min-height:40px;
  padding:0 11px;
  color:#D6DCE2;
  background:#1C2732;
  border:1px solid #35424F;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  transition:color var(--t-fast),background var(--t-fast),border-color var(--t-fast),transform var(--t-fast);
}
.action:hover{ color:#fff; background:#283540; border-color:#51606D; }
.action:active{ transform:translateY(1px); }
.action--primary{
  color:#fff;
  background:#E03030;
  border-color:#E03030;
}
.action--primary:hover{ background:#C9252B; border-color:#C9252B; }
.action--quiet{ color:#8D99A6; }
#resetBuilder{ grid-column:1 / -1; min-height:34px; }

.import-panel{
  margin:0 20px 14px;
  padding:14px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.10);
}
.import-panel[hidden]{ display:none; }
.import-panel label{
  display:block;
  margin-bottom:8px;
  font-size:12px;
  font-weight:700;
  color:var(--color-foreground);
}
.import-panel textarea{
  width:100%;
  min-height:82px;
  resize:vertical;
  padding:10px;
  color:var(--color-foreground);
  background:#0B1118;
  border:1px solid rgba(255,255,255,.14);
  font:12px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;
}
.import-panel textarea:focus{ outline:0; box-shadow:0 0 0 2px var(--color-ring); }
.import-error{ min-height:18px; margin:7px 0 0; color:#FF9A9A; font-size:11.5px; }
.import-actions{ display:flex; gap:8px; margin-top:6px; }
.import-actions .action{ flex:1; }

.code-panel{
  margin:0 20px 20px;
  border:1px solid rgba(255,255,255,.11);
  background:#0A1017;
}
.code-panel__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:9px 12px;
  color:var(--color-muted-foreground);
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:11px;
}
.code-panel__head span:first-child{
  color:var(--color-foreground);
  font-weight:700;
  letter-spacing:.12em;
}
.code-panel__value{
  display:block;
  min-height:48px;
  max-height:112px;
  overflow:auto;
  padding:12px;
  color:#D8E1EC;
  font:12px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.builder-toast{
  position:fixed;
  left:50%;
  bottom:28px;
  z-index:100;
  max-width:min(92vw,480px);
  padding:12px 16px;
  color:#fff;
  background:linear-gradient(135deg,#202A38,#111821);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 24px 60px -28px rgba(0,0,0,.95);
  opacity:0;
  transform:translate(-50%,16px);
  pointer-events:none;
  transition:opacity var(--t),transform var(--t);
}
.builder-toast.is-on{ opacity:1; transform:translate(-50%,0); }
.builder-toast.is-error{ color:#FFE0E0; border-color:rgba(255,138,138,.48); }

@media (max-width:1180px){
  .builder-layout{ grid-template-columns:minmax(340px,.82fr) minmax(460px,1.18fr); }
  .control-row{ grid-template-columns:minmax(160px,.9fr) minmax(240px,1.1fr); gap:14px; }
}

@media (max-width:1020px){
  .builder-layout{ grid-template-columns:minmax(0,1fr); }
  .builder-preview{ position:static; }
  .preview-stage{ width:min(720px,100%); margin:0 auto; min-height:360px; max-height:none; }
  .preview-toolbar{ width:min(720px,100%); margin:14px auto 0; }
  .settings-panel{ max-height:none; }
}

@media (max-width:700px){
  .builder-topbar{ min-height:64px; padding:0 16px; }
  .builder-live{ display:none; }
  .builder-brand strong{ font-size:16px; }
  .builder-back{ min-height:36px; padding:0 11px; font-size:12px; }
  .builder-layout{ padding:22px 14px 54px; gap:24px; }
  .builder-heading h1{ font-size:38px; }
  .preview-stage{ min-height:160px; clip-path:none; }
  .preview-toolbar{ align-items:flex-start; flex-direction:column; }
  .preview-note{ max-width:none; text-align:left; }
  .control-row{ grid-template-columns:minmax(0,1fr); gap:10px; padding:13px 16px; }
  .builder-actions{ grid-template-columns:1fr 1fr; padding:14px 16px 10px; }
  #resetBuilder{ grid-column:1 / -1; }
  .import-panel,.code-panel{ margin-left:16px; margin-right:16px; }
}

@media (max-width:460px){
  .builder-tabs button{ font-size:11px; letter-spacing:.04em; }
  .color-group{ grid-template-columns:minmax(100px,1fr) 38px minmax(92px,1fr); }
  .color-group input[type="color"]{ width:38px; }
}


/* ==========================================================================
   游戏截图同构布局
   ========================================================================== */
.builder-layout{
  display:block;
  width:min(1480px,100%);
  margin:0 auto;
  padding:clamp(20px,2.5vw,34px) clamp(14px,2.2vw,34px) clamp(50px,6vw,80px);
}
.builder-preview{
  position:sticky;
  top:0;
  z-index:20;
  width:100%;
  min-width:0;
  padding-top:8px;
  background:#151C28;
}
.builder-preview .builder-tabs{
  display:flex;
  justify-content:center;
  min-height:42px;
  margin:0 0 8px;
  background:transparent;
  border:0;
}
.builder-preview .builder-tabs button{
  width:auto;
  min-width:148px;
  min-height:42px;
  background:transparent;
  border:0;
  border-bottom:2px solid transparent;
  color:#8995A1;
}
.builder-preview .builder-tabs button[aria-selected="true"]{
  color:#fff;
  background:transparent;
  border-bottom-color:#34B6C5;
}
.preview-stage{
  width:100%;
  min-height:0;
  max-height:none;
  margin:0;
  border:1px solid rgba(255,255,255,.22);
  border-radius:4px;
  clip-path:none;
  background:url("assets/valorant-range-preview.jpg") center/cover no-repeat;
}
.preview-stage::before{
  background:radial-gradient(72% 64% at 50% 48%,transparent 38%,rgba(0,0,0,.18) 100%);
}
.preview-zones{
  position:absolute;
  inset:0;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  pointer-events:none;
}
.preview-zones span{
  justify-self:center;
  align-self:start;
  margin-top:12%;
  padding:5px 9px;
  color:#fff;
  background:rgba(18,20,20,.58);
  border:1px solid rgba(255,255,255,.18);
  font-size:12px;
  font-weight:600;
}
.builder-preview .profile-bar{
  min-height:50px;
  margin-top:-1px;
  border-radius:0 0 4px 4px;
  border-color:#34414E;
}
.builder-settings{
  margin-top:16px;
}
.settings-panel{
  max-height:none;
}
@media (max-width:1020px){
  .builder-layout{ display:block; }
  .builder-preview .builder-tabs button{ min-width:0; flex:1; padding:0 6px; }
  .preview-stage{ width:100%; min-height:0; }
}
@media (max-width:700px){
  .builder-layout{ padding:14px 10px 48px; }
  .builder-preview .builder-tabs{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
  .builder-preview .builder-tabs button{ min-width:0; padding:0 4px; font-size:11px; }
  .preview-zones span{ margin-top:14%; padding:3px 5px; font-size:10px; }
  .builder-preview .profile-bar{ grid-template-columns:auto auto; }
}

html.is-embedded .builder-topbar{ display:none; }
html.is-embedded .builder-layout{ padding-top:12px; min-height:100vh; }
html.is-embedded .builder-toast{ bottom:18px; }

/* 参考游戏截图的宽横幅比例 */
.preview-stage{ aspect-ratio:4.8/1; }


/* VCRDB 式九宫格预览 */
.builder-layout{
  display:grid;
  grid-template-columns:minmax(320px,380px) minmax(0,1fr);
  gap:18px;
  align-items:start;
  width:100%;
  padding:10px 12px 28px;
}
.builder-preview{
  position:sticky;
  top:0;
  width:auto;
  padding-top:0;
  background:transparent;
}
.builder-preview .builder-tabs{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  min-height:40px;
  margin:0 0 7px;
}
.builder-preview .builder-tabs button{
  min-width:0;
  padding:0 4px;
  font-size:11px;
}
.preview-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:5px;
}
.preview-tile{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  background:#2A3038;
  border:1px solid rgba(255,255,255,.13);
}
.preview-tile img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.preview-tile canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  image-rendering:pixelated;
}
.builder-preview .profile-bar{
  margin-top:8px;
  border-radius:2px;
}
.builder-settings{
  margin-top:0;
  min-width:0;
}
.control-row{
  grid-template-columns:minmax(150px,.9fr) minmax(230px,1.1fr);
  gap:12px;
  padding:8px 12px;
}
.settings-panel{ max-height:none; }
@media (max-width:900px){
  .builder-layout{ display:block; padding:8px 10px 28px; }
  .builder-preview{ position:static; }
  .preview-grid{ width:min(420px,100%); margin:0 auto; }
  .builder-preview .profile-bar{ width:min(420px,100%); margin:8px auto 0; }
  .builder-settings{ margin-top:14px; }
}

.control-label strong{ display:flex; align-items:center; gap:6px; }
.control-info{
  display:inline-grid;
  place-items:center;
  width:14px;
  height:14px;
  flex:none;
  color:#B8C1CA;
  border:1px solid #6F7A84;
  border-radius:50%;
  font-size:9px;
  font-style:normal;
  line-height:1;
  cursor:help;
}

/* 设置分组与信息图标 */
.control-group__title{
  padding:16px 0 10px;
  color:#F4F7FA;
  background:transparent;
  border-bottom:0;
  font-size:13px;
  letter-spacing:0;
  text-transform:none;
}
.control-group{
  margin-bottom:12px;
  border-bottom:0;
}
.control-info{
  color:#4AA6C4;
  border-color:#4AA6C4;
}

/* 左侧预览固定，右侧参数独立滚动 */
.builder-layout{
  height:calc(100vh - 20px);
  overflow:hidden;
}
.builder-settings{
  height:calc(100vh - 20px);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-right:4px;
  scrollbar-width:thin;
  scrollbar-color:#56616C #111A24;
}
.builder-settings::-webkit-scrollbar{ width:9px; }
.builder-settings::-webkit-scrollbar-track{ background:#111A24; }
.builder-settings::-webkit-scrollbar-thumb{
  background:#56616C;
  border:2px solid #111A24;
}
@media (max-width:900px){
  .builder-layout{ height:auto; overflow:visible; }
  .builder-settings{ height:auto; overflow:visible; padding-right:0; }
}

/* 交互优化：避免数字文本与原生控件重叠 */
.control-input,
.color-group,
.range-group{ min-width:0; }
.range-group input[type="number"]{
  appearance:textfield;
  -moz-appearance:textfield;
  min-width:58px;
  padding-left:6px;
  padding-right:6px;
  text-align:center;
}
.range-group input[type="number"]::-webkit-outer-spin-button,
.range-group input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.color-group{
  grid-template-columns:minmax(120px,1fr) 38px minmax(108px,1fr);
}
.color-group select,
.hex-input{ min-width:0; }
.hex-input{
  padding-left:7px;
  padding-right:7px;
  font-size:11px;
  letter-spacing:-.02em;
}
.settings-panel{ overflow-x:hidden; }

/* 交互反馈 */
.control-row{ transition:background 160ms ease,box-shadow 160ms ease; }
.control-row:hover{ box-shadow:inset 2px 0 0 rgba(52,182,197,.34); }
.toggle-option{ transition:color 140ms ease,background 140ms ease,border-color 140ms ease,transform 100ms ease; }
.toggle-option:active{ transform:scale(.985); }
input[type="range"]{ transition:filter 140ms ease; }
input[type="range"]:hover{ filter:brightness(1.16); }
input[type="range"]::-webkit-slider-thumb{ transition:transform 120ms ease,box-shadow 120ms ease; }
input[type="range"]:hover::-webkit-slider-thumb{ transform:scale(1.12); box-shadow:0 0 0 4px rgba(244,247,250,.10); }
.preview-tile{ transition:border-color 160ms ease,transform 160ms ease; }
.preview-tile:hover{ border-color:rgba(52,182,197,.58); transform:translateY(-1px); }
.builder-preview .builder-tabs button{ transition:color 150ms ease,border-color 150ms ease,background 150ms ease; }
.profile-bar__tools button,
.action{ transition:background 150ms ease,border-color 150ms ease,color 150ms ease,transform 100ms ease; }
.profile-bar__tools button:active,
.action:active{ transform:translateY(1px); }