*{ box-sizing:border-box; }
html,body{ height:100%; }
body{ margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif; color:#46615a; background:#dceee7;  }
.stage{ position:relative; z-index:1; display:flex;  width:min(460px,94vw);  }
.aside{ display:none; }
.card{ position:relative; flex:1; min-width:0; background:#dceee7; border:0; border-radius:22px; overflow:hidden; box-shadow:9px 9px 20px #bcd2c9, -9px -9px 20px #f1fbf7;  }
.card-head{ display:none; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid #1f2c38; background:rgba(255,255,255,.015); }
.dot{ width:11px; height:11px; border-radius:50%; flex:0 0 auto; display:inline-block; }
.dot.r{ background:#ff5f57; } .dot.y{ background:#febc2e; } .dot.g{ background:#28c840; }
.path{ margin-left:8px; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size:12px; color:#9aa3b5; letter-spacing:.3px; }
.status-pill{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size:11px; color:#16a085; background:transparent; border:1px solid transparent; padding:3px 9px; border-radius:999px; }
.status-pill .led{ width:6px; height:6px; border-radius:50%; background:#16a085;  }
.card-body{ padding:26px 26px 22px; }
.eyebrow{ display:block; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size:11px; text-transform:uppercase; letter-spacing:2px; color:#16a085; margin:0 0 10px; }
h1{ margin:0 0 8px; font-size:26px; font-weight:650; font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif; color:#46615a; letter-spacing:.2px; }
.subtitle{ margin:0 0 24px; color:#6f8b83; line-height:1.45; font-size:14px; }
.field{ margin:16px 0; }
label{ display:block; font-size:12px; font-weight:600; color:#6f8b83; margin:0 0 8px; }
.input{ display:flex; align-items:center; gap:11px; padding:12px 14px; background:#dceee7; border:0; border-radius:14px; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.input:focus-within{ border-color:#16a085; box-shadow:inset 3px 3px 7px #bcd2c9, inset -3px -3px 7px #f1fbf7; }
.icon{ width:18px; height:18px; flex:0 0 auto; color:#9aa3b5; }
.input:focus-within .icon{ color:#16a085; }
input{ width:100%; border:0; background:transparent; color:#46615a; font-size:14px; font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif; outline:none; }
input::placeholder{ color:#a7afbf; }
.btn{ margin-top:22px; width:100%; border:0; padding:13px 14px; border-radius:14px; color:#ffffff; font-weight:700; font-size:14px; letter-spacing:.3px; cursor:pointer; font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif; background:#16a085; box-shadow:6px 6px 14px #bcd2c9, -6px -6px 14px #f1fbf7; transition:transform .06s ease, filter .15s ease, box-shadow .15s ease; }
.btn:hover{ filter:brightness(1.05);  }
.btn:active{ transform:translateY(1px); }
.hint{ margin:16px 0 0; font-size:12px; color:#9aa3b5; text-align:center; }
.captcha-box{ padding:15px; border-radius:14px; background:#dceee7; border:1px dashed #bcd2c9; }
.captcha-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.captcha-label{ font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size:11px; text-transform:uppercase; letter-spacing:1px; color:#6f8b83; margin-bottom:6px; }
.captcha-q{ font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size:16px; font-weight:700; color:#46615a; }
.btn-ghost{ border:1px solid #bcd2c9; background:transparent; color:#6f8b83; padding:9px 12px; border-radius:14px; font-weight:600; font-size:13px; cursor:pointer; font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif; transition:.15s ease; }
.btn-ghost:hover{ border-color:#16a085; color:#16a085; }
.toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(8px); display:flex; align-items:center; gap:9px; background:#dceee7; border:1px solid #bcd2c9; border-left:3px solid #e5746e; color:#46615a; padding:11px 15px; border-radius:14px; box-shadow:0 18px 40px -12px rgba(0,0,0,.45); font-size:13px; opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; }
.toast::before{ content:""; width:7px; height:7px; border-radius:50%; background:#e5746e; flex:0 0 auto; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.input{ box-shadow:inset 4px 4px 9px #bcd2c9, inset -4px -4px 9px #f1fbf7; } .btn-ghost{ box-shadow:4px 4px 10px #bcd2c9, -4px -4px 10px #f1fbf7; border:0; }