*, :after, :before {
    box-sizing: border-box;
    border: 0 solid #e5e7eb;
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgba(59,130,246,.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000
}

:root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 27, 27, 27;
    --background-end-rgb: 27, 27, 27;
    --green-accent: #10b981;
    --green-hover: #059669;
    --dark-bg: #1b1b1b;
    --dark-input: #1b1b1b;
    --dark-border: #2d2d2d;
    --dark-card: #252526;
    --text-primary: #ffffff;
    --text-secondary: #d1d5db;
    --text-muted: #9ca3af;
    --text-dim: #6b7280;
    --text-label: #9ca3af
}

:host, html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    -webkit-tap-highlight-color: transparent
}

body {
    margin: 0;
    line-height: inherit;
    color: rgb(var(--foreground-rgb));
    background: rgb(var(--background-start-rgb));
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

/* === TYPOGRAPHY === */
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit }
a { color: inherit; text-decoration: inherit }

/* === FORM ELEMENTS === */
button, input, select, textarea {
    font-family: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0
}

button, select { text-transform: none }

button, input:where([type=button]), input:where([type=reset]), input:where([type=submit]) {
    -webkit-appearance: button;
    appearance: button;
    background-color: transparent;
    background-image: none
}

input::-moz-placeholder, textarea::-moz-placeholder { opacity: 1; color: var(--text-dim) }
input::placeholder, textarea::placeholder { opacity: 1; color: var(--text-dim) }

/* Hide number input spinners */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}
input[type=number] { -moz-appearance: textfield }

[role=button], button { cursor: pointer }
:disabled { cursor: default }

img, video { max-width: 100%; height: auto }
audio, canvas, embed, iframe, img, object, svg, video { display: block }

/* === LAYOUT UTILITIES === */
.fixed { position: fixed }
.absolute { position: absolute }
.relative { position: relative }
.bottom-8 { bottom: 2rem }
.left-4 { left: 1rem }
.right-2 { right: 0.5rem }
.right-4 { right: 1rem }
.top-1\/2 { top: 50% }

.mx-auto { margin-left: auto; margin-right: auto }
.mb-8 { margin-bottom: 2rem }
.mr-2 { margin-right: 0.5rem }
.mt-4 { margin-top: 1rem }
.mt-6 { margin-top: 1.5rem }

.flex { display: flex }
.inline-flex { display: inline-flex }

.h-9 { height: 2.25rem }
.h-8 { height: 2rem }
.h-12 { height: 3rem }
.h-4 { height: 1rem }
.h-6 { height: 1.5rem }
.w-full { width: 100% }
.w-4 { width: 1rem }
.w-6 { width: 1.5rem }
.w-8 { width: 2rem }
.min-h-screen { min-height: 100vh }
.max-w-md { max-width: 28rem }

.page-shell {
    position: relative;
    z-index: 0;
    padding-bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px))
}

.input-actions {
    position: absolute;
    z-index: 2;
    pointer-events: auto
}

.flex-1 { flex: 1 1 0% }

.-translate-y-1\/2 {
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.items-center { align-items: center }
.justify-center { justify-content: center }
.gap-1 { gap: 0.25rem }
.gap-2 { gap: 0.5rem }

.space-y-1 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0.25rem
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 1.5rem
}

.overflow-hidden { overflow: hidden }
.rounded-full { border-radius: 9999px }
.rounded-md { border-radius: 0.375rem }
.rounded-lg { border-radius: 0.5rem }

/* === BORDERS === */
.border { border-width: 1px }
.border-gray-800 { border-color: var(--dark-border) }

/* === BACKGROUNDS === */
.bg-\[\#1b1b1b\] { background-color: var(--dark-bg) }
.bg-gray-800 { background-color: #1f2937 }
.bg-gray-900 { background-color: #111827 }

/* === PADDING === */
.p-4 { padding: 1rem }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem }
.px-4 { padding-left: 1rem; padding-right: 1rem }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem }
.py-7 { padding-top: 1.75rem; padding-bottom: 1.75rem }
.pr-24 { padding-right: 6rem }
.pr-32 { padding-right: 8rem }

/* === TEXT === */
.text-center { text-align: center }
.text-left { text-align: left }
.text-xs { font-size: 0.75rem; line-height: 1rem }
.text-sm { font-size: 0.875rem; line-height: 1.25rem }
.text-base { font-size: 1rem; line-height: 1.5rem }
.text-lg { font-size: 1.125rem; line-height: 1.75rem }
.text-xl { font-size: 1.25rem; line-height: 1.75rem }
.text-2xl { font-size: 1.5rem; line-height: 2rem }
.font-medium { font-weight: 500 }

.text-white { color: var(--text-primary) }
.text-gray-300 { color: var(--text-secondary) }
.text-gray-400 { color: var(--text-muted) }
.text-gray-500 { color: var(--text-dim) }
.text-black { color: #000 }

/* === GREEN ACCENT (Trust Wallet brand) === */
.text-greentext { color: var(--green-accent) }
.bg-greentext { background-color: var(--green-accent) }

/* === HOVER STATES === */
.hover\:bg-gray-700:hover { background-color: #374151 }
.hover\:text-emerald-400:hover { color: #34d399 }

/* === DISABLED STATES === */
.disabled\:cursor-not-allowed:disabled { cursor: not-allowed }
.disabled\:opacity-50:disabled { opacity: 0.5 }

/* ============================================================
   COMPONENT: Network Selector Pill
   ============================================================ */
.rounded-container {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border: 1.5px solid var(--dark-border);
    border-radius: 9999px;
    background-color: var(--dark-card);
    gap: 8px;
    transition: border-color 0.2s ease
}

.rounded-container:hover {
    border-color: #3d3d3d
}

.logo {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    object-fit: cover
}

.ethereum {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.85rem;
    letter-spacing: 0.01em
}

/* ============================================================
   COMPONENT: Input Fields
   ============================================================ */
.input-field {
    width: 100%;
    height: auto;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1.5px solid var(--dark-border);
    background-color: var(--dark-bg);
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.5;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease
}

.input-field:focus {
    border-color: var(--green-accent);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15)
}

.input-field::placeholder {
    color: var(--text-dim)
}

/* Also style existing Tailwind-pattern inputs */
input.flex.rounded-md {
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease
}

input.flex.rounded-md:focus {
    border-color: var(--green-accent) !important;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15)
}

/* ============================================================
   COMPONENT: Primary Button (Next/Send)
   ============================================================ */
#approveBtn {
    width: 100%;
    height: 52px;
    border-radius: 9999px;
    border: none;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden
}

#approveBtn:not(:disabled) {
    background: var(--green-accent);
    color: #000;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(16, 185, 129, 0.25)
}

#approveBtn:not(:disabled):hover {
    background: var(--green-hover);
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.35);
    transform: translateY(-1px)
}

#approveBtn:not(:disabled):active {
    transform: translateY(0);
    box-shadow: 0 1px 8px rgba(16, 185, 129, 0.2)
}

#approveBtn:disabled {
    background: #2d2d2d;
    color: #555;
    cursor: not-allowed;
    box-shadow: none
}

/* ============================================================
   COMPONENT: Action Buttons (Paste, Max, icons)
   ============================================================ */
.btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--green-accent);
    background: transparent;
    border: none;
    transition: all 0.15s ease;
    cursor: pointer
}

.btn-action:hover {
    color: #34d399;
    background: rgba(16, 185, 129, 0.08)
}

.btn-action:active {
    background: rgba(16, 185, 129, 0.15)
}

/* ============================================================
   COMPONENT: Amount Display
   ============================================================ */
.amount-display {
    font-size: 0.75rem;
    color: var(--text-dim);
    padding: 4px 0;
    margin-top: 4px
}

/* ============================================================
   COMPONENT: Header / Title Bar
   ============================================================ */
.send-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 12px 0;
    margin-bottom: 28px
}

.send-header .back-btn {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    transition: color 0.15s ease
}

.send-header .back-btn:hover {
    color: var(--text-primary)
}

.send-header h1 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.01em
}

/* ============================================================
   COMPONENT: Form Labels
   ============================================================ */
.form-label {
    display: block;
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 6px;
    font-weight: 400
}

/* ============================================================
   COMPONENT: Section Spacing
   ============================================================ */
.form-section {
    margin-bottom: 20px
}

.form-section:last-of-type {
    margin-bottom: 0
}

/* ============================================================
   COMPONENT: Loading Spinner
   ============================================================ */
@keyframes spin {
    to { transform: rotate(360deg) }
}

.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2.5px solid rgba(0, 0, 0, 0.2);
    border-top-color: #000;
    border-radius: 50%;
    animation: spin 0.7s linear infinite
}

.spinner-white {
    border-color: rgba(255, 255, 255, 0.2);
    border-top-color: #fff
}

/* Button loading state */
#approveBtn.loading {
    pointer-events: none;
    opacity: 0.85
}

#approveBtn.loading .btn-text {
    visibility: hidden
}

#approveBtn.loading::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    border: 2.5px solid rgba(0, 0, 0, 0.2);
    border-top-color: #000;
    border-radius: 50%;
    animation: spin 0.7s linear infinite
}

/* ============================================================
   COMPONENT: Success / Error Screens
   ============================================================ */
.result-screen {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 2rem;
    text-align: center
}

.result-screen .result-icon {
    font-size: 3.5rem;
    margin-bottom: 1.2rem
}

.result-screen .result-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem
}

.result-screen .result-message {
    font-size: 1rem;
    color: var(--text-muted);
    max-width: 300px;
    line-height: 1.6
}

.result-screen .result-txid {
    margin-top: 1rem;
    padding: 8px 16px;
    background: var(--dark-card);
    border-radius: 9999px;
    font-size: 0.8rem;
    color: var(--text-dim);
    font-family: monospace;
    word-break: break-all;
    max-width: 280px
}

/* ============================================================
   COMPONENT: Status Bar (hidden by default)
   ============================================================ */
#status {
    display: none
}

/* ============================================================
   COMPONENT: Token Badge (next to amount input)
   ============================================================ */
.token-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    font-size: 0.875rem;
    color: var(--text-dim);
    font-weight: 500
}

.token-badge img {
    width: 16px;
    height: 16px;
    border-radius: 50%
}

/* ============================================================
   LAYOUT: Bottom Button Container
   ============================================================ */
.bottom-action {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, var(--dark-bg) 80%, transparent);
    max-width: 28rem;
    margin: 0 auto;
    pointer-events: none
}

.bottom-action #approveBtn:not(.loading) {
    pointer-events: auto
}

.bottom-action #approveBtn.loading {
    pointer-events: none
}

/* ============================================================
   RESPONSIVE: Small screens
   ============================================================ */
@media (max-width: 380px) {
    .p-4 { padding: 0.75rem }
    .pr-32 { padding-right: 6rem }
    #approveBtn { height: 48px; font-size: 1rem }
    .send-header h1 { font-size: 1.1rem }
}

/* ============================================================
   UTILITY: Selection colors
   ============================================================ */
::selection {
    color: #fff;
    background: rgba(16, 185, 129, 0.4)
}

::-moz-selection {
    color: #fff;
    background: rgba(16, 185, 129, 0.4)
}

/* ============================================================
   UTILITY: Smooth transitions on page load
   ============================================================ */
body {
    transition: opacity 0.2s ease-in
}

body[unresolved] {
    opacity: 0;
    overflow: hidden
}

/* ============================================================
   UTILITY: Scrollbar styling (WebKit)
   ============================================================ */
::-webkit-scrollbar {
    width: 4px
}

::-webkit-scrollbar-track {
    background: transparent
}

::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px
}

::-webkit-scrollbar-thumb:hover {
    background: #444
}