/* Dark theme (default) */
:root, [data-theme="dark"]{
    --bg:#0f1419;
    --text:#e7eef7;
    --muted:#9fb0c3;
    --card:#151b23;
    --accent:#5ab6ff;
    --input-bg:#10161c;
    --border:#263243;
    --hover:#314257;
}

/* Light theme */
[data-theme="light"]{
    --bg:#f5f7fa;
    --text:#1a1f29;
    --muted:#5a6a7a;
    --card:#ffffff;
    --accent:#2196f3;
    --input-bg:#f8f9fb;
    --border:#d4dae3;
    --hover:#e8edf3;
}

html,body{height:100%;transition:background-color 0.3s,color 0.3s}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;}
.wrap{max-width:1100px;margin:0 auto;padding:24px}
h1{margin:0 0 16px}
.card{background:var(--card);border-radius:12px;padding:20px;box-shadow:0 8px 30px rgba(0,0,0,.15);transition:background-color 0.3s}

/* Form elements with spacing */
label{display:block;margin:.5rem 0 .25rem;color:var(--muted)}
input,select,button,textarea{padding:.6rem .8rem;border-radius:10px;border:1px solid var(--border);background:var(--input-bg);color:var(--text);transition:all 0.2s;margin:4px 0}
button{background:var(--accent);color:#fff;border:0;font-weight:600;cursor:pointer}
button.secondary{background:var(--hover);color:var(--text)}
button:disabled{opacity:0.5;cursor:not-allowed}
button:hover:not(:disabled){opacity:0.9}

/* Row layout with spacing */
.row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.row>*{flex:1 1 220px}

.hidden{display:none}
.hr{border-color:var(--border);margin:16px 0}
.muted{color:var(--muted)}
.tip{margin-top:.75rem}

.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:12px}
.topbar-right{display:flex;gap:10px;align-items:center}

/* App nav */
.appnav{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.appnav a{padding:.4rem .75rem;border:1px solid var(--border);border-radius:999px;background:var(--input-bg);color:var(--text);text-decoration:none;transition:all 0.2s}
.appnav a.active{background:var(--accent);border-color:var(--accent);color:#fff}

.app-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* Theme Toggle */
#themeToggle{font-size:1.3rem;padding:.5rem .75rem;cursor:pointer;background:var(--hover);border:1px solid var(--border);border-radius:10px}

/* Search & Filter Bar */
.search-filter-bar{
    display:flex;
    gap:10px;
    margin:16px 0;
    align-items:flex-start;
    flex-wrap:wrap;
}
.search-box{
    flex:0 1 300px;
    max-width:300px;
    position:relative;
}
.search-box input{
    width:100%;
    padding-right:40px;
}
.search-clear{
    position:absolute;
    right:8px;
    top:50%;
    transform:translateY(-50%);
    background:transparent;
    border:0;
    color:var(--muted);
    cursor:pointer;
    padding:4px 8px;
}
.filter-group{
    display:flex;
    gap:8px;
    flex-wrap:nowrap;
    margin-left:auto;
}
.filter-group select{
    min-width:140px;
}

.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 16px}
.tab{border:1px solid var(--border);background:var(--input-bg);color:var(--text);border-radius:999px;padding:.4rem .8rem;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all 0.2s}
.tab[data-active="1"]{background:var(--accent);color:#fff;border-color:var(--accent)}
.tab .count{font-size:0.85em;opacity:0.8}
.panel{margin-top:8px}

/* Dashboard */
.dashboard{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-bottom:20px}
.stat-card{background:var(--input-bg);border:1px solid var(--border);border-radius:12px;padding:16px;transition:all 0.3s}
.stat-card .label{color:var(--muted);font-size:0.85rem;margin-bottom:4px}
.stat-card .value{font-size:2rem;font-weight:700;color:var(--accent)}
.stat-card .sub{color:var(--muted);font-size:0.9rem;margin-top:4px}
.stat-card.secondary .value{color:#88c0d0}
.stat-card.success .value{color:#a3be8c}
.stat-card.warning .value{color:#ebcb8b}

.chart-card{background:var(--input-bg);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:16px;transition:all 0.3s}
.chart-card h3{margin:0 0 12px;font-size:1.1rem}
.simple-bar-chart{display:flex;flex-direction:column;gap:8px}
.bar-item{display:flex;align-items:center;gap:10px}
.bar-item .bar-label{min-width:120px;font-size:0.9rem}
.bar-item .bar-track{flex:1;height:24px;background:var(--bg);border-radius:6px;position:relative;overflow:hidden}
.bar-item .bar-fill{height:100%;background:var(--accent);border-radius:6px;transition:width 0.3s ease}
.bar-item .bar-value{min-width:40px;text-align:right;font-weight:600}

.quick-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.quick-actions button{flex:1 1 140px}

/* Activity Feed */
.activity-feed{display:flex;flex-direction:column;gap:12px}
.activity-item{display:flex;gap:12px;padding:12px;background:var(--input-bg);border:1px solid var(--border);border-radius:10px;transition:all 0.2s}
.activity-item:hover{background:var(--hover)}
.activity-icon{font-size:1.5rem;line-height:1}
.activity-content{flex:1}
.activity-text{margin-bottom:4px}
.activity-text strong{color:var(--accent)}
.activity-time{font-size:0.85rem;color:var(--muted)}

.activity-feed-mini{display:flex;flex-direction:column;gap:8px}
.activity-item-mini{display:flex;align-items:center;gap:8px;padding:8px;background:var(--bg);border-radius:6px}
.activity-item-mini .activity-icon{font-size:1.2rem}

/* Goals list */
.goals{display:flex;flex-direction:column;gap:10px;position:relative}
.goal{background:var(--input-bg);border:1px solid var(--border);border-radius:12px;padding:.7rem .8rem;transition:all 0.2s}
.goal:hover{border-color:var(--accent)}
.goal .row-head{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.goal .title-wrapper{cursor:pointer;flex:1}
.goal .title-content{display:flex;flex-direction:column;gap:4px}
.goal .title-content strong{font-size:1rem;word-break:break-word}
.goal .term{font-size:.85rem;opacity:.8}
.goal .actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.goal .details{display:none;grid-template-columns:repeat(2,minmax(220px,1fr));gap:14px;margin-top:10px}
.goal .details .col{min-width:0}
.goal .details textarea{box-sizing:border-box}
.goal .details input[type="text"]{box-sizing:border-box}
.goal[data-open] .details{display:grid}
.goal.compact{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}

/* Goal meta info */
.goal-meta{display:flex;gap:10px;margin-top:8px;flex-wrap:wrap;cursor:pointer}
.meta-badge{font-size:0.85rem;color:var(--muted);padding:4px 8px;background:var(--bg);border-radius:6px;display:inline-flex;align-items:center;gap:4px}

/* Priority colors */
.priority-1{border-left:3px solid #bf616a}
.priority-2{border-left:3px solid #ebcb8b}
.priority-3{border-left:3px solid #a3be8c}

textarea{width:100%;min-height:80px;resize:vertical}

/* Badges etc. */
.pill{padding:.25rem .5rem;border-radius:999px;background:#0b273a;color:#aee1ff;font-size:.8rem}
[data-theme="light"] .pill{background:#e3f2fd;color:#1976d2}
.tag{display:inline-flex;gap:6px;align-items:center;margin-right:6px}
.tag-remove{
    all: unset;
    cursor: pointer;
    padding: 0 6px;
    border-radius: 6px;
    background: var(--hover);
    color: var(--text);
    line-height: 1.2;
    transition:all 0.2s;
}
.tag-remove:hover{background:var(--border)}

/* Checklist */
.checklist-list{display:flex;flex-direction:column;gap:8px}
.check-item{display:flex;gap:10px;align-items:flex-start;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:8px 10px}
.check-item .text{flex:1}
.check-item.done .text{text-decoration:line-through;opacity:.75}
.cl-del{all:unset;cursor:pointer;padding:2px 8px;border-radius:8px;background:var(--hover)}
.cl-del:hover{background:var(--border)}
.chk-progress{margin-top:6px}
.progress-bar{height:6px;background:var(--bg);border-radius:999px;overflow:hidden}
.progress-bar>span{display:block;height:100%;width:0;background:var(--accent);transition:width 0.3s ease}

.toast{position:fixed;bottom:16px;right:16px;background:var(--accent);color:#fff;padding:.5rem .75rem;border-radius:8px;box-shadow:0 6px 24px rgba(0,0,0,.35);z-index:1000;animation:slideIn 0.3s ease}
@keyframes slideIn{from{transform:translateY(100px);opacity:0}to{transform:translateY(0);opacity:1}}
.empty{padding:12px;border:1px dashed var(--border);border-radius:10px;color:var(--muted)}
.random-out .big{font-size:1.4rem;font-weight:700}
.pick-card{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:16px;margin-top:10px}

/* Table */
.table-wrap{overflow:auto;margin-top:16px}
.table{border-collapse:collapse;width:100%;min-width:680px}
.table th,.table td{border-bottom:1px solid var(--border);padding:8px 10px;text-align:left}
.table th{color:var(--muted)}

/* Button groups - for insights page */
.btns{display:flex;gap:10px;flex-wrap:wrap;padding:8px 0}

/* Drag & drop */
.drag-handle{
    display:inline-flex;align-items:center;justify-content:center;
    width:32px;height:32px;border-radius:8px;border:1px solid var(--border);
    background:var(--input-bg);color:var(--muted);margin-right:6px;user-select:none;cursor:grab;
    font-weight:700;line-height:1;font-size:1.2rem;transition:all 0.2s;
}
.drag-handle:hover{background:var(--hover)}
.drag-handle:active{cursor:grabbing}
.goal.dragging{opacity:.6}
.drop-indicator{
    height:4px;background:var(--accent);border-radius:2px;margin:4px 0;
}

/* Loading spinner */
.spinner{display:inline-block;width:20px;height:20px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin 0.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Loading state */
.loading{opacity:0.6;pointer-events:none}
.loading::after{content:'';position:absolute;top:50%;left:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin 0.8s linear infinite}

/* Achievement list styles */
.ach-list{display:flex;flex-direction:column;gap:6px;max-height:200px;overflow-y:auto}
.ach-item{padding:6px;background:var(--bg);border:1px solid var(--border);border-radius:6px}

/* Mobile optimizations */
@media (max-width: 768px) {
    .wrap{padding:12px}
    .card{padding:14px}
    h1{font-size:1.5rem}

    .topbar{flex-direction:column;align-items:stretch}
    .topbar-right{justify-content:space-between}

    .appnav{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
    .appnav a{flex-shrink:0}

    .app-head{flex-direction:column;align-items:flex-start}

    .dashboard{grid-template-columns:1fr}

    .goal .row-head{grid-template-columns:1fr;gap:8px}
    .goal .actions{width:100%;justify-content:space-between}
    .goal .details{grid-template-columns:1fr}

    .drag-handle{
        width:40px;height:40px;
        font-size:1.4rem;
        touch-action:none;
    }

    .filter-group{width:100%;margin-left:0 !important}
    .filter-group select{flex:1}

    .tabs{gap:6px}
    .tab{padding:.35rem .65rem;font-size:0.9rem}

    .stat-card .value{font-size:1.6rem}

    .row{flex-direction:column}
    .row>*{flex:1 1 100%}

    button{padding:.7rem 1rem;min-height:44px}

    .table-wrap{margin:0 -14px}
    .table{font-size:0.9rem}

    .goal-meta{flex-direction:column;gap:6px}

    .activity-item{flex-direction:column;gap:8px}
    .activity-icon{font-size:1.8rem}
}

@media (max-width: 480px) {
    .wrap{padding:8px}
    .card{padding:12px;border-radius:8px}

    h1{font-size:1.3rem}
    h2{font-size:1.1rem}
    h3{font-size:1rem}

    .goal{padding:.6rem}

    .stat-card{padding:12px}
    .stat-card .value{font-size:1.4rem}

    input,select,button,textarea{font-size:16px} /* Prevents zoom on iOS */
}

/* Swipe indicator for mobile */
.swipe-hint{
    display:none;
    color:var(--muted);
    font-size:0.85rem;
    text-align:center;
    padding:8px;
    margin-top:8px;
}

@media (max-width: 768px) {
    .swipe-hint{display:block}
}

/* Profile/Settings Page */
.profile-sections{display:flex;flex-direction:column;gap:20px}
.profile-card{background:var(--input-bg);border:1px solid var(--border);border-radius:12px;padding:20px}
.profile-card h3{margin:0 0 16px;font-size:1.1rem}
.profile-field{margin-bottom:16px}
.profile-field:last-child{margin-bottom:0}
.profile-field label{display:block;margin-bottom:8px;color:var(--muted);font-size:0.9rem}
.profile-field input{width:100%;box-sizing:border-box}

/* Password Strength Indicator */
.password-strength{margin-top:12px;padding:12px;background:var(--bg);border:1px solid var(--border);border-radius:8px}
.strength-bar{height:8px;background:var(--bg);border-radius:4px;overflow:hidden;margin-bottom:8px}
.strength-fill{height:100%;transition:width 0.3s,background 0.3s;border-radius:4px}
.strength-text{font-size:0.9rem;margin-bottom:8px;color:var(--muted)}
.strength-text span{font-weight:600}
.strength-requirements{display:flex;flex-direction:column;gap:4px;font-size:0.85rem;margin-top:8px}
.strength-requirements .req{transition:color 0.2s}

/* Partner Info */
.partner-info{padding:12px;background:var(--bg);border-radius:8px}

/* Danger Zone */
.danger-zone{border-color:#bf616a}
.danger-zone h3{color:#bf616a}
.danger{background:#bf616a !important;color:#fff !important}
.danger:hover:not(:disabled){opacity:0.8}