:root {
  --ink: #f1f7ff;
  --muted: #91a0b6;
  --blue: #8cffc1;
  --cyan: #58d8ff;
  --line: rgba(151, 174, 203, .18);
  --paper: rgba(13, 23, 42, .9);
  --shadow: 0 30px 90px rgba(0, 0, 0, .42);
}

body {
  color: var(--ink);
  background: #060b14;
}

.backdrop {
  background:
    linear-gradient(rgba(82, 216, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(82, 216, 255, .035) 1px, transparent 1px),
    radial-gradient(circle at 18% 22%, rgba(38, 132, 128, .28), transparent 30%),
    radial-gradient(circle at 88% 8%, rgba(77, 73, 183, .3), transparent 32%),
    linear-gradient(145deg, #060b14 0%, #0a1120 52%, #07111a 100%);
  background-size: 34px 34px, 34px 34px, auto, auto, auto;
}

.backdrop::before {
  width: 540px;
  height: 540px;
  left: -210px;
  bottom: -210px;
  opacity: 1;
  background: transparent;
  border: 1px solid rgba(93, 232, 194, .15);
  border-radius: 50%;
  box-shadow: 0 0 0 70px rgba(93, 232, 194, .025), 0 0 0 140px rgba(93, 232, 194, .018);
  mask-image: none;
}

.backdrop::after {
  width: 580px;
  height: 580px;
  right: -260px;
  top: 5%;
  border: 1px solid rgba(92, 156, 255, .16);
  border-radius: 50%;
  box-shadow: inset 0 0 90px rgba(47, 102, 173, .04);
  transform: none;
}

.backdrop i { filter: blur(35px); opacity: .6; }
.backdrop i:nth-child(1) { width: 260px; height: 260px; right: 12%; top: -120px; background: rgba(81, 101, 255, .22); }
.backdrop i:nth-child(2) { width: 230px; height: 230px; left: 13%; top: 35%; border: 0; background: rgba(52, 228, 174, .12); }
.backdrop i:nth-child(3) { width: 320px; height: 320px; right: 18%; bottom: -220px; background: rgba(55, 175, 224, .14); }

.brand-icon {
  color: #071019;
  background: linear-gradient(145deg, #8cffc1, #58d8ff);
  box-shadow: 0 0 30px rgba(90, 228, 211, .25);
}
.brand strong { color: #f5f8ff; }
.brand small { color: #718198; }

.header-actions a,
.header-actions button {
  color: #bdc8d8;
  background: rgba(14, 25, 44, .72);
  border-color: rgba(138, 160, 188, .2);
  box-shadow: none;
}
.header-actions a:hover,
.header-actions button:hover {
  color: white;
  border-color: rgba(119, 244, 202, .5);
  background: rgba(19, 34, 55, .94);
}
.header-actions b { color: #77e9c5; }

.system-tag {
  color: #83f0c8;
  background: rgba(39, 146, 113, .1);
  border-color: rgba(95, 229, 184, .28);
  box-shadow: inset 0 0 18px rgba(80, 230, 180, .04);
}
.hero h1 { color: #f7f9ff; text-shadow: 0 10px 35px rgba(0,0,0,.35); }
.hero h1 em {
  color: transparent;
  background: linear-gradient(90deg, #8cffc1, #58d8ff);
  background-clip: text;
  -webkit-background-clip: text;
}
.hero p { color: #8291a6; }

.stepper > i { background: rgba(136, 157, 184, .2); }
.step { color: #65738a; }
.step span {
  color: #728099;
  background: #101a2c;
  border-color: rgba(146, 167, 196, .16);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .24);
  transform: none;
}
.step.active { color: #e8f2ff; }
.step.active span {
  color: #06121a;
  background: linear-gradient(145deg, #8cffc1, #58d8ff);
  box-shadow: 0 0 24px rgba(89, 222, 210, .22);
}
.step.done span { color: #07121a; background: #80e3bc; }

.recharge-card {
  padding: 32px 25px 23px;
  background: linear-gradient(145deg, rgba(17, 29, 50, .96), rgba(9, 18, 33, .94));
  border: 1px solid rgba(131, 157, 192, .2);
  border-radius: 18px;
  box-shadow: 0 30px 90px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.035);
}
.accent-line {
  left: 26px;
  right: 26px;
  height: 3px;
  background: linear-gradient(90deg, #83f0c8, #54d4ff, #8177ff);
  box-shadow: 0 0 18px rgba(91, 222, 217, .42);
}
.heading-icon {
  color: #7ce7c2;
  background: rgba(80, 223, 179, .08);
  border: 1px solid rgba(104, 231, 193, .15);
}
.panel-heading h2 { color: #f0f5ff; }
.panel-heading p { color: #7f8da2; }
label { color: #b9c5d6; }
.label-row a { color: #76dfc0; }

input,
textarea {
  color: #edf5ff;
  background: rgba(5, 13, 25, .7);
  border-color: rgba(131, 155, 185, .22);
}
input::placeholder,
textarea::placeholder { color: #536176; }
input:focus,
textarea:focus {
  border-color: rgba(105, 231, 196, .64);
  background: rgba(6, 15, 28, .92);
  box-shadow: 0 0 0 4px rgba(94, 228, 192, .07), 0 0 25px rgba(60, 180, 164, .06);
}

.primary-button {
  color: #06121a;
  background: linear-gradient(100deg, #8cffc1, #59dbef 62%, #70a9ff);
  box-shadow: 0 12px 32px rgba(74, 210, 193, .18);
}
.primary-button:hover { filter: brightness(1.08); }
.back-button { color: #9dadc1; background: rgba(126, 148, 178, .12); border: 1px solid rgba(137, 160, 191, .12); }

.privacy-note { color: #73839a; }
.privacy-note span { color: #071119; background: #6fd9b7; }
.warning-note {
  color: #e1be7f;
  background: rgba(151, 105, 33, .09);
  border-color: rgba(224, 173, 82, .18);
}
.warning-note span { color: #11131a; background: #e6b55c; }

.review-list,
.result-list { border-color: rgba(129, 153, 184, .18); }
.review-list div,
.result-list div { border-color: rgba(129, 153, 184, .13); }
.review-list dt,
.result-list dt { color: #718198; }
.review-list dd,
.result-list dd { color: #dbe5f2; }

.result-icon {
  color: #061319;
  background: linear-gradient(145deg, #8cffc1, #58d8ff);
  border-radius: 50%;
  transform: none;
  box-shadow: 0 0 30px rgba(94, 229, 202, .22);
}
.result-icon.processing { background: #5cb8ff; }
.result-icon.failed { color: white; background: #e05e70; }
.result-status { color: #82e9c4; background: rgba(68, 201, 159, .1); }
.result-status.processing { color: #79c9ff; background: rgba(73, 156, 219, .1); }
.result-status.failed { color: #f08391; background: rgba(217, 71, 90, .1); }
.result-panel h2 { color: #f0f5ff; }
.result-panel > p { color: #8190a4; }

.page-status { color: #76d8ba; }
.page-status span { color: #071119; background: #6fd9b7; border-radius: 50%; }
footer { color: #526075; }

dialog {
  color: #eef5ff;
  background: #101b2e;
  border: 1px solid rgba(138, 162, 192, .2);
  box-shadow: 0 35px 100px rgba(0,0,0,.6);
}
dialog::backdrop { background: rgba(2, 7, 14, .72); }
.dialog-head button { color: #78879a; }
dialog > form > p { color: #8190a5; }
.guide-list li { border-color: rgba(133, 157, 187, .14); }
.guide-list li > span { color: #071119; background: linear-gradient(145deg, #8cffc1, #58d8ff); }
.guide-list p { color: #7c8ba0; }
#toast { color: #071119; background: #88efc6; box-shadow: 0 15px 45px rgba(0,0,0,.4); }