/* ═══════════════════════════════════════════
   DESIGN TOKENS — Gemini-style dark palette
═══════════════════════════════════════════ */
:root {
    /* Backgrounds */
    --bg-base:     #131314;
    --bg-surface:  #1e1f20;
    --bg-hover:    #333538;
    --bg-active:   #2c2d30;
    --bg-input:    #2c2d30;

    /* Borders */
    --border:      #444746;
    --border-light: #3c3f3e;

    /* Text */
    --text-1: #e3e3e3;
    --text-2: #c4c7c5;
    --text-3: #8e918f;
    --text-4: #5f6368;

    /* Accent */
    --accent:       #8ab4f8;
    --accent-bg:    rgba(138,180,248,0.1);
    --accent-hover: rgba(138,180,248,0.15);

    /* Semantic */
    --green:        #81c995;
    --green-bg:     rgba(129,201,149,0.1);
    --red:          #f28b82;
    --red-bg:       rgba(242,139,130,0.1);
    --yellow:       #fdd663;
    --yellow-bg:    rgba(253,214,99,0.1);

    /* Terminal */
    --term-bg:      #0d0d0d;
    --term-text:    #c4c7c5;
    --term-green:   #81c995;
    --term-yellow:  #fdd663;
    --term-red:     #f28b82;
    --term-blue:    #8ab4f8;
    --term-cyan:    #78d9ec;
    --term-gray:    #5f6368;
    --term-muted:   #3c3f3e;

    /* Layout */
    --header-h:   56px;
    --sidebar-w:  220px;
    --radius-sm:  6px;
    --radius-md:  8px;
    --radius-lg:  12px;
}

/* ═══════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }
body { height: 100%; overflow: hidden; }
body {
    font-family: 'Roboto', sans-serif;
    background: var(--bg-base);
    color: var(--text-1);
    display: flex;
    flex-direction: column;
}
button { font-family: inherit; cursor: pointer; border: none; outline: none; }
input, textarea { font-family: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }

/* ═══════════════════════════════════════════
   AUTH OVERLAY
═══════════════════════════════════════════ */
#auth-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-base);
    z-index: 200;
}
.auth-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: clamp(1.25rem, 5vw, 2rem);
    width: 100%;
    max-width: 400px;
}
.auth-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
    justify-content: center;
}
.auth-brand img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}
.auth-brand-name {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(90deg, #2757a0, #f6a918);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 0.5px;
}
.auth-title {
    font-family: 'Google Sans', sans-serif;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--text-1);
    margin-bottom: 0.25rem;
}
.auth-sub {
    font-size: 0.875rem;
    color: var(--text-3);
    margin-bottom: 1.5rem;
}

/* ═══════════════════════════════════════════
   FORM ELEMENTS
═══════════════════════════════════════════ */
.field { margin-bottom: 0.875rem; }
.field-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.35rem;
}
.input-field {
    width: 100%;
    padding: 0.65rem 0.85rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-1);
    font-size: 0.9rem;
    transition: border-color 0.15s;
    outline: none;
}
.input-field:focus { border-color: var(--accent); }
.input-field::placeholder { color: var(--text-4); }

.pwd-wrapper { position: relative; display: flex; align-items: center; }
.pwd-toggle {
    position: absolute; right: 0.5rem; background: transparent; border: none;
    color: var(--text-3); font-size: 1.1rem; cursor: pointer; padding: 0.2rem;
}
.pwd-toggle:hover { color: var(--text-1); }

/* ═══════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 1.2rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    transition: background 0.15s, opacity 0.15s;
    width: 100%;
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: #0d1117; }
.btn-primary:hover:not(:disabled) { background: #a8c7fa; }
.btn-ghost {
    background: transparent;
    color: var(--text-2);
    border: 1px solid var(--border);
}
.btn-ghost:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-1); }
.btn-success { background: var(--green); color: #0d1117; }
.btn-success:hover:not(:disabled) { background: #a8d5b5; }
.btn-danger { background: var(--red); color: #0d1117; }
.btn-danger:hover:not(:disabled) { background: #f5a49d; }
.btn-sm { padding: 0.4rem 0.85rem; font-size: 0.8rem; width: auto; }

/* ═══════════════════════════════════════════
   SHARED COMPONENTS
═══════════════════════════════════════════ */

/* Section header */
.section-header { margin-bottom: 1.25rem; }
.section-title {
    font-family: 'Google Sans', sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-1);
    margin-bottom: 0.2rem;
}
.section-desc { font-size: 0.83rem; color: var(--text-3); }

/* Cards */
.card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.1rem;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}
.card + .card { margin-top: 0.75rem; }
.card-label {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.75px;
    margin-bottom: 0.75rem;
}

/* Two-column grid */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; max-width: 900px; }
.full-col { grid-column: 1 / -1; }

/* Inline message */
.msg { font-size: 0.82rem; padding: 0.35rem 0; line-height: 1.5; min-height: 1.2em; }
.msg-error   { color: var(--red); }
.msg-success { color: var(--green); }
.msg-info    { color: var(--text-3); }

/* Utility */
.hidden { display: none !important; }
.mt-sm { margin-top: 0.5rem; }
.mt-md { margin-top: 0.875rem; }
.flex-row { display: flex; align-items: center; gap: 0.5rem; }

/* Coming Soon */
.coming-soon-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.75rem;
    color: var(--text-4);
    padding: 3rem;
    text-align: center;
}
.coming-soon-icon { font-size: 2.5rem; }
.coming-soon-title { font-size: 1rem; font-weight: 500; color: var(--text-3); }
.coming-soon-desc { font-size: 0.82rem; }

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; }

/* Store UI Refinements */
.store-qty-input {
    width: 120px;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border);
    padding: 0.65rem;
    border-radius: 6px;
    font-size: 1.1rem;
    color: var(--text-1);
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.5);
    outline: none;
}
.store-qty-input:focus {
    border-color: var(--accent);
}

.btn-modifier {
    background: rgba(138,180,248,0.15);
    color: var(--accent);
    border: 1px solid rgba(138,180,248,0.3);
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-weight: bold;
    height: 100%;
    cursor: pointer;
    transition: background 0.15s ease;
}
.btn-modifier:hover {
    background: rgba(138,180,248,0.25);
}