:root {

    --oneinch-bg: #0b0e17;
    --oneinch-card-bg: #131720;
    --oneinch-input-bg: #1e222d;
    --oneinch-border: #2c3142;
    --oneinch-border-light: #3a3f4e;
    --oneinch-bg-secondary: #1a1e29;
    --oneinch-bg-tertiary: #232835;
    --oneinch-bg-hover: #2a2f3c;
    --oneinch-blue: #2c5eff;
    --oneinch-blue-hover: #1f4eeb;
    --oneinch-text-primary: #ffffff;
    --oneinch-text-secondary: #8992a3;
    --oneinch-text-tertiary: #5e6673;
    --oneinch-accent-green: #0db4a5;
    --oneinch-success: #22c55e;
    --oneinch-warning: #f59e0b;
    --oneinch-warning-hover: #cc8408;
    --oneinch-error: #ef4444;

    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 32px;

    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-2xl: 24px;
    --spacing-3xl: 32px;
    --spacing-4xl: 40px;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;

    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);

    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;

    --z-dropdown: 100;
    --z-modal: 1000;
    --z-toast: 1100;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    font-family: var(--font-family);
    background: var(--oneinch-bg);
    color: var(--oneinch-text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

.text-primary { color: var(--oneinch-text-primary); }
.text-secondary { color: var(--oneinch-text-secondary); }
.text-tertiary { color: var(--oneinch-text-tertiary); }
.text-success { color: var(--oneinch-success); }
.text-warning { color: var(--oneinch-warning); }
.text-error { color: var(--oneinch-error); }

.bg-primary { background: var(--oneinch-bg); }
.bg-card { background: var(--oneinch-card-bg); }
.bg-input { background: var(--oneinch-input-bg); }

.border { border: 1px solid var(--oneinch-border); }
.border-radius { border-radius: var(--radius-md); }

.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col { display: flex; flex-direction: column; }

.w-full { width: 100%; }
.h-full { height: 100%; }

.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }

.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }
.m-xl { margin: var(--spacing-xl); }

.hidden { display: none; }
.visible { display: block; }

.btn {
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.btn:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.btn-primary {
    background: var(--oneinch-blue);
    color: white;
    padding: var(--spacing-md) var(--spacing-xl);
}

.btn-primary:hover:not(:disabled) {
    background: var(--oneinch-blue-hover);
}

.btn-secondary {
    background: transparent;
    color: var(--oneinch-text-secondary);
    border: 1px solid var(--oneinch-border);
    padding: var(--spacing-md) var(--spacing-xl);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--oneinch-input-bg);
    color: var(--oneinch-text-primary);
}

.input {
    background: var(--oneinch-input-bg);
    border: 1px solid var(--oneinch-border);
    border-radius: var(--radius-md);
    color: var(--oneinch-text-primary);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    padding: var(--spacing-lg);
    width: 100%;
    outline: none;
    transition: border-color var(--transition-normal);
}

.input:focus {
    border-color: var(--oneinch-blue);
}

.input::placeholder {
    color: var(--oneinch-text-tertiary);
}

@media (max-width: 768px) {
    :root {
        --spacing-lg: 12px;
        --spacing-xl: 16px;
        --spacing-2xl: 20px;
        --spacing-3xl: 24px;
    }
}

.bitflow ::-webkit-scrollbar {
    width: 8px;
}

.bitflow ::-webkit-scrollbar-track {
    background: var(--oneinch-bg);
}

.bitflow ::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--oneinch-blue, #0ea5e9), var(--oneinch-accent, #22d3ee));
    border-radius: 6px;
}

.bitflow ::-webkit-scrollbar-thumb:hover {
    filter: brightness(1.1);
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}