/* ============================================================
   CC LITE — ASPECT MANAGER — Styles
   ============================================================ */

* { box-sizing: border-box; }

body {
    margin: 0; padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #1a1a2e; color: #eee;
    min-height: 100vh;
}

/* --- Auth gate --- */
.auth-gate {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    background: #1a1a2e;
}
.auth-card {
    background: #16213e; border-radius: 16px; padding: 2.5rem;
    max-width: 380px; width: 90%; text-align: center;
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.auth-card h1 { color: #e2c044; margin: 0 0 .25rem; font-size: 1.6rem; font-family: 'Georgia', serif; }
.auth-card .subtitle { color: #aaa; margin: 0 0 1.5rem; font-size: .9rem; }
.auth-input {
    width: 100%; padding: .6rem .8rem; border: 1px solid #333;
    border-radius: 8px; background: #0f1629; color: #eee;
    font-size: .95rem; margin-bottom: .8rem;
}
.auth-input:focus { outline: none; border-color: #e2c044; }
.auth-error { color: #f44; margin: 0 0 .8rem; font-size: .85rem; }
.btn-full { width: 100%; }

/* --- Buttons --- */
.btn {
    display: inline-block; padding: .55rem 1.2rem; border: none;
    border-radius: 8px; font-size: .85rem; cursor: pointer;
    font-weight: 600; transition: all .15s;
    text-decoration: none; text-align: center;
}
.btn-primary { background: #e2c044; color: #1a1a2e; }
.btn-primary:hover { background: #d4a82a; }
.btn-secondary { background: #3a506b; color: #eee; }
.btn-secondary:hover { background: #4a6a8b; }
.btn-danger { background: #c0392b; color: #fff; }
.btn-danger:hover { background: #e74c3c; }
.btn-sm { padding: .35rem .8rem; font-size: .78rem; }
.btn-xs { padding: .15rem .45rem; font-size: .72rem; border-radius: 5px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* --- Header --- */
.app-header {
    background: #16213e; padding: .8rem 1.5rem;
    display: flex; align-items: center; gap: 1rem;
    border-bottom: 2px solid #e2c044;
    flex-wrap: wrap;
}
.app-header h1 { color: #e2c044; font-size: 1.25rem; margin: 0; font-family: 'Georgia', serif; }
.app-header .header-actions {
    display: flex; gap: .5rem; margin-left: auto; align-items: center; flex-wrap: wrap;
}

/* --- Main --- */
.aspect-main { padding: 1.5rem; max-width: 720px; margin: 0 auto; }
.aspect-main h2 { margin: 0 0 .3rem; color: #e2c044; }
.aspect-main .hint { color: #888; font-size: .82rem; margin: 0 0 1.4rem; line-height: 1.5; }
.empty-msg { color: #888; text-align: center; padding: 2rem 0; }

.aspect-col-labels {
    display: flex; gap: .5rem; color: #667; font-size: .62rem;
    text-transform: uppercase; letter-spacing: 1px; margin-bottom: .3rem;
    padding: 0 .2rem;
}
.aspect-col-labels .l-preview { width: 44px; }
.aspect-col-labels .l-color { width: 40px; }
.aspect-col-labels .l-symbol { width: 70px; }
.aspect-col-labels .l-name { flex: 1; }

.aspect-row {
    display: flex; gap: .5rem; align-items: center;
    background: #16213e; border: 1px solid #2a2a4a; border-radius: 10px;
    padding: .55rem .6rem; margin-bottom: .5rem;
}
.aspect-preview {
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; flex: 0 0 auto;
    border: 3px solid rgba(255,255,255,.35);
    box-shadow: 0 2px 5px rgba(0,0,0,.4);
}
.aspect-row input[type="color"] {
    width: 40px; height: 34px; padding: 2px;
    background: #0f1629; border: 1px solid #333; border-radius: 6px;
    cursor: pointer; flex: 0 0 auto;
}
.aspect-row .as-symbol {
    width: 70px; text-align: center;
    padding: .45rem .3rem; font-size: 1rem;
    background: #0f1629; border: 1px solid #333;
    color: #eee; border-radius: 6px; flex: 0 0 auto;
}
.aspect-row .as-name {
    flex: 1; min-width: 0; padding: .45rem .6rem;
    background: #0f1629; border: 1px solid #333;
    color: #eee; border-radius: 6px; font-size: .9rem;
}
.aspect-row input:focus { outline: none; border-color: #e2c044; }
.aspect-usage { color: #778; font-size: .7rem; min-width: 56px; text-align: right; }

/* --- Aspect icon wells (black + white ink uploads) --- */
.aspect-preview img { width: 70%; height: 70%; object-fit: contain; }
.aspect-icons { display: flex; gap: .35rem; flex: 0 0 auto; }
.aspect-col-labels .l-icons { width: 82px; }
.icon-well {
    position: relative;
    width: 38px; height: 38px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: .7rem; font-weight: 700; cursor: pointer;
    border: 1px dashed #445;
}
.icon-well.well-black { background: #d8d4c8; color: #555; }
.icon-well.well-white { background: #22283e; color: #99a; }
.icon-well img { width: 80%; height: 80%; object-fit: contain; pointer-events: none; }
.icon-well:hover { border-color: #e2c044; border-style: solid; }
.icon-well .icon-clear {
    position: absolute; top: -7px; right: -7px;
    width: 16px; height: 16px; line-height: 13px;
    border-radius: 50%; border: none; cursor: pointer;
    background: #c0392b; color: #fff; font-size: .7rem; padding: 0;
    display: none;
}
.icon-well:hover .icon-clear { display: block; }

/* --- Toasts --- */
.toast-container {
    position: fixed; top: 1.5rem; left: 50%; transform: translateX(-50%);
    z-index: 9999; display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.toast {
    padding: .7rem 1.2rem; border-radius: 8px; font-size: .85rem;
    animation: toastIn .3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
.toast-success { background: #27ae60; color: #fff; }
.toast-error { background: #c0392b; color: #fff; }
.toast-info { background: #2980b9; color: #fff; }
@keyframes toastIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Confirm modal --- */
.modal-overlay {
    position: fixed; inset: 0; z-index: 9998;
    background: rgba(10, 12, 26, .72);
    display: flex; align-items: center; justify-content: center;
}
.modal-card {
    background: #16213e; border: 1px solid #2a2a4a; border-radius: 14px;
    padding: 1.4rem 1.6rem; max-width: 420px; width: 92%;
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.modal-card h3 { margin: 0 0 .5rem; color: #e2c044; font-size: 1.05rem; }
.modal-card p { margin: 0 0 1.2rem; color: #ccc; font-size: .88rem; line-height: 1.45; }
.modal-actions { display: flex; gap: .6rem; justify-content: flex-end; }