:root{
  --bg:#f6f6f4; --card:#ffffff; --text:#1c1c1e; --muted:#6b6b70; --border:#e3e3e0;
  --accent:#2f6fed; --amber-bg:#fff4d6; --amber-text:#8a5a00; --amber-border:#f0c96a;
  --p1:#e5484d; --p2:#f2994a; --p3:#2f6fed; --p4:#9a9a9e;
  --danger:#e5484d; --chip-bg:#f0f0ee; --chip-text:#3a3a3d;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#131314; --card:#1e1e20; --text:#f2f2f3; --muted:#9a9a9e; --border:#333336;
    --accent:#5b8dfb; --amber-bg:#3a2e0d; --amber-text:#f0c96a; --amber-border:#5c4713;
    --p1:#ff6b6f; --p2:#ffab5e; --p3:#5b8dfb; --p4:#7d7d82;
    --danger:#ff6b6f; --chip-bg:#2a2a2d; --chip-text:#dcdce0;
  }
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;max-width:100%;overflow-x:hidden;}
body{
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.4;
  -webkit-font-smoothing:antialiased;
}
button,select,textarea,input{font:inherit;color:inherit;}
button{cursor:pointer;}
select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center; background-size:10px 7px;
  padding-right:24px !important; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;
}

#app{
  max-width:640px; margin:0 auto;
  min-height:100vh;
  padding-bottom:96px;
  display:flex; flex-direction:column;
}

/* topbar (header + filters, sticky as one unit) */
#topbar{
  position:sticky; top:0; z-index:5; background:var(--bg);
}
#header{
  padding:16px 16px 8px;
  display:flex; flex-direction:column; gap:10px;
}
#listTitle{margin:0; font-size:1.3rem; font-weight:700;}
.header-actions{display:flex; gap:8px; flex-wrap:wrap;}

.chips{display:flex; gap:8px; flex-wrap:wrap;}
.chip{
  display:inline-flex; align-items:center; gap:4px;
  padding:8px 12px; border-radius:999px;
  background:var(--chip-bg); color:var(--chip-text);
  border:1px solid transparent; font-size:0.9rem;
  min-height:36px;
}
.chip.active{background:var(--accent); color:#fff;}
.btn-chip{
  min-height:44px; padding:8px 14px; border-radius:999px;
  background:var(--chip-bg); color:var(--chip-text); border:none;
  font-size:0.9rem; white-space:nowrap;
}

/* links panel */
.panel{
  margin:0 16px 12px; padding:12px; border-radius:12px;
  background:var(--card); border:1px solid var(--border);
}
.panel h3{margin:0 0 8px; font-size:0.95rem;}
.link-row{display:flex; align-items:center; gap:8px; padding:6px 0;}
.link-row .link-name{flex:0 0 auto; font-size:0.9rem; color:var(--muted); min-width:70px;}
.link-row input{
  flex:1; min-width:0; padding:8px; border-radius:8px; border:1px solid var(--border);
  background:var(--bg); color:var(--text); font-size:0.8rem;
}
.link-row button{
  min-height:36px; padding:6px 10px; border-radius:8px; border:none;
  background:var(--chip-bg); color:var(--chip-text);
}

/* filters */
[hidden]{display:none !important;}
.filters{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; padding:4px 16px 12px;
}
.filters select{
  min-height:40px; padding:6px 8px; border-radius:999px; width:100%; min-width:0;
  background:var(--chip-bg); color:var(--chip-text); border:1px solid var(--border);
  font-size:0.85rem;
}

/* list */
.list{padding:0 16px; display:flex; flex-direction:column; gap:10px;}
.empty{padding:40px 24px; text-align:center; color:var(--muted); font-size:0.95rem;}

.item{
  background:var(--card); border:1px solid var(--border);
  border-left:4px solid var(--p4);
  border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:8px;
}
.item.p1{border-left-color:var(--p1);}
.item.p2{border-left-color:var(--p2);}
.item.p3{border-left-color:var(--p3);}
.item.p4{border-left-color:var(--p4);}
.item.done{opacity:0.6;}
.item.done .item-text{text-decoration:line-through;}

.item-top{display:flex; align-items:flex-start; gap:10px;}
.check{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%;
  border:2px solid var(--muted); background:transparent;
  min-height:44px; min-width:44px; display:flex; align-items:center; justify-content:center;
  padding:0; margin:-9px 0;
}
.check::after{content:""; width:12px; height:12px; border-radius:50%;}
.check.checked{border-color:var(--accent);}
.check.checked::after{background:var(--accent);}

.item-text{
  flex:1; min-width:0; word-break:break-word; padding:8px 2px;
  border:none; background:transparent;
}
.item-text-input{
  flex:1; min-width:0; padding:8px; border-radius:8px; border:1px solid var(--border);
  background:var(--bg); color:var(--text); resize:vertical;
}
.more-btn{
  flex:0 0 auto; min-width:44px; min-height:44px; border:none; background:transparent;
  color:var(--muted); font-size:1.2rem; border-radius:8px;
}

.chip-row{display:flex; gap:6px; flex-wrap:wrap; padding-left:36px;}
.chip-row select{
  min-height:38px; padding:4px 8px; border-radius:999px; font-size:0.8rem;
  background:var(--chip-bg); color:var(--chip-text); border:1px solid var(--border);
  max-width:150px;
}
.chip-row .prio{
  min-height:38px; padding:4px 10px; border-radius:999px; font-size:0.8rem; border:none;
  font-weight:600; color:#fff;
}
.prio.p1{background:var(--p1);}
.prio.p2{background:var(--p2);}
.prio.p3{background:var(--p3);}
.prio.p4{background:var(--p4);}

.ai-strip{
  display:flex; align-items:center; justify-content:space-between; gap:6px; flex-wrap:wrap;
  background:var(--amber-bg); color:var(--amber-text); border:1px solid var(--amber-border);
  border-radius:8px; padding:6px 10px; font-size:0.82rem; margin-left:0;
}
.ai-strip > span{min-width:0;}
.ai-strip .ai-actions{display:flex; gap:4px; flex-wrap:wrap; min-width:0;}
.ai-strip button{
  border:none; background:transparent; color:var(--amber-text); font-weight:600;
  min-height:40px; padding:4px 6px; white-space:nowrap;
}

.item-details{padding-left:36px; font-size:0.85rem; color:var(--muted); white-space:pre-wrap;}

.done-section{padding:8px 16px 0;}
.done-section h2{font-size:0.95rem; color:var(--muted); margin:12px 0 8px;}

/* add box */
.addbox{
  position:fixed; left:0; right:0; bottom:0;
  display:flex; gap:8px; align-items:flex-end;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:var(--bg); border-top:1px solid var(--border);
  max-width:640px; margin:0 auto;
}
.addbox select{
  min-height:44px; border-radius:10px; border:1px solid var(--border);
  background:var(--chip-bg); color:var(--chip-text); padding:6px; max-width:110px;
}
.addbox textarea{
  flex:1; min-height:44px; max-height:120px; border-radius:12px; border:1px solid var(--border);
  background:var(--card); color:var(--text); padding:10px 12px; resize:none;
}
.addbox button{
  min-height:44px; min-width:64px; border-radius:12px; border:none;
  background:var(--accent); color:#fff; font-weight:600; padding:0 16px;
}

@media (min-width:640px){
  #app{border-left:1px solid var(--border); border-right:1px solid var(--border);}
}