:root{
  --primary:#1c3f60;
  --secondary:#b0bec5;
  --accent:#fdd835;
  --ink:#24303c;
  --line:#d9d3bf;
  --metal-dark:#141e2c;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--metal-dark);
  background-image:
    radial-gradient(circle at 25% 20%, rgba(176,190,197,.08), transparent 40%),
    radial-gradient(circle at 75% 60%, rgba(176,190,197,.05), transparent 40%);
  overflow:hidden;
}

.cabinet{
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(circle at 8px 8px, #0d1520 60%, transparent 60%) 0 0 / 12px 12px,
    radial-gradient(circle at 2px 2px, #0d1520 45%, transparent 45%) 0 0 / 26px 26px,
    var(--metal-dark);
}

/* ---------- drawer front lip ---------- */
.drawer-front{
  flex:0 0 64px;
  padding:0 8px;
  padding-top:calc(env(safe-area-inset-top) + 6px);
  position:relative;
  background:linear-gradient(180deg,#3a4a5c,#222e3c 55%,#161e29);
  border-bottom:2px solid #0b1118;
  box-shadow:0 2px 8px rgba(0,0,0,.5);
  display:flex;
  align-items:center;
  justify-content:center;
}
.front-handle{
  width:48%;
  height:20px;
  border-radius:10px;
  background:linear-gradient(180deg,#6d7d8b,#3a4754 60%,#27323e);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.25), inset 0 -2px 3px rgba(0,0,0,.4);
  align-self:center;
}
.label-holder{
  position:absolute;
  left:14px;
  top:calc(env(safe-area-inset-top) + 8px);
  background:linear-gradient(180deg,#5d6b79,#3c4957 60%,#29333f);
  border:1px solid #10161d;
  border-radius:3px;
  padding:3px 8px;
  box-shadow:0 2px 4px rgba(0,0,0,.45);
}
.lh-name{
  display:inline-block;
  background:#10161d;
  color:#eef2f5;
  font-size:11px;
  letter-spacing:.5px;
  font-weight:700;
  border-radius:2px;
  padding:1px 6px;
}

/* ---------- drawer content ---------- */
.drawer-content{
  flex:1 1 auto;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding:14px 14px calc(env(safe-area-inset-bottom) + 84px);
  position:relative;
}
.view{display:none;animation:fade .25s ease;}
.view.active{display:block;}
@keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

.view-title{
  font-family:"Comic Sans MS","Bradley Hand","Segoe Script",cursive;
  color:#e8edf2;
  font-size:20px;
  margin:6px 0 14px;
  text-shadow:0 1px 0 #0b1118;
}

/* ---------- dashboard counters ---------- */
.counters{display:flex;gap:8px;margin-bottom:16px;}
.counter{
  flex:1;
  background:linear-gradient(180deg,#58677a,#3d4a5c 60%,#2b3744);
  border:1px solid #11181f;
  border-radius:5px;
  padding:8px 4px 6px;
  text-align:center;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.22), 0 2px 4px rgba(0,0,0,.4);
}
.counter-num{
  display:block;
  color:#fff;
  font-size:30px;
  font-weight:800;
  line-height:1;
  text-shadow:0 2px 0 #0b1118, 0 -1px 0 rgba(255,255,255,.25);
  font-family:Georgia,"Times New Roman",serif;
}
.counter-label{
  display:block;
  margin-top:6px;
  background:#0e141a;
  color:#dfe5ea;
  font-size:8px;
  letter-spacing:.3px;
  border-radius:2px;
  padding:2px 2px;
  line-height:1.2;
  text-transform:uppercase;
}

/* ---------- hanging folder ---------- */
.folder{
  background:linear-gradient(180deg,#3b4c61,#24303e);
  border:1px solid #0e151c;
  border-radius:6px;
  box-shadow:0 3px 8px rgba(0,0,0,.4);
  margin-bottom:16px;
}
.folder-tab{
  height:22px;
  padding:0 6px 0 12px;
  background:linear-gradient(180deg,#6b7c8e,#46576a 60%,#33424f);
  display:inline-block;
  min-width:70px;
  border-radius:4px 4px 0 0;
  transform:translateY(-14px);
  box-shadow:0 2px 4px rgba(0,0,0,.35);
}
.folder-tab-text{
  display:inline-block;
  color:#eef2f5;
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  background:#10161d;
  border-radius:2px;
  padding:2px 6px;
  margin-top:2px;
}
.folder-body{
  position:relative;
  padding:8px;
  margin-top:-10px;
}
.folder-body::before{
  content:"";
  position:absolute;
  left:6px;right:6px;top:0;
  height:2px;
  background:linear-gradient(90deg,transparent,#d2cbb2,transparent);
  opacity:.35;
}
.recent-list{display:flex;flex-direction:column;gap:7px;}

/* ---------- memo slip ---------- */
.slip{
  position:relative;
  background:linear-gradient(180deg,#fff6c0,#f8e98f);
  background-image:repeating-linear-gradient(180deg,transparent,transparent 17px,#cfe0f0 17px,#cfe0f0 18px);
  border-radius:2px 3px 3px 2px;
  box-shadow:0 3px 6px rgba(0,0,0,.4), inset 0 0 0 1px rgba(120,105,30,.12);
  padding:11px 14px;
  margin-bottom:7px;
  position:relative;
}
.slip::before{
  content:"";
  position:absolute;
  top:-2px;left:0;right:0;
  height:6px;
  background:linear-gradient(180deg,#f5e67c,#efdf70);
  -webkit-mask:linear-gradient(180deg,#000,#000) top/100% 1px,
               radial-gradient(circle 2px at 10px 100%,#000 96%,transparent) top/100% 6px;
}
.slip-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.slip-client{
  font-family:"Comic Sans MS","Bradley Hand","Segoe Script",cursive;
  font-weight:700;
  font-size:16px;
  color:#2b2b23;
}
.slip-meta{text-align:right;}
.slip-type{font-size:9px;text-transform:uppercase;letter-spacing:.4px;background:#4a5866;color:#fff;border-radius:3px;padding:1px 5px;font-family:system-ui;font-weight:600;}
.slip-date{font-size:11px;color:#7a6f3d;font-family:"Comic Sans MS",cursive;margin-top:2px;}
.slip-body{
  font-family:"Comic Sans MS","Bradley Hand","Segoe Script",cursive;
  color:#3a3826;
  font-size:14px;
  line-height:18px;
  margin-top:5px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.slip-actions{position:absolute;right:14px;bottom:6px;display:flex;gap:12px;}
.icon-btn{
  background:none;border:none;padding:4px;font-size:16px;cursor:pointer;color:#4a5866;
}
.slip .paperclip{
  position:absolute;
  right:-7px;
  top:50%;
  transform:translateY(-50%) rotate(12deg);
  font-size:22px;
  color:#8b98a6;
  text-shadow:0 1px 1px rgba(0,0,0,.4);
}

/* quick add slip */
.quick-add-slip{
  position:relative;
  background:linear-gradient(180deg,#fff6c0,#f8e98f);
  border-radius:3px;
  box-shadow:0 3px 6px rgba(0,0,0,.4), inset 0 0 0 1px rgba(120,105,30,.12);
  padding:20px;
  text-align:center;
  cursor:pointer;
  transition:transform .1s;
}
.quick-add-slip:active{transform:scale(.98);}
.quick-add-plus{
  font-family:"Comic Sans MS",cursive;
  font-size:46px;
  line-height:1;
  color:#4a5866;
}
.quick-add-text{
  font-family:"Comic Sans MS","Bradley Hand",cursive;
  color:#6b6140;
  font-size:14px;
  margin-top:2px;
}

/* ---------- clients list ---------- */
.client-card{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:linear-gradient(180deg,#fff6c0,#f6e78c);
  border-radius:3px;
  padding:12px 14px;
  margin-bottom:8px;
  box-shadow:0 3px 6px rgba(0,0,0,.4);
}
.client-name{font-family:"Comic Sans MS","Bradley Hand",cursive;font-weight:700;color:#2b2b23;}
.client-stats{text-align:right;font-family:"Comic Sans MS",cursive;font-size:12px;color:#7a6f3d;}
.client-stats strong{color:#3a3826;}

/* ---------- notes list ---------- */
.search-wrap{margin-bottom:14px;}
.search-input{
  width:100%;
  padding:11px 14px;
  border-radius:6px;
  border:1px solid #0e151c;
  background:linear-gradient(180deg,#3a4a5c,#2c3a49);
  color:#eef2f5;
  font-size:14px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.4);
}
.search-input::placeholder{color:#9fb0c0;}
.note-list{margin-top:4px;}
.note-list .slip{padding-right:18px;}

.empty{color:#9fb0c0;text-align:center;padding:30px 10px;font-size:14px;}

/* ---------- form ---------- */
#view-add form{
  background:linear-gradient(180deg,#e8edf2,#dfe6ec);
  border:1px solid #0e151c;
  border-radius:8px;
  padding:16px;
  box-shadow:0 3px 10px rgba(0,0,0,.5);
}
.field{margin-bottom:14px;}
.field label{display:block;font-size:12px;font-weight:600;color:#3a4754;margin-bottom:5px;}
.field input,.field select,.field textarea{
  width:100%;
  padding:11px;
  border:1px solid #b9c2ca;
  border-radius:6px;
  font-size:15px;
  background:#fbfcfd;
  color:#1b2833;
}
.field textarea{resize:vertical;font-family:inherit;}
.form-error{color:#c0392b;font-size:13px;min-height:18px;margin:0 0 8px;}
.save-btn{
  width:100%;
  padding:14px;
  border:none;
  border-radius:8px;
  font-size:16px;
  font-weight:700;
  color:#1a2c3d;
  background:linear-gradient(180deg,#ffe14d,#fdd835 55%,#e8c322);
  box-shadow:0 3px 0 #b8930f, 0 3px 8px rgba(0,0,0,.4);
  cursor:pointer;
}
.save-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #b8930f;}

/* ---------- bottom tab bar ---------- */
.tabbar{
  flex:0 0 auto;
  display:flex;
  background:linear-gradient(180deg,#35424f,#232e3b);
  border-top:2px solid #0d131a;
  box-shadow:0 -3px 8px rgba(0,0,0,.45);
  padding-bottom:env(safe-area-inset-bottom);
  z-index:5;
}
.tab{
  flex:1;
  border:none;
  background:transparent;
  color:#c3cdd6;
  font-size:18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:9px 0 9px;
  cursor:pointer;
  position:relative;
  transition:transform .15s, filter .15s;
}
.tab span{font-size:10px;letter-spacing:.2px;color:#aeb9c3;}
/* metal rod */
.tab::before{
  content:"";
  position:absolute;
  top:0;
  left:12%;
  right:12%;
  height:7px;
  border-radius:0 0 6px 6px;
  background:linear-gradient(180deg,#687888,#3a4653);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.25), inset 0 -2px 3px rgba(0,0,0,.45);
}
/* plastic insert tab */
.tab::after{
  content:"";
  position:absolute;
  top:5px;
  left:26%;
  right:26%;
  height:13px;
  border-radius:4px;
  background:linear-gradient(180deg,#d7dde2,#b8c1c9);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.6), 0 1px 2px rgba(0,0,0,.3);
  filter:saturate(.4) brightness(.96);
}
.tab.active{
  filter:brightness(1.05);
}
.tab.active::after{
  background:linear-gradient(180deg,#fff176,#fdd835 45%,#f9a825 80%,#ffe082);
  box-shadow:inset 0 1px 3px rgba(255,255,255,.8),
              inset 0 -2px 3px rgba(180,130,0,.5),
              0 2px 5px rgba(0,0,0,.35),
              0 0 14px rgba(253,216,53,.55);
}
.tab.active span{color:#fdd835;font-weight:700;}
.tab.active{color:#fdd835;}

@media (min-width:480px){
  .drawer-content{max-width:460px;margin:0 auto;width:100%;}
  .tabbar{max-width:460px;margin:0 auto;width:100%;}
}