:root{
  --bg:#0f0f12; --card:#121214; --muted:#9aa0a6; --accent:#ffb400; --text:#ffffff; --danger:#ff5c5c;
}
body.light{--bg:#f7f7f9; --card:#ffffff; --muted:#666; --accent:#ff8c00; --text:#111;}
*{box-sizing:border-box}
body{
  margin:0; font-family:Inter, Poppins, system-ui, sans-serif; background:var(--bg); color:var(--text); min-height:100vh;
}

/* center-screen auth */
.center-screen{width:96%;max-width:420px;margin:6vh auto;padding:18px;border-radius:12px;background:var(--card);box-shadow:0 10px 30px rgba(0,0,0,0.4)}
.card{background:var(--card);padding:14px;border-radius:12px}
.hidden{display:none}

/* forms */
.form input, .form button, input, textarea{
  width:100%; padding:10px 12px; margin:8px 0; border-radius:10px; border:1px solid rgba(255,255,255,0.03); background:transparent; color:var(--text)
}
.btn{background:var(--accent); color:#000; border:none; padding:10px 12px; border-radius:10px; cursor:pointer}
.btn.small{padding:6px 8px; font-size:13px}
.btn.danger{background:var(--danger); color:#fff}
.muted{color:var(--muted); font-size:13px}
.kv{font-size:13px;color:var(--muted)}

/* layout */
.app{display:flex;min-height:100vh}
.sidebar{width:260px; background:linear-gradient(180deg,#0b0b0c,#0f0f12); padding:18px; display:flex; flex-direction:column; gap:12px}
.brand{display:flex;gap:12px;align-items:center}
.brand-title{font-weight:700}
nav{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.nav-btn{display:flex;align-items:center;gap:10px;padding:10px;border-radius:8px;border:none;background:transparent;color:var(--text);cursor:pointer;text-align:left}
.nav-btn.active{background:rgba(255,255,255,0.02)}
.nav-btn:hover{background:rgba(255,255,255,0.03)}
.sidebar-footer{margin-top:auto;display:flex;gap:8px}

/* main */
.main{flex:1;padding:20px}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.search-wrap{flex:1}
.search-wrap input, #globalSearch{width:100%;padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,0.03);background:transparent;color:var(--text)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* panels */
.panel{background:transparent;padding:6px 0}
.row{display:flex;gap:8px;align-items:center}
.small-gaps .row{gap:6px}

/* lists */
.list{list-style:none;padding:0;margin:12px 0;display:flex;flex-direction:column;gap:8px}
.item, .exp-item, .habit-row, .vault-row, .goal-row{display:flex;justify-content:space-between;align-items:center;padding:10px;border-radius:10px;background:rgba(255,255,255,0.02)}
.item .left{display:flex;gap:10px;align-items:center}
.item .text{flex:1}
.item .done{opacity:0.6;text-decoration:line-through}

/* kanban */
.kanban{display:flex;gap:12px}
.col{flex:1;background:rgba(255,255,255,0.015);padding:10px;border-radius:10px}
.col h3{margin:0 0 8px 0}
.col-body{min-height:120px;display:flex;flex-direction:column;gap:8px}

/* timer */
.timer{font-weight:700;font-size:24px;padding:12px 8px;text-align:center}
.timer.big{font-size:40px}

/* responsive */
@media(max-width:1000px){
  .sidebar{position:fixed;left:0;top:0;height:100vh;transform:translateX(-320px);transition:transform .3s}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0}
  .brand-title{font-size:16px}
}
@media(max-width:700px){
  .kanban{flex-direction:column}
  .grid{grid-template-columns:1fr}
  .row{flex-direction:column;align-items:stretch}
  .form input{margin:8px 0}
  }

/* Task container */
.task {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #1a1a1a;
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 12px;
    width: 100%;
}

/* Checkbox and task text wrapper */
.task-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0; /* allows text truncation */
}

/* Fix text overflowing + wrapping issues */
.task-text {
    font-size: 18px;
    color: #fff;
    white-space: nowrap;        /* Prevent multi-line text */
    overflow: hidden;           /* Hide overflow */
    text-overflow: ellipsis;    /* Show "..." when too long */
}

/* Delete button */
.task button {
    background: #333;
    border: none;
    padding: 10px 14px;
    border-radius: 10px;
    color: white;
    font-size: 18px;
    cursor: pointer;
}

.task button:hover {
    background: #ff4444;
}

/* Make input and layout responsive */
input, button {
    font-size: 18px;
}