:root{
  --primary:#5c4033;
  --secondary:#f5f0e6;
  --accent:#008080;
  --accent-dark:#005f5f;
  --ink:#2b211b;
  --muted:#8a7a6b;
  --card:#fffef8;
  --line:#d9cfc0;
  --teal:#008080;
  --coral:#d96459;
  --mustard:#d4a017;
  --olive:#7a8a3a;
  --serif:Georgia,'Times New Roman',serif;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background:var(--primary);
  color:var(--ink);
  min-height:100%;
  padding-bottom:calc(76px + env(safe-area-inset-bottom,0px));
}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,textarea{font-family:inherit;font-size:16px}

/* ============ BINDER SHELL ============ */
.binder{
  position:relative;
  background:
    radial-gradient(120% 60% at 15% 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.28) 100%),
    repeating-linear-gradient(45deg, #6b4d3d, #6b4d3d 22px, #644738 22px, #644738 44px);
  min-height:100vh;
}
.binder-spine{
  position:absolute;top:0;bottom:0;left:0;width:18px;
  background:linear-gradient(90deg,#432f24,#5c4033 55%,#6b4d3d);
  box-shadow:inset -2px 0 4px rgba(0,0,0,0.4);
}
.rings{
  position:sticky;top:0;z-index:3;display:flex;justify-content:center;gap:10%;
  padding:14px 0 6px;
}
.ring{
  width:34px;height:16px;border:5px solid #a8b2b8;
  border-top:none;border-radius:0 0 40px 40px;
  background:linear-gradient(180deg,#c7d0d5,#8b969c);
  box-shadow:0 3px 3px rgba(0,0,0,0.25);
  filter:drop-shadow(0 1px 1px rgba(0,0,0,0.3));
}

/* ============ SHEETS ============ */
.sheets{
  position:relative;
  margin:0 4px 0 14px;
  padding:6px 14px 34px;
  background:
    radial-gradient(circle at 18px 8px, rgba(0,0,0,0.12) 3px, transparent 4px),
    radial-gradient(circle at 18px 2px, rgba(0,0,0,0.12) 3px, transparent 4px),
    var(--secondary);
  box-shadow:0 -2px 8px rgba(0,0,0,0.3), inset 0 0 60px rgba(0,0,0,0.06);
  min-height:70vh;
}
.sheets::before{
  content:'';position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none;
  background:repeating-linear-gradient(0deg, transparent, transparent 33px, rgba(92,64,51,0.10) 33px, rgba(92,64,51,0.10) 34px);
}

/* ============ TAB VIEWS ============ */
.tab-view{position:relative;display:flex;flex-direction:column;gap:18px;padding-bottom:20px}
.tab-head{padding-top:14px}
.tab-head h1{
  font-family:var(--serif);color:var(--primary);font-size:26px;letter-spacing:.5px;
}
.sub{color:var(--muted);font-size:13px;margin-top:2px;font-style:italic}
.section-label{
  display:flex;align-items:center;gap:10px;color:var(--accent-dark);
  font-family:var(--serif);font-weight:700;letter-spacing:1px;text-transform:uppercase;font-size:12px;
}
.ruled-line{flex:1;height:1px;background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 10px)}

/* ============ CLIP COUNTERS ============ */
.clipboard{display:flex;gap:12px;margin-top:4px}
.clip{position:relative;flex:1;background:#fffdf4;border:1px solid var(--line);border-radius:4px;padding:18px 10px 10px;box-shadow:0 2px 4px rgba(0,0,0,0.12)}
.clip-head{
  position:absolute;left:8px;right:8px;top:-6px;height:10px;
  background:linear-gradient(180deg,#e8e8e4,#b9b9b3);
  border:1px solid #a5a59f;border-radius:6px;
  box-shadow:0 1px 2px rgba(0,0,0,0.25);
}
.clip-head::after{content:'';position:absolute;left:50%;top:4px;transform:translateX(-50%);width:26px;height:4px;border-radius:3px;background:#c6c6c0}
.clip-metal{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#fafaf7,#d4d4cc 55%,#b8b8b0);
  border:1px solid #9c9c95;border-radius:6px;padding:10px 8px;
  box-shadow:0 2px 5px rgba(0,0,0,0.18), inset 0 0 8px rgba(255,255,255,0.5);
}
.count{font-family:var(--serif);font-size:30px;line-height:1;color:#4b4b45}
.clip-tag{
  display:block;text-align:center;margin-top:8px;font-family:var(--serif);
  font-weight:700;color:var(--primary);font-size:12px;letter-spacing:.5px;
}

/* ============ INDEX CARDS ============ */
.cards{display:flex;flex-direction:column;gap:14px}
.card{
  position:relative;
  background:
    radial-gradient(circle at 8px 10px, rgba(0,0,0,0.04) 0 2px, transparent 3px),
    repeating-linear-gradient(0deg, transparent, transparent 25px, rgba(72,120,140,0.13) 25px, rgba(72,120,140,0.13) 26px),
    var(--card);
  border:1px solid var(--line);
  border-radius:3px;
  padding:14px 14px 12px;
  box-shadow:0 2px 5px rgba(0,0,0,0.14);
  color:var(--ink);
  text-align:left;width:100%;
}
.card:active{transform:translateY(1px)}
.card-client{
  font-family:'Segoe Script','Comic Sans MS',cursive;
  color:#2445c9;font-size:15px;font-weight:700;padding-right:22px;line-height:1.2;
}
.card-title{font-family:var(--serif);font-weight:700;color:var(--ink);font-size:17px;margin-top:4px;line-height:1.25}
.card-brief{color:var(--muted);font-size:13px;margin-top:4px;line-height:1.4}
.card-meta{display:flex;justify-content:space-between;align-items:flex-end;margin-top:10px}
.card-deadline{
  font-family:var(--serif);color:#b0302a;font-size:12px;font-weight:700;
  letter-spacing:.3px;
}
.deadline-overdue{color:#d33a32}
.deadline-ok{color:#7a5c10}
.card-actions{display:flex;gap:8px}
.card-actions button{
  font-size:12px;padding:6px 10px;border-radius:4px;font-weight:600;letter-spacing:.3px;
}
.btn-edit{background:#eaf1ee;color:var(--accent-dark);border:1px solid #bcd2cf}
.btn-del{background:#fbebe9;color:#b0302a;border:1px solid #ecd0cc}

/* reinforcement ring + completion dot */
.ring-reinf{
  position:absolute;top:-8px;right:10px;width:26px;height:26px;border-radius:50%;
  background:radial-gradient(circle, #f7f1e2 55%, #cfc4ab 100%);
  box-shadow:0 1px 2px rgba(0,0,0,0.25);
  display:flex;align-items:center;justify-content:center;
}
.ring-reinf::before{
  content:'';position:absolute;inset:6px;border-radius:50%;
  background:transparent;border:2px solid rgba(0,0,0,0.18);
}
.ring-reinf .dot{width:9px;height:9px;border-radius:50%;background:transparent;position:relative;z-index:1}
.card.completed{opacity:.92}
.card.completed .ring-reinf .dot{background:var(--teal)}
.card.completed .card-title{color:#4a4a46;text-decoration:line-through;text-decoration-color:rgba(0,0,0,0.35)}

/* accordion client groups */
.acc-group{display:flex;flex-direction:column}
.acc-head{
  display:flex;align-items:center;gap:8px;padding:6px 0;
  font-family:var(--serif);font-weight:700;color:var(--primary);font-size:18px;
  border-bottom:1px solid var(--line);
}
.acc-head .carat{transition:transform .2s;color:var(--muted)}
.acc-head.open .carat{transform:rotate(90deg)}
.acc-body{padding:10px 0 2px;display:flex;flex-direction:column;gap:12px}
.acc-body[hidden]{display:none}

/* empty placeholder cards */
.empty-card{
  position:relative;background:var(--card);border:1.5px dashed var(--line);
  border-radius:3px;padding:16px 14px;color:var(--muted);font-style:italic;font-size:14px;
}
.empty-card::before{
  content:'\2605';position:absolute;top:-10px;left:12px;color:#e6c96a;font-size:18px;
}

/* ============ SEARCH + FILTER ============ */
.searchbar{
  display:flex;align-items:center;gap:8px;background:#fffdf4;border:1px solid var(--line);
  border-radius:6px;padding:10px 12px;box-shadow:0 2px 3px rgba(0,0,0,0.1);
}
.search-icon{color:var(--muted);font-size:16px}
.searchbar input{flex:1;border:none;outline:none;background:none;color:var(--ink)}
.segmented{display:flex;background:#e6ddcc;border-radius:8px;padding:3px;gap:3px}
.seg{flex:1;padding:8px;border-radius:6px;color:var(--muted);font-weight:600;font-size:13px}
.seg.active{background:#fffdf4;color:var(--primary);box-shadow:0 1px 2px rgba(0,0,0,0.15)}

/* ============ FORM ============ */
.form-card{
  position:relative;background:var(--card);border:1px solid var(--line);border-radius:5px;
  padding:18px 16px;box-shadow:0 2px 6px rgba(0,0,0,0.12);
  display:flex;flex-direction:column;gap:16px;
}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-family:var(--serif);font-weight:700;color:var(--primary);font-size:14px}
.field .req{color:#d33a32}
.field input[type=text],.field input[type=date],.field textarea{
  background:#fdfbf3;border:1px solid var(--line);border-radius:5px;padding:11px 12px;color:var(--ink);
}
.field input:focus,.field textarea:focus{outline:2px solid var(--accent);border-color:var(--accent)}
.field textarea{resize:vertical}
.err{color:#d33a32;font-size:12px;min-height:0}
.field.invalid input,.field.invalid textarea{border-color:#d33a32;background:#fff6f4}
.check{align-items:flex-start}
.switch-line{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.switch-line input{display:none}
.switch{
  width:46px;height:26px;border-radius:14px;background:#d9cfc0;position:relative;transition:background .2s;
  flex-shrink:0;
}
.switch::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,0.3);transition:transform .2s}
.switch-line input:checked + .switch{background:var(--accent)}
.switch-line input:checked + .switch::after{transform:translateX(20px)}
.form-actions{display:flex;gap:10px;margin-top:4px}
.btn{flex:1;padding:13px;border-radius:6px;font-weight:700;font-size:15px;letter-spacing:.3px}
.btn.primary{background:var(--accent);color:#fff;box-shadow:0 2px 4px rgba(0,0,0,0.2)}
.btn.primary:active{background:var(--accent-dark)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--muted)}

/* ============ FAB ============ */
.fab{
  align-self:center;background:var(--accent);color:#fff;font-weight:700;font-size:15px;
  padding:12px 22px;border-radius:24px;box-shadow:0 3px 6px rgba(0,0,0,0.25);margin-top:4px;
}

/* ============ BOTTOM TABS ============ */
.tabs{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:flex;
  background:#544034;
  border-top:2px solid #3b2d24;
  padding:8px 6px calc(10px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -3px 8px rgba(0,0,0,0.35);
}
.tab{
  flex:1;position:relative;margin:0 3px;padding:10px 4px 8px;
  background:linear-gradient(180deg,#8a725f,#6b5643);
  border-radius:6px 6px 4px 4px;border:1px solid #4b382b;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.15);
  transition:transform .18s, box-shadow .18s, background .18s;
}
.tab-label{font-family:var(--serif);font-weight:700;font-size:11px;color:#efe7db;letter-spacing:.4px}
.tab[data-tab=dashboard]{border-top:5px solid var(--teal)}
.tab[data-tab=clients]{border-top:5px solid var(--coral)}
.tab[data-tab=projects]{border-top:5px solid var(--mustard)}
.tab[data-tab=newgig]{border-top:5px solid var(--olive)}
.tab.active{
  transform:translateY(-8px);
  background:linear-gradient(180deg,#fffdf4,#f2ead9);
  border-color:var(--primary);
  box-shadow:0 8px 14px rgba(0,0,0,0.4);
}
.tab.active .tab-label{color:var(--primary)}
.tab.active::after{
  content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%);
  width:26px;height:6px;border-radius:3px;background:rgba(0,0,0,0.35);
}

/* ============ TOAST ============ */
.toast{
  position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%) translateY(20px);
  background:var(--primary);color:#f5f0e6;padding:10px 18px;border-radius:20px;
  font-size:13px;opacity:0;pointer-events:none;transition:all .25s;z-index:100;
  box-shadow:0 4px 10px rgba(0,0,0,0.3);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}