/* All colors come from theme.php (as --c-* variables). Do not hard-code colors here. */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:var(--c-page);color:var(--c-ink);font-family:var(--font-serif);font-size:16px;line-height:1.55}
a{color:inherit}
img{max-width:100%}

.wrap{position:relative;max-width:440px;margin:0 auto;padding:0 16px}
.mode-admin .wrap{max-width:1000px}

/* ---------- header ---------- */
.site-head{position:relative;z-index:3;background:var(--c-header)}
.site-head .wrap{padding-top:34px;padding-bottom:34px;text-align:center}
.logo-link{display:inline-block;line-height:0}
.logo{width:236px;max-width:70vw;height:auto}
.vine{position:absolute;right:16px;bottom:-56px;width:78px;height:108px;overflow:visible;pointer-events:none}
.head-right{position:absolute;right:16px;top:12px;font:13px var(--font-sans)}
.head-right a{color:var(--c-on-accent);text-decoration:none;opacity:.92}
.mode-admin .site-head .wrap{padding-top:26px;padding-bottom:26px}
.mode-admin .logo{width:190px}

.site-main{position:relative;padding:24px 0 48px;overflow:hidden}
.mode-admin .site-main{overflow:visible}

/* ---------- the green card ---------- */
.card{position:relative;padding:30px 24px 26px;border-radius:22px;text-align:center;color:var(--c-on-card);
  background-color:var(--c-card);
  background-image:radial-gradient(circle at 25% 30%,rgba(255,255,255,.07) 1px,transparent 1.4px);background-size:4px 4px}
.br{position:absolute;width:18px;height:18px;border:1.5px solid var(--c-botanical);opacity:.9}
.br-tl{top:10px;left:10px;border-right:0;border-bottom:0;border-top-left-radius:8px}
.br-brr{bottom:10px;right:10px;border-left:0;border-top:0;border-bottom-right-radius:8px}

.pill{display:inline-block;margin-bottom:14px;padding:5px 14px;border-radius:20px;background:var(--c-pill-bg);color:var(--c-accent);
  font:600 11px var(--font-sans);letter-spacing:.18em;text-transform:uppercase}
.card-title{margin:0 0 4px;font-weight:400;font-size:27px;line-height:1.2;color:var(--c-on-card-strong)}
.wave{display:block;width:70px;height:8px;margin:0 auto 12px}
.wave path{fill:none;stroke:var(--c-botanical);stroke-width:1.4;stroke-linecap:round}
.art{position:relative;width:100%;height:178px;margin:0 auto 10px;display:flex;align-items:flex-end;justify-content:center;color:var(--c-botanical)}
.art-sm{height:120px;margin-bottom:6px}
.art-wide{height:172px;margin-bottom:14px}
.art>svg,.art>img{display:block;height:100%;width:auto;max-width:100%;overflow:visible}
.art>img{object-fit:contain}
.art>img,.art>svg.doodle{transform-origin:50% 100%}
.card-text{max-width:320px;margin:0 auto 18px;font-size:14px;line-height:1.6;color:var(--c-on-card)}
.lbl{margin:0 0 3px;font:600 11px var(--font-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--c-on-card)}
.code-text{margin:0 0 16px;font-size:17px;letter-spacing:.05em;color:var(--c-on-card-strong)}
.msg{margin:0 0 20px;font-style:italic;font-size:13px;line-height:1.6;color:var(--c-on-card)}

/* ---------- buttons ---------- */
.btn{display:inline-block;padding:13px 26px;border:0;border-radius:8px;background:var(--c-button);color:var(--c-on-button);
  font:600 12px var(--font-sans);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  transition:background .2s,transform .2s}
.btn:hover{background:var(--c-button-hover);transform:translateY(-1px)}
.btn:focus-visible{outline:3px solid var(--c-on-card-strong);outline-offset:2px}
.btn[disabled]{opacity:.7;cursor:wait;transform:none}
.btn-block{display:block;width:100%}
.btn-sm{padding:8px 14px;font-size:11px}
.link-quiet{font:13px var(--font-sans);color:var(--c-on-card);text-underline-offset:3px}
.below{margin-top:18px;text-align:center}
.below a{font:13px var(--font-sans);color:var(--c-muted);text-underline-offset:3px}

/* ---------- customer forms ---------- */
.form{margin:0;text-align:left}
.form .lbl{text-align:left}
.group{margin:0 0 14px}
.field{display:block;width:100%;margin:0 0 4px;padding:13px 14px;border:2px solid transparent;border-radius:10px;
  background:var(--c-paper);color:var(--c-ink);font:16px var(--font-sans)}
.field::placeholder{color:#8a9b92}
.field:focus{outline:none;border-color:var(--c-accent);box-shadow:0 0 0 4px rgba(244,246,242,.45)}
.field.invalid{border-color:var(--c-error-bg)}
.field-code{text-align:center;text-transform:uppercase;letter-spacing:.12em;font-family:var(--font-serif);font-size:18px}
.field-error{display:none;margin:8px 0 6px;padding:9px 12px;border-radius:8px;background:var(--c-error-bg);color:var(--c-on-error);font:13px/1.45 var(--font-sans)}
.field-error.show{display:block}
.field-error:before{content:"!";display:inline-block;width:16px;height:16px;margin-right:8px;border-radius:50%;
  background:var(--c-on-error);color:var(--c-error-bg);font:700 11px/16px var(--font-sans);text-align:center}
.hint{margin:6px 0 16px;text-align:center;font:12.5px/1.5 var(--font-sans);color:var(--c-on-card);opacity:.92}
.back{margin:16px 0 0;text-align:center}
.field-otp{text-align:center;font-family:var(--font-serif);font-size:26px;letter-spacing:.5em;padding-left:.5em}
.otp-help{margin:12px 0 4px;text-align:center;font:13px/1.55 var(--font-sans);color:var(--c-on-card)}
.otp-note{margin:0 0 12px;padding:9px 12px;border-radius:8px;background:var(--c-ready-bg);color:var(--c-ready-text);font:13px/1.45 var(--font-sans);text-align:left}
.test-box{margin:0 0 14px;padding:10px 12px;border:1.5px dashed var(--c-botanical);border-radius:10px;text-align:center;font:13px/1.5 var(--font-sans);color:var(--c-on-card)}
.test-box strong{display:block;margin-top:2px;font:600 22px var(--font-serif);letter-spacing:.3em;color:var(--c-on-card-strong)}
.link-btn{padding:4px 2px;border:0;background:none;color:var(--c-on-card);font:13px var(--font-sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.link-btn[disabled]{opacity:.65;text-decoration:none;cursor:default}
.otp-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 18px;margin:14px 0 0}
.otp-links a{padding:4px 2px;font:13px var(--font-sans);color:var(--c-on-card);text-underline-offset:3px}
.otp-links form{margin:0}

/* ---------- report sheet ---------- */
.report[hidden]{display:none}
.report{margin-top:22px;overflow:hidden;background:var(--c-paper);border:1px solid var(--c-line);border-radius:16px}
.report-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px 10px 18px;border-bottom:1px solid var(--c-line)}
.report-title{font:600 11px var(--font-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--c-muted)}
.report-actions{display:flex;gap:8px}
.act{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 15px;border:1.5px solid var(--c-button);border-radius:999px;
  background:var(--c-button);color:var(--c-on-button);font:600 11px var(--font-sans);letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;transition:background .2s,color .2s,transform .2s}
.act svg{width:17px;height:17px;flex:none}
.act:hover{background:var(--c-button-hover);border-color:var(--c-button-hover);transform:translateY(-1px)}
.act:focus-visible{outline:3px solid var(--c-button);outline-offset:2px}
.act-alt{background:transparent;color:var(--c-button)}
.act-alt:hover{background:var(--c-button);border-color:var(--c-button);color:var(--c-on-button)}
.act[disabled]{opacity:.6;cursor:wait;transform:none}
.send-note{display:none;margin:0;padding:10px 18px;border-bottom:1px solid var(--c-line);font:13px/1.5 var(--font-sans)}
.send-note.show{display:block}
.send-note.info{background:var(--c-pending-bg);color:var(--c-pending-text)}
.send-note.ok{background:var(--c-ready-bg);color:var(--c-ready-text)}
@media (max-width:480px){.act span{display:none}.act{width:40px;padding:0;justify-content:center}}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  background:var(--c-button);color:var(--c-on-button);transition:background .2s,transform .2s}
.icon-btn:hover{background:var(--c-button-hover);transform:translateY(-1px)}
.icon-btn svg{width:18px;height:18px}
.report-pages{padding:12px}
.report-page{display:block;width:100%;height:auto;margin:0 0 12px;border:1px solid var(--c-line);border-radius:6px;background:#fff}
.report-note{margin:0;padding:18px 8px;text-align:center;font:14px/1.6 var(--font-sans);color:var(--c-muted)}
.report-foot{padding:0 12px 14px;text-align:center;font:13px var(--font-sans)}
.report-foot a{color:var(--c-muted);text-underline-offset:3px}

/* ---------- vine, plant drawing, seeds ---------- */
.v-stem{fill:none;stroke:var(--c-vine-a);stroke-width:1.8;stroke-linecap:round}
.v-a{fill:var(--c-vine-a)}
.v-b{fill:var(--c-vine-b)}
.v-vein{fill:none;stroke:var(--c-page);stroke-width:.7;opacity:.55}
.b-stroke{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.b-fill{fill:currentColor}
.vine-sway,.sway-1,.sway-2,.sway-3{transform-box:view-box}
.sway-1,.sway-2,.sway-3{transform-origin:80px 114px}
.vine-sway{transform-origin:46px 0}

.seed{position:absolute;z-index:4;border-radius:50%;opacity:0;pointer-events:none}
.seed-1{left:18%;top:300px;width:5px;height:5px;background:var(--c-seed-light)}
.seed-2{left:40%;top:350px;width:6px;height:6px;background:var(--c-seed-light)}
.seed-3{left:63%;top:290px;width:4px;height:4px;background:var(--c-seed-light)}
.seed-4{left:82%;top:340px;width:6px;height:6px;background:var(--c-seed-light)}
.seed-5{left:5%;top:260px;width:5px;height:5px;background:var(--c-seed-dark)}
.seed-6{left:94%;top:240px;width:4px;height:4px;background:var(--c-seed-dark)}

/* ---------- gentle motion (only when the visitor allows motion) ---------- */
@media (prefers-reduced-motion:no-preference){
  .site-head{animation:fade .9s ease both}
  .card{animation:rise 1s .3s cubic-bezier(.2,.7,.2,1) both}
  .vine{animation:fade 1.2s .6s ease both}
  .up-1{animation:up .8s .75s ease both}
  .up-2{animation:up .8s .9s ease both}
  .up-3{animation:grow 1.2s 1s cubic-bezier(.2,.7,.2,1) both}
  .up-4{animation:up .8s 1.3s ease both}
  .up-5{animation:up .8s 1.45s ease both}
  .up-6{animation:up .8s 1.6s ease both}
  .report{animation:up .7s ease both}
  .art>img,.art>svg.doodle{animation:sway 7s ease-in-out infinite alternate}
  .art-wide>svg.doodle{animation:none}
  .sway-1{animation:sway 6s ease-in-out infinite alternate}
  .sway-2{animation:sway 5s -1.5s ease-in-out infinite alternate}
  .sway-3{animation:sway 7s -3s ease-in-out infinite alternate}
  .vine-sway{animation:vine 7s ease-in-out infinite alternate}
  .seed-1{animation:drift 11s linear infinite}
  .seed-2{animation:drift 12s 3s linear infinite}
  .seed-3{animation:drift 9s 6s linear infinite}
  .seed-4{animation:drift 13s 1.5s linear infinite}
  .seed-5{animation:drift 11s 4s linear infinite}
  .seed-6{animation:drift 10s 7s linear infinite}
  .shake{animation:shake .4s}
}
/* ---------- laptops and desktops ---------- */
.deco{display:none}
@media (min-width:1000px){
  .mode-public .wrap{max-width:480px}
  .mode-public.wide .site-head .wrap,.mode-public.wide .site-main .wrap{max-width:1180px}
  .mode-public.wide .vine{right:auto;left:calc(16px + 448px - 78px)}
  .wide .layout{display:grid;grid-template-columns:448px minmax(0,1fr);grid-template-areas:"card report" "link report";
    grid-template-rows:auto 1fr;column-gap:28px;align-items:start}
  .wide .layout>.card{grid-area:card}
  .wide .layout>.report{grid-area:report;margin-top:0}
  .wide .layout>.below{grid-area:link}
  .wide .deco{display:none}
  .mode-public.wide .seed-3,.mode-public.wide .seed-4,.mode-public.wide .seed-6{display:none}
  .mode-public.wide .seed-1{left:5%}
  .mode-public.wide .seed-2{left:14%}
  .mode-public.wide .seed-5{left:2%}
}
@media (min-width:1200px){
  .deco{display:block;position:absolute;top:60px;width:240px;height:300px;background:var(--c-card);opacity:.34;pointer-events:none;
    -webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
  .deco-l{right:calc(100% + 64px)}
  .deco-r{left:calc(100% + 64px)}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes grow{from{opacity:0;transform:scale(.88) translateY(8px)}to{opacity:1;transform:none}}
@keyframes sway{from{transform:rotate(-2deg)}to{transform:rotate(2.2deg)}}
@keyframes vine{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
@keyframes drift{0%{transform:translate(0,0);opacity:0}15%{opacity:.8}100%{transform:translate(16px,-150px);opacity:0}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

/* ============================ ADMIN ============================ */
.mode-admin .site-main{padding-top:28px}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.tab{padding:9px 16px;border:1px solid var(--c-line);border-radius:999px;background:var(--c-paper);color:var(--c-ink);
  font:500 13px var(--font-sans);text-decoration:none}
.tab:hover{border-color:var(--c-accent)}
.tab.on{background:var(--c-button);border-color:var(--c-button);color:var(--c-on-button)}
.flash{margin:0 0 18px;padding:12px 16px;border-radius:10px;font:14px/1.5 var(--font-sans)}
.flash.ok{background:var(--c-ready-bg);color:var(--c-ready-text)}
.flash.err{background:var(--c-error-bg);color:var(--c-on-error)}
.panel{margin:0 0 20px;padding:22px;background:var(--c-paper);border:1px solid var(--c-line);border-radius:16px;font-family:var(--font-sans);color:var(--c-ink)}
.panel h2{margin:0 0 6px;font:400 20px var(--font-serif);color:var(--c-ink)}
.panel .sub{margin:0 0 16px;font-size:13px;line-height:1.5;color:var(--c-muted)}
.panel label{display:block;margin:0 0 4px;font:600 11px var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted)}
.panel input[type=text],.panel input[type=password]{display:block;width:100%;margin:0 0 14px;padding:11px 12px;border:1px solid var(--c-line);border-radius:8px;
  background:#fff;color:var(--c-ink);font:15px var(--font-sans)}
.panel input[type=text]:focus,.panel input[type=password]:focus{outline:none;border-color:var(--c-accent);box-shadow:0 0 0 3px rgba(76,101,115,.18)}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 16px}
.narrow{max-width:420px;margin:0 auto}
.table-wrap{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font:14px var(--font-sans)}
.t th{padding:8px 10px;border-bottom:1px solid var(--c-line);text-align:left;white-space:nowrap;
  font:600 11px var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted)}
.t td{padding:10px;border-bottom:1px solid var(--c-line);vertical-align:middle}
.t tr:last-child td{border-bottom:0}
.t .empty{padding:18px 10px;color:var(--c-muted)}
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font:600 11px var(--font-sans);letter-spacing:.08em;text-transform:uppercase}
.badge.ready{background:var(--c-ready-bg);color:var(--c-ready-text)}
.badge.pending{background:var(--c-pending-bg);color:var(--c-pending-text)}
.upload{display:flex;align-items:center;gap:6px}
.upload input[type=file]{width:170px;margin:0;padding:6px;border:1px dashed var(--c-line);border-radius:8px;background:#fff;font:12px var(--font-sans);color:var(--c-ink)}
.qr-box{display:inline-block;padding:20px;border:1px solid var(--c-line);border-radius:14px;background:#fff;text-align:center;font:13px var(--font-sans);color:var(--c-ink)}
.qr-box div.qr{margin:0 auto 10px}
.qr-url{margin-top:6px;font:12px var(--font-sans);color:var(--c-muted);word-break:break-all}
.center{text-align:center}
@media print{
  .site-head,.tabs,.no-print,.seed{display:none!important}
  body{background:#fff}
  .panel{border:0}
}

/* ---------- footer ---------- */
.site-foot{padding:34px 0 30px;text-align:center;font-family:var(--font-sans);color:var(--c-muted)}
.foot-note{margin:0 0 6px;font-size:14px;line-height:1.5}
.foot-links{margin:0 0 14px;font-size:14px;line-height:1.9}
.foot-links a{color:var(--c-ink);text-underline-offset:3px}
.foot-links span{margin:0 9px;opacity:.6}
.foot-small{margin:0;font-size:12px;letter-spacing:.06em;opacity:.8}

/* ---------- locked code ---------- */
.lock-panel{margin:6px 0 4px;padding:16px 16px 18px;border-radius:12px;background:rgba(247,248,245,.14);border:1px solid rgba(247,248,245,.35);text-align:center}
.lock-text{margin:0 0 14px;font:15px/1.6 var(--font-sans);color:var(--c-on-card)}
.lock-text a{color:var(--c-on-card-strong)}
.lock-panel form{margin:0}