/* ====== 87 毕业照预算 · 胶片棕 + 暖金 + 米黄 ====== */
.gpb{
  --bg:#f6f1e8; --bg2:#ede5d6; --card:#fff; --card2:#fbf6ec;
  --ink:#1d1611; --sub:#4c4034; --faint:#8b7c68; --line:#e2d6c2; --line2:#f0e8d9;
  --film:#241c16; --film2:#3b2e24; --gold:#c2923f; --gold-d:#9a6f22;
  --cream:#f3e7c9; --red:#a8443a;
  --shadow-sm:0 1px 2px rgba(29,22,17,.05),0 7px 18px rgba(29,22,17,.05);
  --shadow:0 2px 6px rgba(29,22,17,.07),0 22px 48px rgba(29,22,17,.10);
  --r:20px; --r-sm:13px;
  background:
    radial-gradient(700px 320px at 100% -6%, rgba(194,146,63,.15), transparent 62%),
    radial-gradient(520px 260px at -6% 22%, rgba(36,28,22,.07), transparent 66%),
    var(--bg);
}
:root[data-theme="dark"] .gpb{
  --bg:#12100d; --bg2:#191612; --card:#211d18; --card2:#28231c;
  --ink:#f2ebe1; --sub:#b8ab98; --faint:#82735f; --line:#332b21; --line2:#282218;
  --film:#0f0c09; --film2:#1e1913; --gold:#d9ae63; --gold-d:#e8c688;
  --cream:#3a3021;
}
.gpb .tsk-h1 b{color:var(--gold-d);}

.gpb-hero{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:32px;padding:30px 0 24px;align-items:start;}

/* ---- 写真订单 ---- */
.gpb-order{
  position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:0 22px 22px;box-shadow:var(--shadow);overflow:hidden;
}
.gpb-film{
  height:26px;margin:0 -22px 0;background:var(--film);
  display:flex;align-items:center;justify-content:space-between;padding:0 14px;
}
.gpb-film i{width:10px;height:14px;border-radius:2px;background:var(--cream);opacity:.85;}
.gpb-order-head{display:flex;justify-content:space-between;align-items:center;padding:12px 0 10px;border-bottom:1px dashed var(--line);margin-bottom:11px;}
.gpb-order-head span{font-size:12px;font-weight:800;letter-spacing:.24em;color:var(--gold-d);}
.gpb-order-head em{font-style:normal;font:800 10px/1 var(--num,"Bahnschrift",monospace);color:var(--faint);letter-spacing:.1em;}
.gpb-order label{display:block;font-size:11.5px;font-weight:700;color:var(--faint);margin-top:9px;}
.gpb-order select,.gpb-order input{
  width:100%;height:35px;margin-top:4px;padding:0 10px;border:1.5px solid var(--line);border-radius:8px;
  background:var(--card2);color:var(--ink);font:700 13.5px/33px var(--num,"Bahnschrift",monospace);outline:none;
}
.gpb-order select{font-family:inherit;font-weight:700;}
.gpb-order input:focus,.gpb-order select:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(194,146,63,.16);}
.gpb-grid2{display:grid;grid-template-columns:1fr 1fr;gap:2px 12px;}
.gpb-order .tsk-btn-main{background:linear-gradient(180deg,#cfa050,var(--gold-d));border:0;color:#241c16;font-weight:800;box-shadow:0 10px 22px rgba(194,146,63,.28);}
.gpb-order-foot{margin-top:10px;font-size:10.5px;color:var(--faint);text-align:center;}

/* ---- 结果 ---- */
.gpb-result{margin-top:6px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:22px 24px;}
.gpb-res-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(152px,1fr));gap:11px;}
.gpb-res-card{background:var(--card2);border:1px solid var(--line2);border-radius:var(--r-sm);padding:15px 17px;}
.gpb-res-card b{display:block;font:800 24px/1.15 var(--num,"Bahnschrift",monospace);color:var(--ink);font-variant-numeric:tabular-nums;}
.gpb-res-card span{display:block;font-size:11.5px;color:var(--faint);font-weight:700;margin-top:5px;}
.gpb-res-card i{display:block;font-style:normal;font-size:10.5px;color:var(--sub);margin-top:4px;line-height:1.5;}
.gpb-res-card.gpb-main{background:rgba(194,146,63,.14);border-color:rgba(194,146,63,.4);}
.gpb-res-card.gpb-main b{color:var(--gold-d);}

.gpb-break{margin-top:16px;display:grid;gap:7px;}
.gpb-brow{display:grid;grid-template-columns:112px 1fr 84px;gap:11px;align-items:center;}
.gpb-brow span{font-size:11.5px;font-weight:700;color:var(--faint);}
.gpb-brow .gpb-bbar{height:12px;border-radius:99px;background:var(--line2);overflow:hidden;}
.gpb-brow .gpb-bbar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--gold),#e0bb74);transition:width .45s ease;}
.gpb-brow b{text-align:right;font:800 12px/1.4 var(--num,"Bahnschrift",monospace);color:var(--sub);font-variant-numeric:tabular-nums;}

.gpb-alert{margin-top:14px;padding:12px 15px;border-radius:10px;background:rgba(194,146,63,.12);border:1px solid rgba(194,146,63,.32);font-size:12.5px;line-height:1.8;color:var(--sub);}
.gpb-alert b{color:var(--gold-d);}
.gpb-alert.is-warn{background:rgba(168,68,58,.09);border-color:rgba(168,68,58,.3);}
.gpb-alert.is-warn b{color:var(--red);}

/* ---- 表格 ---- */
.gpb-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.gpb-table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;box-shadow:var(--shadow-sm);min-width:660px;}
.gpb-table th,.gpb-table td{padding:12px 15px;text-align:left;font-size:12.5px;line-height:1.7;border-bottom:1px solid var(--line2);vertical-align:top;}
.gpb-table tr:last-child td{border-bottom:0;}
.gpb-table thead th{background:var(--card2);font-weight:800;color:var(--gold-d);font-size:12px;}
.gpb-table tbody tr:nth-child(even){background:var(--card2);}
.gpb-strong{font-weight:800;color:var(--ink);white-space:nowrap;}
.gpb-num{font:800 12.5px/1.5 var(--num,"Bahnschrift",monospace);color:var(--gold-d);white-space:nowrap;}

/* ---- 避坑 ---- */
.gpb-tips{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:10px;}
.gpb-tip{position:relative;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:var(--r-sm);padding:14px 17px;box-shadow:var(--shadow-sm);}
.gpb-tip b{font-size:12.5px;font-weight:800;color:var(--ink);}
.gpb-tip p{margin:5px 0 0;font-size:12px;line-height:1.75;color:var(--sub);}

@media (max-width:900px){
  .gpb-hero{grid-template-columns:1fr;gap:22px;}
}
@media (max-width:520px){
  .gpb-grid2{grid-template-columns:1fr;}
  .gpb-brow{grid-template-columns:92px 1fr 68px;gap:8px;}
}