/* ============================================
   轻舟 — Premium CSS Design System
   待办清单 · 全中文界面 · 玻璃拟态
   ============================================ */

/* ---- Theme Variables ---- */
:root {
    --bg: #f5f3ff;
    --bg-card: rgba(255,255,255,0.72);
    --bg-card-solid: #ffffff;
    --bg-hover: rgba(255,255,255,0.88);
    --text: #1e1b4b;
    --text-soft: #4c4a6e;
    --text-muted: #a1a1aa;
    --border: rgba(139, 92, 246, 0.12);
    --border-strong: rgba(139, 92, 246, 0.22);
    --accent: #6366f1;
    --accent-2: #a855f7;
    --accent-glow: rgba(99, 102, 241, 0.18);
    --accent-bg: #eef2ff;
    --success: #10b981;
    --success-bg: #ecfdf5;
    --warning: #f59e0b;
    --warning-bg: #fffbeb;
    --danger: #ef4444;
    --danger-bg: #fef2f2;
    --shadow-card: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(99,102,241,0.06);
    --shadow-hover: 0 4px 12px rgba(0,0,0,0.06), 0 12px 32px rgba(99,102,241,0.10);
    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 20px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --font: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --font-mono: 'JetBrains Mono', 'Cascadia Code', monospace;
    --empty-bg: #f1f0f9;
}

[data-theme="dark"] {
    --bg: #0c0a1d;
    --bg-card: rgba(24, 22, 48, 0.72);
    --bg-card-solid: #181630;
    --bg-hover: rgba(30, 28, 58, 0.88);
    --text: #e8e6f0;
    --text-soft: #b0adc8;
    --text-muted: #5c5a78;
    --border: rgba(139, 92, 246, 0.16);
    --border-strong: rgba(139, 92, 246, 0.28);
    --accent: #a5b4fc;
    --accent-2: #c4b5fd;
    --accent-glow: rgba(165, 180, 252, 0.2);
    --accent-bg: #1e1b4b;
    --success: #34d399;
    --success-bg: #064e3b;
    --warning: #fbbf24;
    --warning-bg: #451a03;
    --danger: #f87171;
    --danger-bg: #450a0a;
    --shadow-card: 0 1px 3px rgba(0,0,0,0.15), 0 8px 24px rgba(99,102,241,0.04);
    --shadow-hover: 0 4px 12px rgba(0,0,0,0.2), 0 12px 32px rgba(99,102,241,0.08);
    --empty-bg: #1a1838;
}

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{
    font-family:var(--font);
    background:var(--bg);
    color:var(--text);
    min-height:100vh;
    line-height:1.6;
    transition:background 0.4s var(--ease),color 0.4s var(--ease);
    overflow-x:hidden;
    position:relative;
}

/* ---- Background Orbs ---- */
.bg-orb{
    position:fixed;
    border-radius:50%;
    filter:blur(100px);
    pointer-events:none;
    z-index:0;
    opacity:0.5;
    transition:opacity 1s var(--ease);
}
.bg-orb-1{
    width:500px;height:500px;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    top:-150px;right:-100px;
    animation:orb1 18s ease-in-out infinite;
}
.bg-orb-2{
    width:350px;height:350px;
    background:linear-gradient(135deg,var(--success),#06b6d4);
    bottom:-80px;left:-80px;
    animation:orb2 22s ease-in-out infinite;
}
.bg-orb-3{
    width:280px;height:280px;
    background:linear-gradient(135deg,var(--warning),#ec4899);
    top:50%;left:50%;
    animation:orb3 20s ease-in-out infinite;
}
[data-theme="dark"] .bg-orb{opacity:0.35}

@keyframes orb1{
    0%,100%{transform:translate(0,0) scale(1)}
    33%{transform:translate(-40px,40px) scale(1.1)}
    66%{transform:translate(30px,-20px) scale(0.9)}
}
@keyframes orb2{
    0%,100%{transform:translate(0,0) scale(1)}
    33%{transform:translate(30px,-30px) scale(1.08)}
    66%{transform:translate(-20px,20px) scale(0.92)}
}
@keyframes orb3{
    0%,100%{transform:translate(-50%,-50%) scale(1)}
    50%{transform:translate(-50%,-50%) scale(1.25)}
}

/* ---- Subtle Grid Background ---- */
.bg-grid{
    position:fixed;inset:0;z-index:0;pointer-events:none;
    background-image:
        linear-gradient(var(--border) 1px,transparent 1px),
        linear-gradient(90deg,var(--border) 1px,transparent 1px);
    background-size:60px 60px;
    opacity:0.4;
    mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,black 30%,transparent 70%);
}
[data-theme="dark"] .bg-grid{opacity:0.25}

/* ---- Container ---- */
.container{
    max-width:680px;
    margin:0 auto;
    padding:28px 20px 64px;
    position:relative;
    z-index:1;
}

/* ---- Header ---- */
.header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:8px 0 24px;
}
.header-brand{display:flex;align-items:center;gap:10px}
.brand-icon{flex-shrink:0}
.brand-name{
    font-size:1.6rem;
    font-weight:900;
    letter-spacing:-0.02em;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    line-height:1.2;
}
.brand-sub{
    font-size:0.7rem;
    font-weight:500;
    color:var(--text-muted);
    display:block;
    margin-top:-2px;
}
.header-actions{display:flex;align-items:center;gap:10px}

.tag-python{
    font-size:0.65rem;
    font-weight:700;
    letter-spacing:0.06em;
    text-transform:uppercase;
    padding:5px 10px;
    border-radius:20px;
    background:var(--accent-bg);
    color:var(--accent);
    font-family:var(--font-mono);
}

/* Theme Toggle */
.theme-btn{
    width:40px;height:40px;
    border:1.5px solid var(--border-strong);
    border-radius:50%;
    background:var(--bg-card);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--text-soft);
    transition:all 0.3s var(--ease);
    backdrop-filter:blur(12px);
}
.theme-btn:hover{
    border-color:var(--accent);
    color:var(--accent);
    box-shadow:0 0 0 6px var(--accent-glow);
    transform:rotate(15deg) scale(1.08);
}
[data-theme="light"] .ico-moon{display:none}
[data-theme="dark"] .ico-sun{display:none}

/* ---- Stats Row ---- */
.stats-row{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-bottom:18px;
}
.stat-card{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:18px 14px;
    display:flex;
    align-items:center;
    gap:12px;
    transition:all 0.35s var(--ease);
    box-shadow:var(--shadow-card);
    backdrop-filter:blur(16px);
    cursor:default;
}
.stat-card:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow-hover);
    border-color:var(--border-strong);
}
.stat-icon{
    width:42px;height:42px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}
.stat-total .stat-icon{background:var(--accent-bg);color:var(--accent)}
.stat-pending .stat-icon{background:var(--warning-bg);color:var(--warning)}
.stat-done .stat-icon{background:var(--success-bg);color:var(--success)}

.stat-val{
    font-size:1.6rem;
    font-weight:800;
    line-height:1;
    font-family:var(--font-mono);
}
.stat-total .stat-val{color:var(--accent)}
.stat-pending .stat-val{color:var(--warning)}
.stat-done .stat-val{color:var(--success)}

.stat-lbl{
    font-size:0.72rem;
    color:var(--text-muted);
    margin-top:2px;
    font-weight:500;
}

/* ---- Progress Bar ---- */
.progress-bar-wrap{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
    padding:0 4px;
}
.progress-bar{
    flex:1;
    height:8px;
    background:var(--accent-bg);
    border-radius:10px;
    overflow:hidden;
    position:relative;
}
.progress-fill{
    height:100%;
    border-radius:10px;
    background:linear-gradient(90deg,var(--accent),var(--accent-2));
    transition:width 0.6s var(--ease);
    position:relative;
}
.progress-fill::after{
    content:'';
    position:absolute;inset:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);
    animation:shimmer 2s ease-in-out infinite;
}
@keyframes shimmer{
    0%,100%{transform:translateX(-100%)}
    50%{transform:translateX(100%)}
}
.progress-text{
    font-size:0.75rem;
    font-weight:700;
    color:var(--accent);
    white-space:nowrap;
    font-family:var(--font-mono);
}

/* ---- Glass Card ---- */
.glass-card{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:24px;
    margin-bottom:18px;
    box-shadow:var(--shadow-card);
    backdrop-filter:blur(20px) saturate(180%);
    transition:box-shadow 0.4s var(--ease),border-color 0.4s var(--ease);
}
.glass-card:hover{border-color:var(--border-strong)}

.card-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:4px;
}

.section-title{
    font-size:1rem;
    font-weight:700;
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--text);
}

.count-chip{
    font-size:0.7rem;
    font-weight:700;
    background:var(--accent-bg);
    color:var(--accent);
    padding:2px 8px;
    border-radius:12px;
    font-family:var(--font-mono);
    margin-left:4px;
}

/* ---- Add Form ---- */
.add-section{margin-top:4px}
.add-form{margin-top:14px}
.form-row{display:flex;gap:10px;align-items:center}

.input-wrap{
    flex:1;
    position:relative;
}
.main-input{
    width:100%;
    padding:13px 16px;
    border:1.5px solid var(--border-strong);
    border-radius:var(--radius-sm);
    font-size:0.92rem;
    font-family:var(--font);
    background:var(--bg);
    color:var(--text);
    transition:all 0.3s var(--ease);
    outline:none;
    position:relative;
    z-index:1;
}
.main-input:focus{border-color:var(--accent)}
.main-input::placeholder{color:var(--text-muted)}
.input-glow{
    position:absolute;
    inset:-2px;
    border-radius:calc(var(--radius-sm) + 2px);
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    opacity:0;
    z-index:0;
    transition:opacity 0.3s var(--ease);
    pointer-events:none;
}
.main-input:focus ~ .input-glow{opacity:0.6}

.cat-select{
    padding:13px 36px 13px 14px;
    border:1.5px solid var(--border-strong);
    border-radius:var(--radius-sm);
    font-size:0.82rem;
    font-family:var(--font);
    background:var(--bg);
    color:var(--text-soft);
    cursor:pointer;
    outline:none;
    transition:all 0.3s var(--ease);
    appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238b5cf6' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 12px center;
}
.cat-select:focus{border-color:var(--accent)}

/* Add Button */
.btn-add{
    padding:13px 22px;
    border:none;
    border-radius:var(--radius-sm);
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    color:#fff;
    font-size:0.88rem;
    font-weight:700;
    font-family:var(--font);
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
    transition:all 0.3s var(--ease);
    box-shadow:0 4px 14px var(--accent-glow);
    position:relative;
    overflow:hidden;
}
.btn-add::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,transparent,rgba(255,255,255,0.25));
    opacity:0;
    transition:opacity 0.3s var(--ease);
}
.btn-add:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 24px var(--accent-glow);
}
.btn-add:hover::after{opacity:1}
.btn-add:active{transform:translateY(0)}

/* Clear Button */
.btn-clear{
    padding:7px 14px;
    border:1px solid var(--border-strong);
    border-radius:8px;
    background:transparent;
    color:var(--text-muted);
    font-size:0.75rem;
    font-weight:600;
    font-family:var(--font);
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:5px;
    transition:all 0.3s var(--ease);
}
.btn-clear:hover{
    background:var(--danger-bg);
    color:var(--danger);
    border-color:var(--danger);
}

/* ---- Task List ---- */
.task-section{padding-bottom:16px}
.task-list{display:flex;flex-direction:column;gap:2px;margin-top:12px}

.task-row{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 12px;
    border-radius:var(--radius-sm);
    transition:all 0.35s var(--ease);
    border:1px solid transparent;
    opacity:0;
    transform:translateY(10px);
}
.task-row.appear{
    animation:appearIn 0.5s var(--ease) forwards;
    animation-delay:calc(var(--i) * 0.04s);
}
@keyframes appearIn{
    to{opacity:1;transform:translateY(0)}
}
.task-row:hover{
    background:var(--bg-hover);
    border-color:var(--border);
    transform:translateX(4px);
}
.task-row.appear:hover{transform:translateX(4px)}

/* Checkbox Circle */
.chk-circle{
    width:26px;height:26px;
    border-radius:50%;
    border:2px solid var(--border-strong);
    background:transparent;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all 0.3s var(--ease);
    flex-shrink:0;
    padding:0;
}
.chk-circle:hover{
    border-color:var(--success);
    box-shadow:0 0 0 6px var(--success-bg);
    transform:scale(1.1);
}
.chk-circle.checked{
    background:var(--success);
    border-color:var(--success);
}
.chk-circle.checked:hover{box-shadow:0 0 0 6px var(--success-bg)}

/* Task Body */
.task-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.task-text{font-size:0.92rem;font-weight:500;transition:all 0.3s var(--ease);word-break:break-word}
.is-done .task-text{text-decoration:line-through;color:var(--text-muted);opacity:0.65}

.task-tags{display:flex;align-items:center;gap:8px;font-size:0.72rem}
.cat-tag{
    padding:2px 9px;
    border-radius:10px;
    font-weight:600;
    font-size:0.68rem;
}
.cat-general{background:var(--accent-bg);color:var(--accent)}
.cat-work,.cat-urgent{background:var(--warning-bg);color:var(--warning)}
.cat-personal{background:var(--success-bg);color:var(--success)}
.cat-urgent{background:var(--danger-bg);color:var(--danger)}

.task-time{color:var(--text-muted);font-family:var(--font-mono);font-size:0.7rem}

/* Delete Button */
.form-inline{display:flex;align-items:center}
.btn-del{
    width:34px;height:34px;
    border:none;
    border-radius:50%;
    background:transparent;
    color:var(--text-muted);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all 0.3s var(--ease);
    opacity:0;
}
.task-row:hover .btn-del{opacity:1}
.btn-del:hover{
    background:var(--danger-bg);
    color:var(--danger);
    transform:scale(1.15);
}

/* ---- Empty State ---- */
.empty-box{text-align:center;padding:48px 20px 36px}
.empty-art{margin-bottom:16px}
.empty-title{
    font-size:1.05rem;
    font-weight:700;
    color:var(--text-soft);
    margin-bottom:6px;
}
.empty-hint{
    font-size:0.85rem;
    color:var(--text-muted);
}

/* ---- Footer ---- */
.footer{
    text-align:center;
    padding:28px 0 12px;
    color:var(--text-muted);
    font-size:0.78rem;
}
.footer a{
    color:var(--accent);
    text-decoration:none;
    font-weight:600;
    transition:color 0.2s;
}
.footer a:hover{color:var(--accent-2);text-decoration:underline}

/* ---- Responsive ---- */
@media(max-width:600px){
    .container{padding:20px 14px 50px}
    .stats-row{gap:8px}
    .stat-card{padding:14px 10px;gap:8px}
    .stat-icon{width:34px;height:34px;border-radius:10px}
    .stat-icon svg{width:18px;height:18px}
    .stat-val{font-size:1.3rem}
    .form-row{flex-wrap:wrap}
    .input-wrap{min-width:100%}
    .cat-select{flex:1}
    .btn-add{flex:1;justify-content:center}
    .glass-card{padding:18px 16px;border-radius:var(--radius)}
    .header{padding:4px 0 16px}
    .brand-name{font-size:1.35rem}
    .theme-btn{width:36px;height:36px}
    .add-form{margin-top:10px}
}