/* ========= Retro / CRT-inspired theme (no functionality changes) ========= */

:root{
    --bg: #06020c;
    --panel: rgba(16, 12, 28, .82);
    --panel-2: rgba(10, 8, 18, .86);
    --text: #e9e6ff;
    --muted: rgba(233,230,255,.72);

    --neon-cyan: #00f5ff;
    --neon-pink: #ff4fd8;
    --neon-green: #4dff88;
    --amber: #ffbf4d;

    --shadow: 0 20px 50px rgba(0,0,0,.55);
    --radius: 18px;

    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }

body{
    margin:0;
    font: 15px/1.45 var(--mono);
    color: var(--text);
    background:
        radial-gradient(1100px 650px at 10% -20%, rgba(255,79,216,.22) 0%, rgba(255,79,216,0) 60%),
        radial-gradient(900px 520px at 110% 20%, rgba(0,245,255,.18) 0%, rgba(0,245,255,0) 60%),
        radial-gradient(700px 420px at 40% 120%, rgba(77,255,136,.14) 0%, rgba(77,255,136,0) 55%),
        linear-gradient(180deg, #070110, #04010a 55%, #020006 100%);
    padding: 18px;
    display:flex;
    justify-content:center;
}

/* Subtle scanlines + vignette */
body:before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,.02) 0px,
            rgba(255,255,255,.02) 1px,
            rgba(0,0,0,0) 3px,
            rgba(0,0,0,0) 6px
        ),
        radial-gradient(1200px 700px at 50% 35%, rgba(0,0,0,0) 0%, rgba(0,0,0,.38) 65%, rgba(0,0,0,.62) 100%);
    mix-blend-mode: overlay;
    opacity:.55;
}

/* Noise */
body:after{
    content:"";
    position:fixed;
    inset:-20%;
    pointer-events:none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
    background-size: 180px 180px;
    opacity:.12;
}

.app{ width:100%; max-width: 980px; }

/* Faux monitor frame */
.app-frame{
    position:relative;
    border-radius: calc(var(--radius) + 6px);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    padding: 10px;
    box-shadow: var(--shadow);
    border: 1px solid rgba(255,255,255,.12);
}
.app-frame:before{
    content:"";
    position:absolute;
    inset:8px;
    border-radius: var(--radius);
    border: 1px solid rgba(0,245,255,.15);
    box-shadow:
        0 0 0 1px rgba(255,79,216,.08) inset,
        0 0 22px rgba(0,245,255,.10);
    pointer-events:none;
}

.surface{
    position:relative;
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(15,12,26,.86), rgba(8,6,14,.88));
    border: 1px solid rgba(255,255,255,.10);
    overflow:hidden;
}

/* Top "window" bar */
header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap: 14px;
    padding: 14px 16px 10px;
    border-bottom: 1px solid rgba(255,255,255,.10);
    background: linear-gradient(180deg, rgba(0,245,255,.10), rgba(255,79,216,.06));
}

.window-dots{ display:flex; gap:6px; margin-top: 2px; }
.dot{
    width: 10px; height:10px;
    border-radius:999px;
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 0 10px rgba(0,245,255,.12);
}
.dot:nth-child(1){ background: rgba(255,79,216,.85); }
.dot:nth-child(2){ background: rgba(255,191,77,.85); }
.dot:nth-child(3){ background: rgba(77,255,136,.85); }

h1{
    margin:0;
    font-size: 18px;
    letter-spacing: .08em;
    text-transform: uppercase;
    display:flex;
    align-items:center;
    gap:10px;
}
.logo{
    display:inline-grid;
    place-items:center;
    width: 26px; height: 26px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.18);
    background:
        radial-gradient(circle at 30% 30%, rgba(0,245,255,.35), rgba(0,245,255,0) 60%),
        radial-gradient(circle at 70% 70%, rgba(255,79,216,.28), rgba(255,79,216,0) 60%),
        rgba(8,6,14,.7);
    box-shadow: 0 0 18px rgba(0,245,255,.10);
    font-size: 14px;
}

.sub{
    color: var(--muted);
    font-size: 12px;
    margin-top: 6px;
    max-width: 60ch;
}

.userbar{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap: 10px;
    flex-wrap:wrap;
}

.pill{
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(0,245,255,.18);
    background: rgba(0,245,255,.06);
    color: rgba(233,230,255,.88);
    text-shadow: 0 0 10px rgba(0,245,255,.08);
    font-size: 12px;
    white-space: nowrap;
}

.counter{
    font-size: 12px;
    color: rgba(233,230,255,.85);
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,79,216,.18);
    background: rgba(255,79,216,.06);
}

.logout{
    background: transparent;
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,191,77,.95);
    cursor:pointer;
    font-weight:700;
    padding: 6px 10px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.logout:hover{ box-shadow: 0 0 0 3px rgba(255,191,77,.12); }

/* Main layout */
.main{
    display:grid;
    /* allow many cards (categories) while staying responsive */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    padding: 16px;
}
@media (max-width: 860px){
    .main{ grid-template-columns: 1fr; }
}

/* Panels */
.card{
    background: var(--panel);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 16px;
    box-shadow: 0 14px 36px rgba(0,0,0,.45);
    position:relative;
    overflow:hidden;
}
.card:before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 40%);
    opacity:.8;
}

.panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255,255,255,.10);
    background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,0));
}
.panel-title{
    font-weight: 800;
    letter-spacing:.12em;
    text-transform: uppercase;
    font-size: 12px;
    color: rgba(233,230,255,.92);
    display:flex;
    align-items:center;
    gap:10px;
}
.panel-title .tag{
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: var(--muted);
    font-weight:700;
    letter-spacing:.08em;
}

/* Form */
form{
    display:grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
}

.field{ display:flex; flex-direction:column; gap: 8px; }
.field label{
    font-size: 12px;
    color: var(--muted);
    letter-spacing:.08em;
    text-transform: uppercase;
}

input[type="text"],
input[type="password"],
input[type="datetime-local"],
select,
textarea{
    width:100%;
    padding: 12px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.14);
    background: var(--panel-2);
    color: var(--text);
    outline:none;
    box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset;
    transition: border .15s ease, box-shadow .15s ease, transform .05s ease;
}
select{ cursor:pointer; }

input[type="color"]{
    width: 64px;
    height: 38px;
    padding: 0;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.14);
    background: var(--panel-2);
}
textarea{
    resize: vertical;
    min-height: 56px;
    max-height: 190px;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime-local"]:focus,
select:focus,
textarea:focus{
    border-color: rgba(0,245,255,.55);
    box-shadow:
        0 0 0 1px rgba(0,0,0,.35) inset,
        0 0 0 6px rgba(0,245,255,.12),
        0 0 26px rgba(0,245,255,.12);
}

.checkline{
    display:flex;
    align-items:center;
    gap: 10px;
    user-select:none;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px dashed rgba(255,255,255,.16);
    background: rgba(255,255,255,.03);
}
.checkline input{
    width: 18px; height: 18px;
    accent-color: var(--neon-green);
}
.checkline span{
    color: rgba(233,230,255,.88);
    letter-spacing: .02em;
    font-size: 13px;
}

.actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.btn{
    padding: 11px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.14);
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    color: var(--text);
    font-weight: 800;
    letter-spacing:.10em;
    text-transform: uppercase;
    cursor:pointer;
    box-shadow: 0 10px 18px rgba(0,0,0,.35);
    transition: transform .06s ease, filter .2s ease, box-shadow .2s ease;
}
.btn:hover{
    filter: brightness(1.07);
    box-shadow: 0 16px 28px rgba(0,0,0,.45);
}
.btn:active{ transform: translateY(1px); }

.btn--accent{
    border: 1px solid rgba(0,245,255,.32);
    background:
        linear-gradient(180deg, rgba(0,245,255,.32), rgba(0,245,255,.14)),
        radial-gradient(circle at 30% 20%, rgba(255,79,216,.18), rgba(255,79,216,0) 55%),
        rgba(8,6,14,.65);
    text-shadow: 0 0 10px rgba(0,245,255,.12);
}

/* Small / utility buttons */
.btn--small{
    padding: 7px 10px;
    border-radius: 10px;
    font-size: 12px;
    letter-spacing: .08em;
}
.btn--danger{
    border: 1px solid rgba(255,79,79,.35);
    background: linear-gradient(180deg, rgba(255,79,79,.22), rgba(255,79,79,.10));
    color: rgba(255,220,220,.95);
}

/* Category manager list (settings card) */
.cat-list{ display:flex; flex-direction:column; gap: 8px; }
.cat-row{
    display:flex;
    align-items:center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
}
.cat-swatch{
    width: 16px;
    height: 16px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.06);
    box-shadow: 0 0 14px rgba(0,245,255,.08);
}
.cat-row-name{
    flex: 1 1 auto;
    font-weight: 800;
    color: rgba(233,230,255,.92);
    letter-spacing: .04em;
}

/* Category card header controls */
.panel-actions{ display:flex; align-items:center; gap: 8px; }
.icon-btn{
    width: 32px;
    height: 32px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    color: rgba(233,230,255,.88);
    cursor:pointer;
    display:grid;
    place-items:center;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 10px 18px rgba(0,0,0,.25);
}
.icon-btn:hover{ box-shadow: 0 0 0 3px rgba(0,245,255,.12); }
.cat-drag-handle{
    display:inline-grid;
    place-items:center;
    width: 30px;
    height: 30px;
    border-radius: 12px;
    border: 1px dashed rgba(0,245,255,.22);
    background: rgba(0,245,255,.04);
    color: rgba(0,245,255,.92);
    cursor: grab;
    user-select:none;
}
.cat-drag-handle:active{ cursor: grabbing; }
.category-card.dragging-category{
    opacity: .55;
    transform: none;
}

.microhint{
    font-size: 12px;
    color: var(--muted);
    line-height: 1.4;
    max-width: 60ch;
}

/* List */
.list{ padding: 10px; }

.empty{
    text-align:center;
    color: var(--muted);
    padding: 26px 14px;
    border: 1px dashed rgba(0,245,255,.20);
    border-radius: 14px;
    margin: 8px;
    background: rgba(0,245,255,.04);
}

.todo{
    display:flex;
    gap: 12px;
    align-items:flex-start;
    padding: 14px 14px;
    margin: 10px 8px;
    border-radius: 14px;
    cursor:pointer;
    border: 1px solid rgba(255,255,255,.12);
    background:
        linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)),
        rgba(6,2,12,.45);
    box-shadow: 0 14px 28px rgba(0,0,0,.42);
    position:relative;
    transition: transform .06s ease, border-color .2s ease, box-shadow .2s ease, filter .2s ease;
}
.todo:before{
    content:"";
    position:absolute;
    inset:0;
    border-radius: 14px;
    pointer-events:none;
    box-shadow: 0 0 0 1px rgba(0,245,255,.12) inset;
    opacity:.6;
}
.todo:hover{
    transform: translateY(-2px);
    border-color: rgba(0,245,255,.35);
    filter: brightness(1.03);
    box-shadow: 0 18px 34px rgba(0,0,0,.55);
}
.todo:active{ transform: translateY(1px); }

/* Drag & drop helpers */
.todo.dragging{
    opacity: .55;
    transform: none;
}
.list.drop-target{
    outline: 2px dashed rgba(0,245,255,.55);
    outline-offset: 6px;
}

/* Expiration highlight (tasks stay visible but glow red) */
.todo.overdue{
    border-color: rgba(255,79,79,.55);
    box-shadow: 0 18px 34px rgba(0,0,0,.55), 0 0 28px rgba(255,79,79,.10);
    animation: overduePulse 1.8s ease-in-out infinite;
}
@keyframes overduePulse{
    0%, 100%{ filter: brightness(1); }
    50%{ filter: brightness(1.14); }
}

.tick{
    flex: 0 0 26px;
    height: 26px;
    margin-top: 1px;
    border-radius: 9px;
    border: 1px solid rgba(77,255,136,.38);
    background:
        radial-gradient(circle at 30% 30%, rgba(77,255,136,.25), rgba(77,255,136,0) 70%),
        rgba(10,8,18,.7);
    color: var(--neon-green);
    display:grid;
    place-items:center;
    font-size: 15px;
    box-shadow: 0 0 16px rgba(77,255,136,.10);
}

.content{ flex:1 1 auto; }

.title{
    font-weight: 900;
    letter-spacing:.03em;
    display:flex;
    align-items:center;
    gap: 10px;
    flex-wrap:wrap;
}

.desc{
    color: var(--muted);
    margin-top: 6px;
    white-space: pre-wrap;
    font-size: 13px;
}

.badge{
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(0,0,0,.92);
    background: linear-gradient(180deg, rgba(255,191,77,.95), rgba(255,79,216,.82));
    border: 1px solid rgba(255,255,255,.20);
    box-shadow: 0 0 14px rgba(255,79,216,.12);
}

.meta{
    display:flex;
    align-items:center;
    gap: 12px;
    margin-top: 10px;
    font-size: 12px;
    color: rgba(233,230,255,.70);
}

.hint{
    margin: 10px 16px 16px;
    color: var(--muted);
    font-size: 12px;
}

/* Login overlay/card */
.overlay{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    background: rgba(0,0,0,.60);
    backdrop-filter: blur(8px);
}
.overlay.show{ display:flex; }

.login-card{
    width: min(520px, 92vw);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(0,245,255,.12), rgba(255,79,216,.08)),
        rgba(12,10,20,.85);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 26px 60px rgba(0,0,0,.60);
    padding: 18px;
    position:relative;
    overflow:hidden;
}
.login-card:before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,.03) 0px,
            rgba(255,255,255,.03) 1px,
            rgba(0,0,0,0) 4px,
            rgba(0,0,0,0) 7px
        );
    opacity:.55;
}

.login-title{
    margin: 0 0 6px 0;
    font-size: 14px;
    letter-spacing:.14em;
    text-transform: uppercase;
}

.login-sub{
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    max-width: 70ch;
}

.row{
    display:flex;
    gap: 10px;
    margin-top: 12px;
    align-items: stretch;
}
.row input{ flex:1; }

@media (max-width: 420px){
    header{ flex-direction: column; align-items: stretch; }
    .userbar{ justify-content:flex-start; }
    .row{ flex-direction: column; }
}