/* Base */
:root {
  --gold-1: #f0c27b;
  --gold-2: #f5d68b;
  --indigo-1: #4338ca;
}

html, body { height: 100%; }
body { font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', sans-serif; touch-action: manipulation; }

/* Phone Frame */
.phone-wrapper {
  width: 100%;
  max-width: 430px;
  height: 932px;
  max-height: 95vh;
  border-radius: 2.2rem;
  background: linear-gradient(180deg, rgba(2,6,23,.85), rgba(2,6,23,.92));
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 20px 60px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 0 0 0 2px rgba(255,255,255,.03);
}

/* Notch (overlay, no layout shift) */
.notch { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 44%; height: 22px; background: rgba(15,23,42,.9); border-radius: 0 0 16px 16px; box-shadow: 0 2px 10px rgba(0,0,0,.4); pointer-events: none; z-index: 10; }

/* Screens */
.screen { display: none; height: 100%; }
.screen.active { display: flex; flex-direction: column; }
#screen-content { flex: 1 1 auto; min-height: 0; }

/* Passcode dots */
.passcode-dot { width: 14px; height: 14px; border-radius: 9999px; background: rgba(148,163,184,.35); box-shadow: inset 0 0 0 2px rgba(255,255,255,.06); transition: background-color .2s ease, transform .2s ease; }
.passcode-dot.active { background: linear-gradient(135deg, #60a5fa, #3b82f6); box-shadow: 0 0 0 4px rgba(59,130,246,.25), inset 0 0 0 2px rgba(255,255,255,.15); transform: scale(1.1); }

/* Keypad buttons */
.keypad-btn { height: 64px; border-radius: 9999px; display: grid; place-items: center; font-weight: 700; color: #e5e7eb; position: relative; overflow: hidden; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.08); }
.num-btn { background: linear-gradient(180deg, rgba(30,41,59,.8), rgba(15,23,42,.85)); box-shadow: 0 6px 20px rgba(2,6,23,.6); font-size: 1.375rem; }
.icon-btn { background: linear-gradient(180deg, rgba(30,41,59,.75), rgba(15,23,42,.8)); }
.keypad-btn:active { transform: scale(.95); background: rgba(30,41,59,.9); }
.keypad-btn::after { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 200px at var(--x,50%) var(--y,50%), rgba(255,255,255,.15), transparent 40%); opacity: 0; transition: opacity .25s; }
.keypad-btn.ripple::after { opacity: 1; animation: rippleFade .6s ease-out forwards; }
@keyframes rippleFade { to { opacity: 0; } }

/* Cards */
.glass-card { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.08); border-radius: 1rem; box-shadow: 0 10px 30px rgba(2,6,23,.5); }
.glass-item { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: .875rem; padding: 1rem; }
.divider { border-top: 1px solid rgba(255,255,255,.08); }

/* Chips / Buttons */
.action-chip { display: inline-flex; align-items: center; gap:.5rem; padding: .5rem .9rem; border-radius: 9999px; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.06)); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 6px 16px rgba(0,0,0,.35); font-weight: 700; color: #f8fafc; }
.action-chip i { color: var(--gold-1); }
.badge { padding: .35rem .6rem; border-radius: .6rem; font-weight: 800; font-size: .7rem; letter-spacing: .06em; color: #0b1220; background: linear-gradient(135deg, var(--gold-2), var(--gold-1)); box-shadow: inset 0 -1px 0 rgba(0,0,0,.2), 0 6px 16px rgba(0,0,0,.35); }

.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 44px; border-radius: .9rem; font-weight: 800; background: linear-gradient(135deg, #2563eb, #7c3aed); color: white; box-shadow: 0 14px 30px rgba(37,99,235,.35); transition: transform .08s ease, filter .2s ease; border: 1px solid rgba(255,255,255,.12); }
.btn-primary:active { transform: translateY(1px) scale(.99); }
.link { color: #93c5fd; font-weight: 700; }

/* Form */
.form-label { font-size: .85rem; font-weight: 800; color: #cbd5e1; display: block; margin-bottom: .35rem; }
.form-input { width: 100%; padding: 1rem; border-radius: .9rem; background: rgba(255,255,255,.06); color: #e5e7eb; border: 1px solid rgba(255,255,255,.12); outline: none; transition: border-color .2s, background-color .2s; }
.form-input:focus { border-color: #60a5fa; background: rgba(255,255,255,.09); }
.field-readonly { padding: 1rem; border-radius: .9rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); color: #e5e7eb; }

/* Assets */
.asset-row { display: flex; align-items: center; gap: 1rem; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); padding: 1rem; border-radius: .9rem; }
.asset-icon { width: 40px; height: 40px; border-radius: 9999px; display: grid; place-items: center; font-weight: 800; color: white; box-shadow: 0 6px 18px rgba(0,0,0,.35); }

/* Tabs */
.tabbar { display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; gap: .25rem; background: rgba(255,255,255,.06); border-top: 1px solid rgba(255,255,255,.08); padding: .35rem; padding-bottom: calc(.35rem + env(safe-area-inset-bottom)); position: sticky; bottom: 0; left: 0; right: 0; z-index: 5; }
.nav-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: .35rem 0 .5rem; color: #94a3b8; font-weight: 700; gap: .15rem; position: relative; z-index: 1; }
.nav-tab i { font-size: 1.05rem; }
.nav-tab.active { color: #e2e8f0; }
.nav-tab.active i { color: #60a5fa; }
.tab-indicator { position: absolute; left: 0; bottom: 0; width: 20%; height: 3px; background: linear-gradient(90deg, #60a5fa, #a78bfa); border-radius: 9999px; transition: transform .25s ease; }

/* Lang buttons */
.lang-btn { width: 100%; text-align: left; padding: 1rem; border-radius: .9rem; font-weight: 800; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: #e5e7eb; }
.lang-btn[aria-selected="true"] { border-color: #60a5fa; box-shadow: 0 0 0 3px rgba(96,165,250,.25); }

/* Menu item */
.menu-item { display: grid; grid-template-columns: 24px 1fr 24px; align-items: center; gap: .75rem; padding: 1rem; border-radius: .9rem; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); color: #e2e8f0; box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.menu-item:hover { background: rgba(255,255,255,.07); }

/* Animations */
@keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } 20%, 40%, 60%, 80% { transform: translateX(5px); } }
.shake-error { animation: shake .5s ease-in-out; }

.screen-enter { animation: fadeUp .3s ease-out; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }