* { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }
body { margin: 0; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; }

/* Phone shell centered on desktop, full screen on mobile */
.app-shell {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  background: #0a1f14;
  position: relative;
  overflow-x: hidden;
  box-shadow: 0 0 40px rgba(0,0,0,.5);
}

.grad-green { background: linear-gradient(160deg, #0a1f14 0%, #0d3b23 55%, #00e676 160%); }
.grad-card { background: linear-gradient(135deg, #00c853 0%, #00e676 60%, #1de9b6 100%); }

.field-input {
  background: transparent;
  border: none;
  border-bottom: 1.5px solid rgba(0,230,118,.4);
  color: #fff;
  width: 100%;
  padding: 10px 6px 10px 38px;
  outline: none;
  font-size: 15px;
}
.field-input::placeholder { color: rgba(255,255,255,.45); }
.field-input:focus { border-bottom-color: #00e676; }

.btn-green {
  background: #00e676; color: #04140b; font-weight: 700;
  border-radius: 14px; padding: 14px; width: 100%; border: none;
  font-size: 16px; cursor: pointer; transition: .15s;
}
.btn-green:active { transform: scale(.98); }
.btn-outline {
  background: transparent; color: #00e676; border: 1.5px solid #00e676;
  border-radius: 14px; padding: 12px; width: 100%; font-weight: 600; cursor: pointer;
}

.nav-bar {
  position: sticky; bottom: 0; left: 0; right: 0;
  background: #061710; border-top: 1px solid rgba(0,230,118,.18);
  display: flex; justify-content: space-around; padding: 8px 0;
}
.nav-item { flex:1; text-align:center; color:#5c7a6a; font-size:11px; cursor:pointer; }
.nav-item.active { color:#00e676; }
.nav-item i { font-size: 18px; display:block; margin-bottom:3px; }

.marquee { overflow:hidden; white-space:nowrap; }
.marquee span { display:inline-block; padding-left:100%; animation: scroll 18s linear infinite; }
@keyframes scroll { 0%{transform:translateX(0)} 100%{transform:translateX(-100%)} }

.easy-action {
  background:#0f2a1c; border:1px solid rgba(0,230,118,.15); border-radius:16px;
  padding:16px 6px; text-align:center; cursor:pointer; transition:.15s;
}
.easy-action:active { transform: scale(.96); }
.easy-action i { color:#00e676; font-size:22px; }

.sheet-bg { position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:flex-end; z-index:50; }
.sheet { background:#0a1f14; width:100%; max-width:430px; margin:0 auto; border-radius:22px 22px 0 0; padding:20px; max-height:92vh; overflow-y:auto; }

.toast { position:fixed; top:20px; left:50%; transform:translateX(-50%); z-index:100;
  background:#0f2a1c; color:#fff; padding:12px 20px; border-radius:12px; border:1px solid #00e676; font-size:14px; max-width:90%; }

.splash-logo { width:110px;height:110px;border-radius:50%; background:rgba(255,255,255,.12); display:flex;align-items:center;justify-content:center; }
.spin { animation: sp 1s linear infinite; } @keyframes sp { to { transform: rotate(360deg) } }