:root{font-family:Georgia,"Times New Roman",serif;color:#f7ecd6;background:#110b08;--gold:#d8b37a;--border:#896037;--panel:#24140d}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 20% 0%,#513622,#0f0907 60%);min-height:100vh}.site{width:min(100vw,560px);margin:0 auto;box-shadow:0 0 50px #070403;min-height:100vh;background:#130d09}.test-header{height:54px;padding:0 13px;display:flex;align-items:center;justify-content:space-between;background:#20120c;border-bottom:1px solid #5a3822;gap:7px;position:sticky;top:0;z-index:30}.test-header>div:first-child{white-space:nowrap}.test-header strong{font-size:14px;color:#e4be83;letter-spacing:.5px}.test-header small{font:10px system-ui,sans-serif;color:#d4c5ad;letter-spacing:.8px}.test-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#89b98d;margin-right:6px}.test-actions{display:flex;gap:5px;align-items:center}.test-actions button{border:1px solid #8f6237;background:#352015;color:#ffe5b2;border-radius:8px;min-height:33px;padding:6px 8px;font:11px system-ui,sans-serif}.test-actions .tiny{font-size:18px}.viewport{overflow:auto;scrollbar-width:none;min-height:70vh}.canvas{width:100%;position:relative;line-height:0;isolation:isolate}.canvas img{display:block;width:100%;height:auto;pointer-events:none;user-select:none}.hotspots{position:absolute;inset:0;pointer-events:none}.hit{position:absolute;background:transparent;border:0;border-radius:9px;cursor:pointer;pointer-events:auto;touch-action:manipulation}.hit:focus-visible{outline:3px solid #fff4bf;outline-offset:-3px;background:#ffffff20}.hit:active{background:#e8c68530}.live-strip{position:sticky;bottom:0;background:#1c120dee;border:1px solid #715032;border-left:0;border-right:0;padding:10px 13px;min-height:40px;line-height:1.35;text-align:center;color:#f8ddb2;font:11px/1.45 system-ui,sans-serif;z-index:9}.footer{height:calc(58px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);display:flex;align-items:center;justify-content:space-around;position:sticky;bottom:0;background:#1b100bf5;border-top:1px solid #825831;z-index:28}.footer button{background:none;border:0;color:#e4bd82;font:23px Georgia,serif;min-width:55px;min-height:45px;display:flex;flex-direction:column;gap:0;align-items:center;justify-content:center;cursor:pointer}.footer span{font:10px system-ui,sans-serif;color:#e7d4b7}.toast{position:fixed;bottom:85px;left:50%;transform:translateX(-50%);background:#3b2a1f;border:1px solid #be9663;border-radius:12px;padding:10px 15px;color:#ffebc9;font:13px system-ui;z-index:100;max-width:340px;box-shadow:0 10px 40px #0008;display:none}.toast.show{display:block}dialog{color:#f2e1c8;border:1px solid #b48a4e;border-radius:20px 20px 0 0;margin:auto auto 0;max-height:88dvh;width:min(100%,560px);max-width:560px;padding:0;background:linear-gradient(125deg,#332017,#1a100d 75%);box-shadow:0 -10px 55px #000b}dialog::backdrop{background:#090603b8;backdrop-filter:blur(3px)}.panel-head{position:sticky;top:0;z-index:1;background:#24150ff7;padding:15px 18px;border-bottom:1px solid #73502c;display:flex;align-items:center;justify-content:space-between}.panel-head small{font:10px system-ui,sans-serif;color:#caa46d;letter-spacing:1.2px}.panel-head h2{font-size:22px;margin:3px 0 0;color:#f5dcaa}.panel-head button{border:1px solid #7b512a;background:#392117;border-radius:50%;color:#f9dfa8;width:39px;height:39px;font-size:24px}.panel-body{padding:17px 18px 38px;overflow:auto;max-height:calc(88dvh - 78px);font:14px/1.6 system-ui,sans-serif;color:#f0dcc0}.panel-body p{margin:9px 0 16px}.panel-body h3{font-size:16px;color:#ebcf9c;margin:20px 0 9px}.panel-body .data-row{display:flex;justify-content:space-between;gap:14px;border-bottom:1px solid #56412c;padding:9px 0}.data-row strong{color:#ffdda5;text-align:right;word-break:break-word}.data-row span{color:#d2c0a5}.panel-body .note{font:12px/1.6 system-ui,sans-serif;color:#dbc6a3;background:#281a13;border-left:3px solid #c59b63;padding:10px;margin:12px 0}.panel-body .warning{border-color:#d77f66;color:#ffd1bc}.panel-body .ok{border-color:#6ea67a;color:#d0f0d2}.panel-body .field{display:block;margin:12px 0;font-size:13px;color:#d5c09e}.field input,.field select,.field textarea{display:block;width:100%;color:#fce7c2;background:#170e0b;border:1px solid #7e5931;padding:13px;border-radius:9px;margin-top:5px;font:16px system-ui,sans-serif;min-height:46px}.field input[type=file]{font-size:12px}.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid #d9ae75}.panel-body button.button{background:linear-gradient(#f6db9b,#ba8546);border:1px solid #ffdfa5;color:#22150b;font-weight:750;padding:12px;border-radius:10px;font-size:14px;font-family:system-ui;min-height:47px;width:100%;cursor:pointer;margin:9px 0}.panel-body button.button.secondary{background:#3b271a;color:#f4d6a3;border-color:#8b6337}.panel-body button.button:disabled{opacity:.48;cursor:not-allowed}.panel-body .rowbuttons{display:flex;gap:7px}.panel-body .rowbuttons button{flex:1}.panel-body .pill{border:1px solid #85603c;border-radius:10px;padding:8px 11px;background:#28180f;text-align:left;color:#eed3ac;display:block;width:100%;margin:8px 0;font:13px/1.6 system-ui,sans-serif}.panel-body .pill b{font-size:15px;color:#fff0bd}.panel-body .pill.selected{border-color:#f1c87e;background:#49301b}.panel-body .tag{display:inline-block;font:bold 11px system-ui,sans-serif;border-radius:12px;padding:4px 7px;margin:2px;color:#171009;background:#d5aa6e}.panel-body .tag.pending{background:#e4b468}.panel-body .tag.approved{background:#9ad8a9}.panel-body .tag.rejected{background:#f19c8c}.panel-body .preview-thumb{display:block;max-width:100%;max-height:260px;margin:auto;object-fit:contain;border:1px solid #88613b;border-radius:8px}.panel-body a{color:#f3d7a0}.panel-body .loading{opacity:.65;pointer-events:none}.panel-body .hint{font-size:12px;color:#baa78f}.panel-body .receipt-card{border:1px solid #75502e;padding:12px;margin:10px 0;border-radius:11px}.panel-body .narrow{max-width:210px}.panel-body .divider{height:1px;background:#724d28;margin:15px 0}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(min-width:850px){.site{width:min(510px,100%)}dialog{border-radius:16px;max-height:85vh;margin:auto;box-shadow:0 20px 80px #000d}}@media(prefers-reduced-motion:no-preference){dialog{animation:appear .18s ease-out}@keyframes appear{from{transform:translateY(22px);opacity:.6}to{transform:translateY(0);opacity:1}}}
/* Keep the QA utility header inside narrow iPhone viewports. */
.test-header>div:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
.test-actions{flex-shrink:0}
@media(max-width:450px){.test-header small{display:none}}

/* Data-driven replacements mask SAMPLE values printed into the approved reference images. */
.live-fields{position:absolute;inset:0;z-index:3;pointer-events:none;font-family:Georgia,serif;line-height:1.32}
.live-fields .data-mask{position:absolute;pointer-events:auto;background:linear-gradient(125deg,#21130ff5,#120b08fb);border:1px solid #af793e;border-radius:12px;padding:clamp(7px,2vw,16px);color:#f9e2b3;box-shadow:inset 0 0 18px #573315,0 4px 18px #0008}
.live-fields .home-mask{left:31%;top:31.1%;width:59%;height:13.7%;display:flex;flex-direction:column;justify-content:center;gap:4px}
.live-fields .smalltag{font:10px/1.35 system-ui,sans-serif;letter-spacing:.3px;color:#c9a974;text-transform:uppercase}
.live-fields .planname{font:bold clamp(16px,5vw,27px) Georgia,serif;color:#ffe1a0;word-break:break-word}
.live-fields .term{font:clamp(10px,2.65vw,15px)/1.4 system-ui,sans-serif;color:#f6e5c8}
.live-fields .price-mask{left:62%;width:34%;min-height:8%;display:flex;justify-content:center;flex-direction:column;text-align:center;gap:2px}
.live-fields .price-mask.silver{top:36.9%}.live-fields .price-mask.diamond{top:33.9%}
.live-fields .price-mask .price{font:bold clamp(12px,3vw,23px) Georgia,serif;color:#ffdfac}
.live-fields .recipient-mask{left:36%;width:38%;min-height:5%;text-align:left;display:flex;flex-direction:column;justify-content:center}
.live-fields .recipient-mask.silver{top:60.3%}.live-fields .recipient-mask.diamond{top:55.3%}
.live-fields .recipient-mask .term{font-size:clamp(8px,2vw,13px);overflow-wrap:anywhere}
.live-fields .history-mask{left:4%;top:34%;width:92%;height:61%;overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:8px;padding:12px}
.live-fields .history-mask button{border:1px solid #95663a;border-radius:10px;padding:9px 10px;text-align:left;color:#f9dfb1;background:linear-gradient(115deg,#422818,#20130e);font:12px/1.5 system-ui;cursor:pointer;min-height:70px}
.live-fields .history-mask button strong{display:block;font:600 15px/1.4 Georgia,serif}
.live-fields .history-mask button span{display:block;color:#ded1b5}
.live-fields .history-mask .empty-text{margin:auto;text-align:center;font:15px/1.8 system-ui;color:#ead5b2}
.live-fields .detail-mask{left:6%;top:19%;width:88%;height:78%;overflow:auto;padding:14px 13px}
.live-fields .detail-mask button{color:#201109;border:1px solid #e0b47c;background:#f1d59c;padding:10px 8px;border-radius:8px;font-weight:700;font-size:12px;margin-top:8px}
.live-fields .detail-mask .term{font-size:12px;overflow-wrap:anywhere;margin:9px 0;border-bottom:1px solid #70502d;padding:8px 0}
.live-fields .detail-mask h3{font-size:18px;margin:0 0 12px}
.live-fields .status-mask{left:8%;top:30%;width:84%;min-height:20%;text-align:center;display:flex;justify-content:center;flex-direction:column;gap:9px}
.live-fields .status-mask .planname{font-size:22px}
@media(max-width:360px){.live-fields .data-mask{border-radius:7px;padding:6px}.live-fields .home-mask .planname{font-size:15px}.live-fields .home-mask .term{font-size:9px}}
/* v10 — keep the exact user-confirmed artwork as the full-bleed screen.
   The tiny, explicitly TEST-only tools replace the previous imitation app chrome.
   All backend values remain authenticated and the sample plan is masked. */
.site { box-shadow:none; min-height:100dvh; }
.viewport { min-height:100dvh; overflow:auto; }
.test-header,.footer { display:none!important; }
.qa-tools {
  position:absolute; top:1.2%; right:2.8%; z-index:12;
  display:flex; align-items:center; gap:5px;
  line-height:1; max-width:69%;
}
.qa-tools button {
  color:#f3d7a7; border:1px solid #8c693f; background:#180f0de8;
  border-radius:999px; padding:6px 10px; font:11px/1.1 system-ui,sans-serif;
  min-height:30px; box-shadow:0 1px 8px #0007; touch-action:manipulation;
  cursor:pointer;
}
.qa-tools button:focus-visible { outline:2px solid #e7c489; outline-offset:2px; }
.qa-tools .qa-account { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qa-tools .qa-menu { width:30px; padding:3px; font-size:17px; flex-shrink:0; }
.live-strip.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; padding:0; margin:0; border:0; min-height:0; }
.toast { bottom:calc(22px + env(safe-area-inset-bottom)); }
/* The approved image includes example Silver/Active values. Only the text
   area inside its Current Plan card gets covered with a quiet inset, never
   a second floating card protruding outside the original panel. */
.live-fields .home-mask {
  left:31%; top:31.1%; width:58%; height:11.6%;
  border:0; border-radius:3px; box-shadow:none;
  padding:clamp(6px,1.4vw,11px);
  background:linear-gradient(95deg,#25160fe9 2%,#2e1b12f4 75%,#27150ee9);
  align-items:flex-start; justify-content:center; gap:5px;
}
.live-fields .home-mask .planname { font:600 clamp(17px,4.5vw,27px)/1.18 Georgia,serif; }
.live-fields .home-mask .term { font:clamp(10px,2.5vw,14px)/1.35 system-ui,sans-serif; }
@media(max-width:360px){.qa-tools button{font-size:10px;padding:5px 7px}.live-fields .home-mask{padding:5px;}}

/* v11 mobile-tap fix: actual keyboard- and touch-operable hotspots on the
   approved artwork, not decorative pictures. Make the clickable layer explicit. */
.hotspots { z-index:2; pointer-events:none; }
.hit {
  position:absolute; display:block; z-index:1; pointer-events:auto;
  appearance:none; -webkit-appearance:none; -webkit-tap-highlight-color:rgba(244,190,110,.28);
  -webkit-user-select:none; user-select:none; touch-action:manipulation;
}
.hit:active,.hit.tapped { background:rgba(239,194,116,.14); box-shadow:inset 0 0 0 2px rgba(247,206,145,.3); }
dialog.fallback-open { display:block; position:fixed; inset:auto 0 0; z-index:100; }
@media(hover:hover) {.hit:hover { box-shadow:inset 0 0 0 1px rgba(239,194,116,.24); }}