:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --stroke:#6d63ff;
  --stroke2:#9b93ff;
  --shadow:0 12px 30px rgba(17,24,39,.08);
  --border:1px solid rgba(17,24,39,.08);
  --radius:18px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background:var(--bg);
  color:var(--text);
}

.hidden{display:none !important;}

.topbar{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(246,247,251,.92);
  backdrop-filter: blur(10px);
  border-bottom: var(--border);
  padding:14px 18px;
  display:flex;
  align-items:center;
  gap:14px;
}

.brand{min-width:260px}
.brandTitle{font-weight:800; font-size:22px;}
.brandSub{color:var(--muted); font-size:12px; margin-top:2px}

.searchWrap{flex:1; display:flex; justify-content:center;}
.search{
  width:min(760px, 100%);
  padding:12px 14px;
  border-radius:999px;
  border:var(--border);
  background:#fff;
  box-shadow:0 8px 20px rgba(17,24,39,.05);
  outline:none;
}

.landscapeBar{
  flex:1;
  display:flex;
  align-items:center;
  gap:12px;
}

.field{display:flex; flex-direction:column; gap:4px; min-width:260px; flex:1}
.label{font-size:12px; color:var(--muted)}
.input{
  padding:10px 12px;
  border-radius:12px;
  border:var(--border);
  background:#fff;
  outline:none;
}
.input.small{max-width:90px}

.btn{
  border:var(--border);
  background:#fff;
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  box-shadow:0 10px 20px rgba(17,24,39,.05);
}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent; box-shadow:none}
.btn.primary{
  background:linear-gradient(180deg,#ffffff,#f3f2ff);
  border:1px solid rgba(109,99,255,.25);
}

.segmented{
  display:flex;
  border:var(--border);
  border-radius:999px;
  padding:4px;
  background:#fff;
  box-shadow:0 10px 20px rgba(17,24,39,.05);
}
.segBtn{
  border:0;
  background:transparent;
  padding:9px 12px;
  border-radius:999px;
  cursor:pointer;
  color:var(--muted);
  font-weight:700;
}
.segBtn.active{
  background:rgba(109,99,255,.12);
  color:#2b2b5a;
}

.iconRow{display:flex; align-items:center; gap:8px}
.iconBtn{
  border:var(--border);
  background:#fff;
  width:40px; height:40px;
  border-radius:12px;
  cursor:pointer;
  display:grid;
  place-items:center;
  box-shadow:0 10px 20px rgba(17,24,39,.05);
}
.iconBtn.danger{
  border:1px solid rgba(220,38,38,.25);
  background:#fff;
}
.iconBtn:hover{transform:translateY(-1px)}

.main{padding:18px}

.hero{
  background:var(--card);
  border:var(--border);
  border-radius:var(--radius);
  padding:18px 18px;
  box-shadow:var(--shadow);
  margin-bottom:14px;
}
.hero h1{margin:0 0 6px; font-size:28px}
.hero p{margin:0; color:var(--muted)}

.categories{display:flex; flex-direction:column; gap:12px; max-width:1100px; margin:0 auto;}
.category{
  background:var(--card);
  border:var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.catHeader{
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
}
.catLeft{display:flex; align-items:center; gap:10px}
.catEmoji{
  width:34px; height:34px;
  border-radius:12px;
  background:rgba(109,99,255,.08);
  display:grid; place-items:center;
  border:1px solid rgba(109,99,255,.15);
}
.catTitle{font-weight:900}
.catCount{color:var(--muted); font-size:12px}

.catBody{
  padding:12px 16px 16px;
  border-top:var(--border);
}

.cards{
  display:grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap:12px;
}
@media (max-width: 820px){
  .cards{grid-template-columns: 1fr;}
}

.card{
  border:var(--border);
  border-radius:16px;
  padding:12px 12px;
  background:#fff;
  cursor:pointer;
  box-shadow:0 10px 20px rgba(17,24,39,.04);
}
.card:hover{transform:translateY(-1px)}
.cardTitle{font-weight:900; font-size:16px}
.cardSub{color:var(--muted); font-size:12px; margin-top:3px}

.card.deleteMode{
  outline:2px solid rgba(220,38,38,.35);
  background:rgba(254,226,226,.35);
}

.footnote{
  max-width:1100px;
  margin:12px auto 0;
  color:var(--muted);
  font-size:12px;
}

.layout{
  display:grid;
  grid-template-columns: 1fr 380px;
  gap:14px;
  align-items:start;
}
@media (max-width: 980px){
  .layout{grid-template-columns: 1fr;}
  .drawer{position:fixed; right:10px; bottom:10px; top:auto; height:55vh; width:min(420px, calc(100vw - 20px));}
}

.canvasCard{
  background:var(--card);
  border:var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px;
}
.hint{color:var(--muted); font-size:12px; margin-bottom:10px}
.canvasWrap{
  border-radius:18px;
  overflow:hidden;
  border:var(--border);
  background:#fff;
}

.drawer{
  background:var(--card);
  border:var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:12px;
  position:sticky;
  top:92px;
  height: calc(100vh - 120px);
  overflow:hidden;
  transform: translateX(0);
}
.drawer.closed{
  transform: translateX(110%);
}

.drawerTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.dxName{font-weight:1000; font-size:18px; cursor:pointer;}
.dxMeta{color:var(--muted); font-size:12px; margin-top:4px}
.drawerBtns{display:flex; gap:8px}

.tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.tab{
  border:var(--border);
  background:#fff;
  padding:8px 10px;
  border-radius:999px;
  cursor:pointer;
  font-weight:800;
  color:var(--muted);
}
.tab.active{
  background:rgba(109,99,255,.12);
  color:#2b2b5a;
  border:1px solid rgba(109,99,255,.25);
}

.drawerBody{
  height: calc(100% - 92px);
  display:flex;
  flex-direction:column;
}
.panel{flex:1; display:flex}
.panel textarea{
  width:100%;
  height:100%;
  resize:none;
  border-radius:16px;
  border:var(--border);
  padding:12px;
  font-family:inherit;
  outline:none;
  background:#fff;
}
.drawerTip{
  color:var(--muted);
  font-size:12px;
  margin-top:10px;
}

.fabWrap{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:50;
}
.fab{
  width:58px; height:58px;
  border-radius:18px;
  border:1px solid rgba(109,99,255,.25);
  background:linear-gradient(180deg,#ffffff,#f3f2ff);
  box-shadow:0 18px 40px rgba(17,24,39,.18);
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size:20px;
}
.fabMenu{
  position:absolute;
  right:0;
  bottom:70px;
  width:280px;
  background:#fff;
  border:var(--border);
  border-radius:18px;
  box-shadow:0 18px 40px rgba(17,24,39,.18);
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.fabItem{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:14px;
  border:var(--border);
  cursor:pointer;
  background:#fff;
}
.fabItem:hover{background:rgba(109,99,255,.06)}
.fabIco{
  width:36px; height:36px;
  border-radius:14px;
  display:grid; place-items:center;
  background:rgba(109,99,255,.10);
  border:1px solid rgba(109,99,255,.18);
}
.fabText{display:flex; flex-direction:column}
.fabTitle{font-weight:900}
.fabSub{font-size:12px; color:var(--muted)}
.fabDanger{
  background:rgba(254,226,226,.35);
  border:1px solid rgba(220,38,38,.20);
}
.fabDanger .fabIco{
  background:rgba(220,38,38,.08);
  border:1px solid rgba(220,38,38,.18);
}

.modalBackdrop{
  position:fixed;
  inset:0;
  background:rgba(17,24,39,.35);
  z-index:80;
}
.modal{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(760px, calc(100vw - 24px));
  background:#fff;
  border:var(--border);
  border-radius:20px;
  box-shadow:0 30px 80px rgba(17,24,39,.25);
  z-index:90;
  overflow:hidden;
}
.modalHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 14px;
  border-bottom:var(--border);
}
.modalTitle{font-weight:1000}
.modalBody{padding:14px}
.modalHint{color:var(--muted); font-size:12px; margin-bottom:10px}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.divider{height:1px; background:rgba(17,24,39,.08); margin:12px 0}
.smallNote{color:var(--muted); font-size:12px; margin-top:10px}

.catManagerList{display:flex; flex-direction:column; gap:10px}
.catRow{
  display:flex;
  gap:10px;
  align-items:center;
  border:var(--border);
  border-radius:16px;
  padding:10px;
}
.catRow .input{flex:1}