/* ============================================
   AutoNotes — Hi-Tech Red/Black Vibrant
   ============================================ */

:root{
    --bg:#0a0a0f;
    --bg1:linear-gradient(135deg,#0f0f18 0%,#0a0a0f 100%);
    --bg2:#12121c;
    --bg3:#181824;
    --bg4:#1e1e2e;
    --bdr:#262636;
    --bdr2:#363650;
    --txt:#f0f0f5;
    --txt2:#9090a8;
    --txt3:#585870;
    --red:#e63946;
    --red2:#ff4d5a;
    --red-g:linear-gradient(135deg,#e63946 0%,#ff6b6b 100%);
    --red-bg:rgba(230,57,70,0.12);
    --red-glow:0 0 20px rgba(230,57,70,0.3);
    --grn:#3ddc84;
    --grn-bg:rgba(61,220,132,0.12);
    --grn-glow:0 0 15px rgba(61,220,132,0.25);
    --blu:#4a9eff;
    --blu-bg:rgba(74,158,255,0.12);
    --blu-glow:0 0 15px rgba(74,158,255,0.25);
    --amb:#f59e0b;
    --amb-bg:rgba(245,158,11,0.12);
    --amb-glow:0 0 15px rgba(245,158,11,0.25);
    --cyn:#06d6a0;
    --cyn-bg:rgba(6,214,160,0.12);
    --prp:#a855f7;
    --prp-bg:rgba(168,85,247,0.12);
    --prp-glow:0 0 15px rgba(168,85,247,0.25);
    --org:#fb923c;
    --org-bg:rgba(251,146,60,0.12);
    --pink:#ec4899;
    --pink-bg:rgba(236,72,153,0.12);
    --r:10px;
    --r2:14px;
    --tr:.2s cubic-bezier(.4,0,.2,1);
}

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

body{
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    background:var(--bg);color:var(--txt);
    line-height:1.5;-webkit-font-smoothing:antialiased;
}

a{color:var(--red);text-decoration:none;transition:var(--tr)}
a:hover{color:var(--red2)}

/* ─── Topbar ──────────────────────────────── */

.topbar{
    position:sticky;top:0;z-index:100;
    background:linear-gradient(180deg,rgba(10,10,15,0.95) 0%,rgba(10,10,15,0.85) 100%);
    backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(230,57,70,0.15);
}

.topbar-in{
    max-width:1280px;margin:0 auto;
    display:flex;align-items:center;
    height:80px;padding:0 20px;gap:14px;
}

.brand{
    display:flex;align-items:center;gap:10px;
    font-weight:900;font-size:20px;
    white-space:nowrap;text-decoration:none;
}
.brand-txt{
    background:linear-gradient(135deg,#e63946 0%,#ff6b6b 40%,#ff8a80 70%,#e63946 100%);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    background-clip:text;
    letter-spacing:-0.5px;
    filter:drop-shadow(0 0 8px rgba(230,57,70,0.3));
}
.brand-logo{
    width:80px;height:80px;object-fit:contain;
}

.sbox{flex:1;max-width:420px;position:relative}
.sbox input{
    width:100%;padding:8px 14px 8px 36px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);border-radius:20px;
    color:var(--txt);font-size:13px;outline:0;transition:var(--tr);
}
.sbox input:focus{
    border-color:rgba(230,57,70,0.5);
    box-shadow:0 0 0 3px rgba(230,57,70,0.1),var(--red-glow);
    background:rgba(255,255,255,0.06);
}
.sbox input::placeholder{color:var(--txt3)}
.sbox .si{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--txt3);pointer-events:none}

.top-r{display:flex;align-items:center;gap:10px;margin-left:auto}

.btn-r{
    display:inline-flex;align-items:center;gap:5px;
    padding:7px 16px;
    background:var(--red-g);color:#fff;
    border:none;border-radius:8px;
    font-size:12px;font-weight:700;cursor:pointer;
    transition:var(--tr);text-transform:uppercase;letter-spacing:.3px;
    box-shadow:0 2px 12px rgba(230,57,70,0.3);
}
.btn-r:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(230,57,70,0.5)}

.avatar{
    width:32px;height:32px;border-radius:50%;
    background:linear-gradient(135deg,var(--bg3),var(--bg4));
    border:2px solid rgba(230,57,70,0.3);
    display:flex;align-items:center;justify-content:center;
    font-weight:800;font-size:12px;color:var(--red);
}

.out{font-size:11px;color:var(--txt3);transition:var(--tr)}
.out:hover{color:var(--red)}

/* ─── Category strip ──────────────────────── */

.cstrip{
    background:linear-gradient(180deg,rgba(18,18,28,0.8),rgba(10,10,15,0.6));
    border-bottom:1px solid rgba(255,255,255,0.04);
    padding:0 20px;overflow-x:auto;
}
.cstrip::-webkit-scrollbar{display:none}
.cstrip-in{display:flex;align-items:center;gap:5px;max-width:1280px;margin:0 auto;height:44px}

.cbtn{
    display:inline-flex;align-items:center;gap:4px;
    padding:5px 12px;background:rgba(255,255,255,0.03);
    border:1px solid transparent;border-radius:8px;
    color:var(--txt2);font-size:12px;font-weight:600;
    cursor:pointer;transition:var(--tr);white-space:nowrap;text-decoration:none;
}
.cbtn:hover{background:rgba(255,255,255,0.06);color:var(--txt);border-color:rgba(255,255,255,0.08)}
.cbtn.on{background:var(--red-bg);border-color:rgba(230,57,70,0.3);color:var(--red2)}
.cbtn svg{width:14px;height:14px;flex-shrink:0}
.cbtn .n{font-size:10px;opacity:.5}

/* ─── Grid ────────────────────────────────── */

.wrap{max-width:1280px;margin:0 auto;padding:14px 20px 48px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}

/* ─── Card ────────────────────────────────── */

.card{
    background:linear-gradient(145deg,rgba(24,24,36,0.9),rgba(18,18,28,0.9));
    border:1px solid rgba(255,255,255,0.06);
    border-radius:var(--r2);overflow:hidden;
    transition:var(--tr);cursor:pointer;
    text-decoration:none;color:inherit;
    display:flex;flex-direction:column;position:relative;
}
.card:hover{
    border-color:rgba(230,57,70,0.3);
    transform:translateY(-3px);
    box-shadow:0 12px 32px rgba(0,0,0,0.5),0 0 20px rgba(230,57,70,0.08);
}
.card.pinned{border-color:rgba(230,57,70,0.5);box-shadow:0 0 15px rgba(230,57,70,0.15)}

.card-img{
    width:100%;aspect-ratio:16/10;object-fit:cover;
    background:var(--bg2);border-bottom:1px solid rgba(255,255,255,0.04);display:block;
}
.card-noimg{
    width:100%;height:56px;
    background:linear-gradient(135deg,rgba(230,57,70,0.04),rgba(168,85,247,0.04));
    border-bottom:1px solid rgba(255,255,255,0.04);
    display:flex;align-items:center;justify-content:center;
}
.card-noimg svg{width:20px;height:20px;opacity:.15;color:var(--red)}

.card-b{padding:12px 14px;flex:1;display:flex;flex-direction:column}

.card-cat{
    display:inline-flex;align-items:center;gap:4px;
    font-size:10px;font-weight:700;text-transform:uppercase;
    letter-spacing:.5px;margin-bottom:6px;
    padding:3px 8px;border-radius:4px;width:fit-content;
}

/* Category colors — vibrant */
.c-keys{background:var(--grn-bg);color:var(--grn);box-shadow:inset 0 0 0 1px rgba(61,220,132,0.2)}
.c-electrical{background:var(--amb-bg);color:var(--amb);box-shadow:inset 0 0 0 1px rgba(245,158,11,0.2)}
.c-chip_tuning{background:var(--prp-bg);color:var(--prp);box-shadow:inset 0 0 0 1px rgba(168,85,247,0.2)}
.c-diagnostics{background:var(--cyn-bg);color:var(--cyn);box-shadow:inset 0 0 0 1px rgba(6,214,160,0.2)}
.c-wiring{background:var(--org-bg);color:var(--org);box-shadow:inset 0 0 0 1px rgba(251,146,60,0.2)}
.c-tools{background:var(--blu-bg);color:var(--blu);box-shadow:inset 0 0 0 1px rgba(74,158,255,0.2)}
.c-parts{background:var(--red-bg);color:var(--red);box-shadow:inset 0 0 0 1px rgba(230,57,70,0.2)}
.c-clients{background:var(--pink-bg);color:var(--pink);box-shadow:inset 0 0 0 1px rgba(236,72,153,0.2)}
.c-general{background:rgba(100,100,140,0.08);color:var(--txt3);box-shadow:inset 0 0 0 1px rgba(100,100,140,0.1)}

.card-cat svg{width:12px;height:12px}

.card-t{
    font-size:13px;font-weight:600;line-height:1.4;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    margin-bottom:5px;
}

.card-ex{
    font-size:12px;color:var(--txt2);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    flex:1;margin-bottom:8px;
}

.card-f{
    display:flex;align-items:center;justify-content:space-between;
    font-size:11px;color:var(--txt3);
    padding-top:8px;border-top:1px solid rgba(255,255,255,0.04);
}

.card-tags{display:flex;gap:4px;flex-wrap:wrap}
.card-tg{font-size:10px;color:var(--red);opacity:.7}

.pin-dot{
    position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;
    background:var(--red);box-shadow:var(--red-glow);
    animation:pulse 2s infinite;
}
@keyframes pulse{0%,100%{box-shadow:0 0 4px rgba(230,57,70,0.4)}50%{box-shadow:0 0 12px rgba(230,57,70,0.7)}}

/* ─── Detail ──────────────────────────────── */

.det{max-width:820px;margin:0 auto;padding:18px}

.det-back{
    display:inline-flex;align-items:center;gap:4px;
    color:var(--txt3);font-size:12px;margin-bottom:14px;
    padding:4px 10px;border-radius:6px;
    transition:var(--tr);
}
.det-back:hover{color:var(--red);background:var(--red-bg)}

.det h1{font-size:21px;font-weight:700;line-height:1.35;margin-bottom:10px}

.det-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--txt3);margin-bottom:16px}
.det-meta .badge{display:inline-flex;align-items:center;gap:3px;padding:3px 10px;border-radius:6px;font-size:11px;font-weight:700}

.det-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin-bottom:16px}
.det-photos img{
    width:100%;border-radius:var(--r);cursor:pointer;transition:var(--tr);
    border:1px solid rgba(255,255,255,0.06);
}
.det-photos img:hover{transform:scale(1.02);box-shadow:0 8px 24px rgba(0,0,0,0.4)}

.det-text{
    font-size:14px;line-height:1.7;
    white-space:pre-wrap;word-break:break-word;
    color:var(--txt);
    padding:14px 16px;
    background:rgba(255,255,255,0.02);
    border:1px solid rgba(255,255,255,0.04);
    border-radius:var(--r);
    margin-bottom:14px;
}

.det-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.det-tags .tag{
    padding:4px 12px;
    background:var(--red-bg);color:var(--red);
    border:1px solid rgba(230,57,70,0.15);
    border-radius:14px;font-size:12px;transition:var(--tr);
}
.det-tags .tag:hover{background:rgba(230,57,70,0.2);border-color:rgba(230,57,70,0.3)}

.det-files{margin-bottom:14px}
.det-file{
    display:inline-flex;align-items:center;gap:8px;
    padding:10px 14px;
    background:linear-gradient(135deg,rgba(230,57,70,0.06),rgba(168,85,247,0.04));
    border:1px solid rgba(230,57,70,0.15);border-radius:var(--r);
    font-size:13px;color:var(--txt);
    transition:var(--tr);text-decoration:none;margin-bottom:6px;
}
.det-file:hover{
    border-color:rgba(230,57,70,0.4);
    box-shadow:0 4px 16px rgba(230,57,70,0.1);
    transform:translateY(-1px);
}
.det-file svg{width:18px;height:18px;color:var(--red)}

/* ─── Actions ─────────────────────────────── */

.det-acts{
    display:flex;align-items:center;gap:6px;
    padding:12px 0;margin-bottom:14px;
    border-bottom:1px solid rgba(255,255,255,0.04);
    flex-wrap:wrap;
}

.act-btn{
    display:inline-flex;align-items:center;gap:4px;
    padding:6px 12px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);border-radius:8px;
    color:var(--txt2);font-size:11px;font-weight:600;
    cursor:pointer;transition:var(--tr);white-space:nowrap;
    text-decoration:none;font-family:inherit;
}
.act-btn:active{transform:scale(.96)}
.act-btn svg{flex-shrink:0}

.act-back{color:var(--txt)}
.act-back:hover{color:#fff;background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.15)}

.act-edit{color:var(--blu);border-color:rgba(74,158,255,0.2)}
.act-edit:hover{background:var(--blu-bg);border-color:rgba(74,158,255,0.4);box-shadow:var(--blu-glow)}

.act-pin{color:var(--amb);border-color:rgba(245,158,11,0.2)}
.act-pin:hover{background:var(--amb-bg);border-color:rgba(245,158,11,0.4);box-shadow:var(--amb-glow)}

.act-del{color:var(--red);border-color:rgba(230,57,70,0.2)}
.act-del:hover{background:var(--red-bg);border-color:rgba(230,57,70,0.4);box-shadow:var(--red-glow)}

/* ─── Buttons ─────────────────────────────── */

.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:5px;
    padding:7px 14px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.1);border-radius:8px;
    color:var(--txt2);font-size:12px;font-weight:600;cursor:pointer;
    transition:var(--tr);white-space:nowrap;text-decoration:none;
}
.btn:hover{border-color:rgba(255,255,255,0.2);color:var(--txt);background:rgba(255,255,255,0.06)}

.btn-r2{
    background:var(--red-g);border:none;color:#fff;
    box-shadow:0 2px 12px rgba(230,57,70,0.3);
}
.btn-r2:hover{color:#fff;box-shadow:0 4px 20px rgba(230,57,70,0.5);transform:translateY(-1px)}

.btn-sm{padding:5px 10px;font-size:11px}

/* ─── Login ───────────────────────────────── */

.login-bg{
    display:flex;justify-content:center;align-items:center;
    min-height:100vh;padding:20px;
    background:
        radial-gradient(ellipse at 30% 20%,rgba(230,57,70,0.08),transparent 50%),
        radial-gradient(ellipse at 70% 80%,rgba(168,85,247,0.06),transparent 50%),
        var(--bg);
}

.login-box{
    background:linear-gradient(145deg,rgba(24,24,36,0.95),rgba(14,14,22,0.95));
    border:1px solid rgba(255,255,255,0.08);
    border-radius:16px;padding:32px;
    width:100%;max-width:360px;text-align:center;
    box-shadow:0 16px 48px rgba(0,0,0,0.5);
}

.login-box .logo{margin-bottom:14px}
.login-box .logo svg{filter:drop-shadow(0 0 12px rgba(230,57,70,0.5))}
.login-box h1{font-size:24px;font-weight:800;margin-bottom:4px;letter-spacing:-0.5px}
.login-box .sub{color:var(--txt2);font-size:13px;margin-bottom:22px}

.code-f{
    text-align:center;font-size:28px!important;font-weight:900;
    letter-spacing:10px;
    font-family:'SF Mono','Cascadia Code','Courier New',monospace;
    padding:12px!important;
    border-color:rgba(230,57,70,0.2)!important;
}
.code-f:focus{box-shadow:0 0 0 3px rgba(230,57,70,0.15),0 0 20px rgba(230,57,70,0.1)!important}

.divider{display:flex;align-items:center;gap:10px;margin:18px 0;color:var(--txt3);font-size:11px}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.08),transparent)}

.login-hint{font-size:12px;color:var(--txt2);line-height:1.6}
.login-hint code{background:rgba(230,57,70,0.1);padding:2px 6px;border-radius:4px;font-size:11px;color:var(--red)}

.err{background:rgba(230,57,70,0.12);border:1px solid rgba(230,57,70,0.25);color:var(--red2);padding:10px;border-radius:8px;font-size:12px;margin-bottom:14px}

/* ─── Forms ───────────────────────────────── */

.fg{margin-bottom:14px;text-align:left}
.fl{display:block;font-size:11px;font-weight:700;color:var(--txt3);margin-bottom:5px;text-transform:uppercase;letter-spacing:.5px}

.fi,.fs,.ft{
    width:100%;padding:9px 12px;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:8px;color:var(--txt);font-size:13px;font-family:inherit;outline:0;transition:var(--tr);
    -webkit-appearance:none;-moz-appearance:none;appearance:none;
}
.fi:focus,.fs:focus,.ft:focus{
    border-color:rgba(230,57,70,0.4);
    box-shadow:0 0 0 3px rgba(230,57,70,0.1);
    background:rgba(255,255,255,0.08);
}
.fi::placeholder,.ft::placeholder{color:var(--txt3)}
.ft{min-height:100px;resize:vertical}
.fs{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%239090a8' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}

/* ─── Modal ───────────────────────────────── */

.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(6px);z-index:1000;justify-content:center;padding-top:50px}
.modal-bg.on{display:flex}
.modal{
    background:linear-gradient(145deg,#181824 0%,#0f0f1a 100%);
    border:1px solid rgba(255,255,255,0.1);border-radius:var(--r2);
    width:90%;max-width:480px;max-height:80vh;overflow-y:auto;
    box-shadow:0 24px 48px rgba(0,0,0,0.8);
}
.modal-h{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,0.06)}
.modal-h h3{font-size:14px;font-weight:700}
.modal-b{padding:18px}
.modal-f{display:flex;justify-content:flex-end;gap:6px;padding:12px 18px;border-top:1px solid rgba(255,255,255,0.06)}
.xbtn{background:0;border:0;color:var(--txt3);font-size:18px;cursor:pointer;transition:var(--tr)}
.xbtn:hover{color:var(--txt)}

/* ─── Empty / Pager ───────────────────────── */

.empty{text-align:center;padding:80px 20px;color:var(--txt3)}
.empty svg{width:48px;height:48px;opacity:.15;margin-bottom:14px}
.empty h3{font-size:16px;color:var(--txt2);margin-bottom:4px}

.pager{display:flex;justify-content:center;gap:3px;margin-top:28px}
.pager a,.pager span{padding:7px 12px;border-radius:8px;font-size:12px;color:var(--txt3);transition:var(--tr)}
.pager a:hover{background:rgba(255,255,255,0.06);color:var(--txt)}
.pager .on{background:var(--red-g);color:#fff;font-weight:700;box-shadow:0 2px 10px rgba(230,57,70,0.3)}

/* ─── Lightbox ────────────────────────────── */

.lbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.95);z-index:2000;justify-content:center;align-items:center;cursor:pointer}
.lbox.on{display:flex}
.lbox img{max-width:95%;max-height:95%;object-fit:contain;border-radius:var(--r)}

/* ─── Edit ────────────────────────────────── */

.epage{max-width:520px;margin:0 auto;padding:18px}
.ecard{
    background:linear-gradient(145deg,rgba(24,24,36,0.9),rgba(18,18,28,0.9));
    border:1px solid rgba(255,255,255,0.06);border-radius:var(--r2);padding:20px;
}
.ecard h2{font-size:17px;margin-bottom:16px}

/* ─── Anim ────────────────────────────────── */

@keyframes fu{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.card{animation:fu .25s ease both}
.card:nth-child(2){animation-delay:.02s}
.card:nth-child(3){animation-delay:.04s}
.card:nth-child(4){animation-delay:.06s}
.card:nth-child(5){animation-delay:.08s}
.card:nth-child(6){animation-delay:.1s}

/* ─── Responsive ──────────────────────────── */

@media(max-width:640px){
    .topbar-in{padding:0 12px;gap:8px}
    .brand .t{display:none}
    .grid{grid-template-columns:1fr 1fr;gap:10px}
    .wrap{padding:10px}
    .card-b{padding:10px}
    .card-t{font-size:12px}
    .card-ex{display:none}
    .det{padding:12px}
    .det h1{font-size:17px}
    .btn-r .lbl{display:none}
    .det-acts{gap:4px}
    .act-btn{padding:5px 8px;font-size:10px}
}
@media(max-width:380px){.grid{grid-template-columns:1fr}}

::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:0}
::-webkit-scrollbar-thumb{background:rgba(230,57,70,0.3);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(230,57,70,0.5)}