:root{color:#17324f;background:#f4f8ff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Microsoft YaHei,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--blue: #2f7df4;--blue-dark: #1e5fc8;--cyan: #21c7ee;--violet: #7567f7;--ink: #102033;--text: #263b57;--muted: #6a7c96;--line: rgba(131, 159, 194, .36);--line-strong: rgba(47, 125, 244, .5);--panel: rgba(255, 255, 255, .88);--panel-strong: rgba(255, 255, 255, .96);--shadow: 0 22px 58px rgba(37, 71, 116, .14)}:root{color:#eef4ea;background:#050705;--blue:#76b900;--blue-dark:#a8e700;--cyan:#a8e700;--violet:#76b900;--ink:#f5f7f2;--text:#d9e0d5;--muted:#8e9a8a;--line:rgba(118,185,0,.24);--line-strong:rgba(118,185,0,.55);--panel:rgba(12,16,12,.92);--panel-strong:rgba(15,20,14,.98);--shadow:0 24px 70px rgba(0,0,0,.38)}.app-shell{padding:0 30px 40px}.studio-nav{height:72px;margin:0 -30px 38px;padding:0 max(30px,calc((100vw - 1480px)/2));border-bottom:1px solid #ffffff17;display:flex;align-items:center;justify-content:space-between;background:#050705df;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);position:sticky;top:0;z-index:100}.studio-brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:800}.studio-brand img{width:42px;height:42px;object-fit:cover;border-radius:8px}.studio-brand b{font-size:10px;color:#a8e700;letter-spacing:.16em;margin-left:5px}.studio-nav>div{display:flex;gap:28px}.studio-nav>div a{color:#9da898;text-decoration:none;font-size:13px}.studio-nav>div a:hover,.studio-nav>div a.active{color:#a8e700}.product-kicker{display:block;color:#a8e700;font-size:10px;letter-spacing:.24em;font-weight:800;margin-bottom:12px}.hero h1{color:#f5f7f2}.hero p{color:#8e9a8a}.panel{border-color:#283426;background:linear-gradient(180deg,#10150ffa,#080b08f0);box-shadow:var(--shadow)}button:hover:not(:disabled){border-color:#76b900;box-shadow:0 10px 24px #76b9001a}.upload-box strong{color:#fff}.upload-box:after{background:#76b900;box-shadow:0 0 0 5px #76b9001f,0 0 18px #76b900b3}.segmented button.active,.layout-grid button.active,.color-option.active{background:#1a2416;color:#a8e700;border-color:#76b900}.background-tool button{background:linear-gradient(180deg,#1a2615,#10190d);color:#a8e700;border-color:#526b45}.primary-button{background:linear-gradient(135deg,#5f9500,#76b900 52%,#9adb20);color:#071000;border-color:#a8e700;box-shadow:0 18px 36px #76b90033}.crop-stage{background-image:linear-gradient(45deg,#151b14 25%,transparent 25%),linear-gradient(-45deg,#151b14 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#151b14 75%),linear-gradient(-45deg,transparent 75%,#151b14 75%)}.crop-header,.result-header{border-color:#293625}h2,h3{color:#f1f5ee}@media(max-width:700px){.studio-nav{padding:0 18px;margin:0 -18px 28px}.studio-nav>div a:first-child{display:none}.app-shell{padding:0 18px 28px}.studio-brand span{font-size:14px}}*{box-sizing:border-box}body{margin:0;min-width:320px;background:linear-gradient(rgba(47,125,244,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(47,125,244,.055) 1px,transparent 1px),radial-gradient(circle at 14% 2%,rgba(33,199,238,.2),transparent 30%),radial-gradient(circle at 88% 10%,rgba(117,103,247,.16),transparent 34%),linear-gradient(180deg,#fbfdff,#eef6ff,#f8fbff);background-size:44px 44px,44px 44px,auto,auto,auto}button,input,select{font:inherit}button{min-height:40px;border:1px solid var(--line);border-radius:8px;background:linear-gradient(180deg,#fff,#f4f8ff);color:var(--text);cursor:pointer;box-shadow:0 1px #ffffffe6 inset,0 0 0 1px #2f7df40d;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,color .18s ease,transform .18s ease}button:hover:not(:disabled){border-color:#2f7df475;box-shadow:0 10px 24px #2f7df41f,0 0 0 1px #2f7df41f;transform:translateY(-1px)}button:disabled{color:#9aa8ba;cursor:not-allowed;background:#eef3fa}.app-shell{min-height:100vh;padding:30px}.hero{display:flex;align-items:end;justify-content:space-between;max-width:1480px;margin:0 auto 22px;padding:4px 2px}.hero h1{margin:0;color:var(--ink);text-shadow:0 0 28px rgba(40,240,255,.18);font-size:clamp(30px,4vw,46px);line-height:1.08;letter-spacing:0}.hero p{max-width:560px;margin:12px 0 0;color:var(--muted);font-size:17px}.workspace{display:grid;grid-template-columns:minmax(280px,340px) minmax(420px,1fr) minmax(300px,380px);gap:18px;max-width:1480px;margin:0 auto;align-items:start}.panel{overflow:hidden;border:1px solid rgba(169,194,225,.68);border-radius:8px;background:linear-gradient(180deg,#fffffff5,#f7fbffe0),var(--panel);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)}.controls-panel,.result-panel{padding:18px}.upload-box{position:relative;display:grid;gap:8px;padding:18px;border:1px solid rgba(47,125,244,.36);border-radius:8px;background:linear-gradient(180deg,#fffffff0,#ecf6ffe6),repeating-linear-gradient(135deg,rgba(47,125,244,.07) 0 1px,transparent 1px 9px);cursor:pointer}.upload-box:after{content:"";position:absolute;right:16px;top:18px;width:9px;height:9px;border-radius:999px;background:var(--cyan);box-shadow:0 0 0 5px #21c7ee24,0 0 18px #21c7eea6}.upload-box span,.field span{color:var(--muted);font-size:12px;font-weight:700}.hint{color:var(--muted);font-size:12px;line-height:1.5}.upload-box strong{color:var(--ink);font-size:17px}.upload-box input{display:none}.field{display:grid;gap:8px;margin-top:15px}select,input[type=number],.color-picker{width:100%;min-height:42px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--text);padding:0 12px;outline:none;box-shadow:0 1px #ffffffe6 inset}select:focus,input[type=number]:focus{border-color:var(--blue);box-shadow:0 0 0 4px #35a3ff24}input[type=range]{width:100%;accent-color:var(--blue)}.color-picker{height:44px;padding:4px}.swatches,.color-options,.button-row,.segmented,.download-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.swatches{grid-template-columns:repeat(5,1fr)}.color-options{grid-template-columns:repeat(2,minmax(0,1fr))}.swatch{min-height:38px;border:1px solid var(--line-strong);box-shadow:0 0 0 1px #ffffffd9 inset,0 7px 16px #1f2d4714}.swatch.active{border-color:var(--blue);box-shadow:0 0 0 3px #2f6fec29,0 10px 20px #2f6fec1f}.color-option{display:grid;grid-template-columns:18px minmax(0,1fr);align-items:center;gap:8px;min-height:42px;padding:0 10px;text-align:left;font-size:13px;font-weight:800}.color-option.active{border-color:var(--blue);background:linear-gradient(180deg,#fff,#eef6ff);color:var(--blue-dark);box-shadow:0 0 0 3px #2f7df41f,0 10px 20px #2f7df41f}.color-dot{width:18px;height:18px;border:1px solid rgba(226,239,255,.72);border-radius:999px;box-shadow:0 0 12px #35a3ff2e}.background-tool{display:grid;gap:8px;margin-top:14px}.background-tool button{border-color:#2f7df461;background:linear-gradient(180deg,#fff,#eaf5ff);color:var(--blue-dark);font-weight:800;box-shadow:0 12px 24px #2f7df41f}.success-text{color:#128a57;font-size:12px;font-weight:700}.segmented,.layout-grid{padding:4px;border:1px solid var(--line);border-radius:8px;background:#eef4fb}.segmented button,.layout-grid button{border-color:transparent;background:transparent;box-shadow:none}.segmented button.active,.layout-grid button.active{border-color:#2f7df480;background:#fff;color:var(--blue-dark);font-weight:700;box-shadow:0 8px 18px #2f7df41f}.layout-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.custom-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.message{margin:14px 0 0;color:#c75d00;font-size:14px;font-weight:700}.primary-button{width:100%;min-height:46px;margin-top:16px;border-color:#28f0ff9e;background:linear-gradient(135deg,#1d8cff,#2563eb 48%,#6d5dfc);color:#fff;font-weight:800;box-shadow:0 18px 36px #2563eb52,0 0 28px #28f0ff33,0 1px #ffffff47 inset}.primary-button:hover:not(:disabled){background:linear-gradient(135deg,#28f0ff,#2f6fec 48%,#7c6dff);color:#fff}.download-actions{margin-top:10px}.crop-panel{background:#102033}.crop-header,.result-header{display:grid;gap:6px;padding:17px 18px;border-bottom:1px solid var(--line)}.crop-header{border-bottom-color:#ffffff1f;background:linear-gradient(180deg,#173456,#102033)}.crop-header h2,.result-header h2,.result-card h3{margin:0}.crop-header h2{color:#fff}.result-header h2,.result-card h3{color:var(--ink)}.crop-header h2,.result-header h2{font-size:18px}.crop-header span{color:#9fb8d9;font-size:13px}.result-header span,.layout-card span{color:var(--muted);font-size:13px}.crop-stage{position:relative;height:min(70vh,700px);min-height:500px;overflow:hidden;background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}.crop-stage:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid rgba(255,255,255,.06)}.level-guide{pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;z-index:4}.level-line{position:absolute;display:block;background:#21c7eeb8;box-shadow:0 0 10px #21c7ee66}.level-line.horizontal{left:0;right:0;height:1px}.level-line.vertical{top:0;bottom:0;width:1px}.level-line.center{left:50%;top:50%}.level-line.horizontal.center{left:0}.level-line.horizontal.upper{top:33.333%;opacity:.42}.level-line.horizontal.lower{top:66.666%;opacity:.42}.level-line.vertical.center{left:50%}.empty-state{position:absolute;top:28px;right:28px;bottom:28px;left:28px;display:grid;place-content:center;gap:8px;text-align:center;border:1px dashed rgba(255,255,255,.34);border-radius:8px;background:#ffffff14;color:#fff}.empty-state strong{font-size:21px}.empty-state span{color:#cad5e5}.reactEasyCrop_Container{background:linear-gradient(45deg,rgba(255,255,255,.08) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.08) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.08) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.08) 75%);background-color:#111827;background-position:0 0,0 12px,12px -12px,-12px 0;background-size:24px 24px}.reactEasyCrop_CropArea{overflow:hidden;border:2px solid #ffffff!important;box-shadow:0 0 0 9999em #050a147a,0 0 0 1px #2f6fecf5,0 18px 44px #00000042!important}.reactEasyCrop_CropArea:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to right,transparent 33.1%,rgba(255,255,255,.7) 33.1%,rgba(255,255,255,.7) 33.5%,transparent 33.5%),linear-gradient(to right,transparent 66.4%,rgba(255,255,255,.7) 66.4%,rgba(255,255,255,.7) 66.8%,transparent 66.8%),linear-gradient(to bottom,transparent 33.1%,rgba(255,255,255,.7) 33.1%,rgba(255,255,255,.7) 33.5%,transparent 33.5%),linear-gradient(to bottom,transparent 66.4%,rgba(255,255,255,.7) 66.4%,rgba(255,255,255,.7) 66.8%,transparent 66.8%),linear-gradient(to bottom,transparent 18%,rgba(64,132,255,.9) 18%,rgba(64,132,255,.9) calc(18% + 1px),transparent calc(18% + 1px)),linear-gradient(to bottom,transparent 43%,rgba(42,196,125,.9) 43%,rgba(42,196,125,.9) calc(43% + 1px),transparent calc(43% + 1px)),linear-gradient(to bottom,transparent 72%,rgba(245,140,58,.92) 72%,rgba(245,140,58,.92) calc(72% + 1px),transparent calc(72% + 1px));pointer-events:none}.result-panel{display:grid;gap:14px}.result-header{margin:-18px -18px 0;background:linear-gradient(180deg,#fff,#f4f8ff)}.result-card{display:grid;gap:11px;padding:14px;border:1px solid rgba(169,194,225,.72);border-radius:8px;background:linear-gradient(180deg,#fff,#f8fbff);box-shadow:0 12px 32px #2547741a}.result-card h3{font-size:15px}.result-card p{display:grid;min-height:132px;margin:0;place-items:center;color:var(--muted);text-align:center;border:1px dashed rgba(145,174,210,.68);border-radius:8px;background:#f8fbff}.result-card img{width:100%;max-height:360px;object-fit:contain;border:1px solid rgba(169,194,225,.74);border-radius:6px;background:#fff;box-shadow:0 16px 34px #2547741f}.single-card img{max-width:230px;justify-self:center}@media(max-width:1180px){.workspace{grid-template-columns:320px minmax(360px,1fr)}.result-panel{grid-column:1 / -1;grid-template-columns:repeat(2,minmax(0,1fr))}.result-header{grid-column:1 / -1}}@media(max-width:820px){.app-shell{padding:18px}.hero{display:block}.workspace,.result-panel{grid-template-columns:1fr}.crop-stage{height:64vh;min-height:400px}}@media(max-width:520px){.app-shell{padding:12px}.hero h1{font-size:28px}.hero p{font-size:15px}.controls-panel,.result-panel{padding:14px}.result-header{margin:-14px -14px 0}.custom-grid,.download-actions{grid-template-columns:1fr}}:root{color:#eef4ea;background:#050705;--blue:#76b900;--blue-dark:#a8e700;--cyan:#a8e700;--ink:#f5f7f2;--text:#d9e0d5;--muted:#8e9a8a;--line:rgba(118,185,0,.24);--line-strong:rgba(118,185,0,.55);--panel:rgba(12,16,12,.92);--shadow:0 24px 70px rgba(0,0,0,.38)}body{background:radial-gradient(circle at 82% 4%,rgba(118,185,0,.13),transparent 28%),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),#050705;background-size:auto,64px 64px,64px 64px}.panel{border-color:#283426;background:linear-gradient(180deg,#10150ff9,#080b08f0)}button{border-color:#344331;background:linear-gradient(180deg,#171e15,#0e130d);color:#dfe7db}button:disabled{color:#657060;background:#111510}select,input[type=number],.color-picker{background:#0c110b;color:#e9efe6;border-color:#334030}.upload-box{border-color:#506842;background:linear-gradient(180deg,#141b12fa,#0b0f0af5)}.upload-box strong,.hero h1{color:#fff}.hero p,.field span,.hint{color:#8e9a8a}.segmented,.layout-grid{background:#090d08}.segmented button.active,.layout-grid button.active,.color-option.active{background:#1a2416;color:#a8e700}.primary-button{background:linear-gradient(135deg,#5f9500,#76b900 52%,#9adb20);color:#071000}.result-card{background:#090d08;border-color:#293625}.studio-nav{position:relative!important;top:auto!important;margin-bottom:26px}.workspace{align-items:start}.controls-panel,.crop-panel,.result-panel{margin-top:0}.crop-header,.result-header{min-height:80px;align-content:center;background:linear-gradient(180deg,#162318,#0d160e)!important;border-color:#33452f!important}.result-header h2,.result-card h3{color:#f3f7f0!important}.result-header span,.crop-header span{color:#98a594!important}.result-card p{background:#0c120d;color:#879383;border-color:#3b4b37}.result-card img{background:#0c120d;border-color:#3b4b37}.studio-brand img{object-fit:contain;mix-blend-mode:screen}

/* ===== 2026-09 裁剪预览舒适度优化 ===== */
.crop-stage{
  background-image:none!important;
  overflow:hidden;
}
.crop-stage:has(.empty-state){
  background:
    radial-gradient(circle at 50% 28%,rgba(118,185,0,.09),transparent 42%),
    linear-gradient(180deg,#0d120d 0%,#080b08 100%)!important;
}
.crop-stage:has(.empty-state)::before{
  content:"";
  position:absolute;
  inset:18px;
  border:1px solid rgba(118,185,0,.09);
  border-radius:18px;
  pointer-events:none;
}
.empty-state{
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  left:50%!important;
  transform:translate(-50%,-50%);
  width:min(82%,360px);
  min-height:170px;
  padding:28px 24px;
  place-content:center;
  gap:10px;
  border:1px solid rgba(118,185,0,.22)!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,rgba(19,27,17,.95),rgba(10,14,10,.92))!important;
  box-shadow:0 24px 70px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.04);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.empty-state::before{
  content:"+";
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  margin:0 auto 4px;
  border:1px solid rgba(168,231,0,.32);
  border-radius:14px;
  background:rgba(118,185,0,.08);
  color:#a8e700;
  font-size:27px;
  font-weight:300;
  line-height:1;
}
.empty-state strong{
  color:#f4f7f1;
  font-size:18px!important;
  letter-spacing:.01em;
}
.empty-state span{
  color:#8f9b8b!important;
  font-size:13px;
  line-height:1.55;
}
.reactEasyCrop_Container{
  background:transparent!important;
}
.reactEasyCrop_CropArea{
  border:1px solid rgba(255,255,255,.9)!important;
  box-shadow:0 0 0 9999em rgba(3,6,3,.58),0 0 0 1px rgba(168,231,0,.45),0 16px 42px rgba(0,0,0,.28)!important;
}
.reactEasyCrop_CropArea::before{
  opacity:.34;
  background:
    linear-gradient(to right,transparent 33.2%,rgba(255,255,255,.55) 33.2%,rgba(255,255,255,.55) calc(33.2% + 1px),transparent calc(33.2% + 1px)),
    linear-gradient(to right,transparent 66.6%,rgba(255,255,255,.55) 66.6%,rgba(255,255,255,.55) calc(66.6% + 1px),transparent calc(66.6% + 1px)),
    linear-gradient(to bottom,transparent 33.2%,rgba(255,255,255,.55) 33.2%,rgba(255,255,255,.55) calc(33.2% + 1px),transparent calc(33.2% + 1px)),
    linear-gradient(to bottom,transparent 66.6%,rgba(255,255,255,.55) 66.6%,rgba(255,255,255,.55) calc(66.6% + 1px),transparent calc(66.6% + 1px))!important;
}
.level-line{
  background:rgba(168,231,0,.24)!important;
  box-shadow:none!important;
}
.level-line.horizontal.upper,.level-line.horizontal.lower{opacity:.28!important}
.level-line.horizontal.center,.level-line.vertical.center{opacity:.42!important}

@media(max-width:820px){
  .crop-stage{
    height:min(52svh,520px)!important;
    min-height:350px!important;
  }
  .empty-state{
    width:calc(100% - 56px);
    min-height:158px;
    padding:24px 18px;
  }
}
@media(max-width:520px){
  .crop-stage{
    height:min(46svh,440px)!important;
    min-height:330px!important;
  }
  .crop-stage:has(.empty-state)::before{inset:12px;border-radius:14px}
  .empty-state{
    width:calc(100% - 44px);
    min-height:150px;
    border-radius:16px!important;
  }
  .empty-state::before{width:40px;height:40px;border-radius:12px;font-size:24px}
  .empty-state strong{font-size:17px!important}
  .empty-state span{font-size:12px}
}


/* ===== 2026-09 裁剪预览 V2：纯净低刺激模式 ===== */
.crop-stage{height:min(58vh,560px)!important;min-height:420px!important;background:#090d09!important;background-image:none!important;overflow:hidden!important}
.crop-stage::before{content:"";position:absolute;inset:16px;z-index:0;border:1px solid rgba(118,185,0,.10);border-radius:14px;pointer-events:none}
.crop-stage::after{z-index:6!important;border-color:rgba(255,255,255,.035)!important}
.empty-state{top:50%!important;left:50%!important;right:auto!important;bottom:auto!important;transform:translate(-50%,-50%)!important;width:min(78%,330px)!important;min-height:128px!important;padding:22px 20px!important;gap:7px!important;border:1px solid rgba(118,185,0,.16)!important;border-radius:14px!important;background:#0e140e!important;box-shadow:0 14px 34px rgba(0,0,0,.22)!important}
.empty-state::before{content:"＋";display:grid;place-items:center;width:36px;height:36px;margin:0 auto 2px;border:1px solid rgba(168,231,0,.24);border-radius:10px;background:#111a10;color:#a8e700;font-size:21px;line-height:1}
.empty-state strong{font-size:17px!important;color:#f4f7f1!important}.empty-state span{font-size:12px!important;line-height:1.45!important;color:#82907f!important}
.reactEasyCrop_Container{background:#090d09!important;background-image:none!important}
.reactEasyCrop_CropArea{border:1px solid rgba(255,255,255,.82)!important;box-shadow:0 0 0 9999em rgba(4,7,4,.42),0 0 0 1px rgba(168,231,0,.30)!important}
.reactEasyCrop_CropArea::before{opacity:.22!important}
.level-line{background:rgba(168,231,0,.16)!important;box-shadow:none!important}.level-line.horizontal.upper,.level-line.horizontal.lower{opacity:.18!important}.level-line.horizontal.center,.level-line.vertical.center{opacity:.28!important}
@media(max-width:820px){.crop-stage{height:390px!important;min-height:0!important}.crop-stage::before{inset:12px}}
@media(max-width:520px){.crop-stage{height:340px!important;min-height:0!important}.crop-stage::before{inset:10px;border-radius:12px}.empty-state{width:calc(100% - 54px)!important;min-height:116px!important;padding:18px 16px!important;border-radius:12px!important}.empty-state::before{width:32px;height:32px;border-radius:9px;font-size:19px}.empty-state strong{font-size:16px!important}.empty-state span{font-size:11.5px!important}}

/* Unified white site navigation; inner workspace headers match their dark panels. */
.studio-nav{background:rgba(255,255,255,.97)!important;border-bottom:1px solid #dce3d8!important;box-shadow:0 8px 28px rgba(0,0,0,.12)!important}
.studio-brand{color:#111!important}.studio-brand b{color:#67a900!important}.studio-brand img{mix-blend-mode:normal!important}.studio-nav>div a{color:#3c4539!important}.studio-nav>div a:hover,.studio-nav>div a.active{color:#568d00!important}
.crop-header,.result-header{min-height:80px!important;align-content:center!important;background:linear-gradient(180deg,#10180f,#0a100a)!important;border-color:#2d3d2a!important}
.crop-header h2,.result-header h2{color:#f3f7f0!important}.crop-header span,.result-header span,.crop-header small{color:#98a594!important}