:root{
  --wood:#6b4e31;
  --wood-dark:#50381f;
  --wood-light:#8a6a3f;
  --card:#f4ebd0;
  --card-muted:#e9dcb8;
  --ink:#2f2a24;
  --accent:#a82c2c;
  --brass:#b9a24a;
  --safe-bottom:env(safe-area-inset-bottom, 0px);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:linear-gradient(180deg,#7a5a38 0%, #6b4e31 35%, #5d422a 100%);
  background-attachment:fixed;
  color:var(--ink);
  font-family:Georgia,'Times New Roman',serif;
  -webkit-text-size-adjust:100%;
  overflow:hidden;
}
button{font-family:inherit}

.desk{
  position:fixed; inset:0;
  display:flex; flex-direction:column;
  background:var(--wood);
  color:var(--ink);
}

/* --- wooden grain texture --- */
.desk::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.18;
  background:
    repeating-linear-gradient(92deg, rgba(0,0,0,.06) 0 2px, transparent 2px 38px),
    repeating-linear-gradient(88deg, rgba(255,255,255,.05) 0 1px, transparent 1px 54px);
}

/* --- Rolodex silhouette (left side, fixed visual) --- */
.rolodex{
  position:fixed; left:0; top:0; bottom:0; width:52px;
  pointer-events:none; z-index:1;
  background:linear-gradient(180deg,#0d0d0d,#1a1a1a 60%,#0f0f0f);
  opacity:.92;
}
.rolo-cap{
  position:absolute; left:-2px; top:0; width:56px; height:26px;
  background:#222; border-radius:14px 14px 0 0;
}
.rolo-tab--top{
  position:absolute; left:4px; top:4px; width:44px; height:14px;
  background:var(--card); color:var(--ink); font-size:9px; text-align:center;
  border:1px solid #b3a27e; border-radius:4px; font-family:monospace;
}
.rolo-base{
  position:absolute; left:-6px; bottom:56px; width:64px; height:40px;
  background:#1a1a1a; border-radius:6px; box-shadow:0 2px 0 #000;
}

/* --- top header --- */
.topbar{
  flex:0 0 auto;
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; padding-top:calc(10px + env(safe-area-inset-top,0px));
  background:rgba(90,63,36,.55);
  border-bottom:2px solid #3f2e1c;
}
.topbar-title{display:flex; flex-direction:column; line-height:1}
.brand{font-weight:bold; font-size:20px; color:var(--card); letter-spacing:1px; font-family:Georgia,serif}
.subbrand{font-size:10px; color:#d8c9a8; font-family:monospace}
.gear{
  margin-left:auto; width:36px; height:36px; border-radius:50%;
  border:2px solid var(--card); background:var(--wood-dark); color:var(--card);
  font-size:18px; line-height:1; cursor:pointer;
}
.gear:active{transform:rotate(30deg)}

/* --- main view --- */
.view{
  flex:1 1 auto; overflow-y:auto;
  padding:10px 14px 8px;
  padding-bottom:calc(8px + var(--safe-bottom));
  -webkit-overflow-scrolling:touch;
}
.tabview{display:none}
.tabview.active{display:block}

/* --- brass plaques --- */
.plaque-row{display:flex; gap:12px; justify-content:center; margin-top:6px}
.plaque{
  position:relative; flex:1 1 0; min-width:140px;
  background:linear-gradient(180deg,#cdb55e,#b9a24a,#a68f3c);
  border:1px solid #8a742e; border-radius:4px;
  box-shadow:inset 0 1px 0 #e6d27a, inset 0 -2px 0 #7c6523, 0 3px 0 rgba(0,0,0,.35);
  padding:14px 10px 12px; text-align:center;
}
.plaque-label{
  display:block; font-family:Georgia,serif; font-weight:bold;
  font-size:14px; letter-spacing:.5px; color:#4a3d1e; text-shadow:0 1px 0 #f0dfa0;
}
.plaque-num{
  display:block; font-family:monospace; font-size:34px; line-height:1;
  color:#1a1a1a; font-weight:bold; margin-top:2px;
}
.screw{
  position:absolute; width:7px; height:7px; border-radius:50%;
  background:#5a4a24; box-shadow:inset 0 0 2px #000, 0 0 0 1px #8a742e;
}
.plaque .screw:nth-of-type(1){top:3px; left:3px}
.plaque .screw:nth-of-type(2){top:3px; right:3px}

/* --- section label --- */
.section-label{
  margin:18px 0 8px; font-size:12px; letter-spacing:1px;
  color:#e6d7b4; text-transform:uppercase; font-family:monospace;
  border-bottom:1px dotted rgba(255,255,255,.25); padding-bottom:3px;
}

/* --- recent list --- */
.recent{list-style:none; padding:0; margin:0}
.recent li{
  background:var(--card); border:1px solid #cbbf96; border-radius:4px;
  padding:10px 12px; margin-bottom:8px; box-shadow:0 2px 0 rgba(0,0,0,.25);
}
.recent .r-client{font-weight:bold; font-family:Georgia,serif; font-size:15px; color:var(--ink)}
.recent .r-project{display:block; font-family:monospace; font-size:12px; color:#7a6f55}
.recent .r-empty{color:#9a8a6a; font-style:italic; font-size:13px}

/* --- card list (Rolodex index cards) --- */
.cardlist{list-style:none; padding:0; margin:0}
.cardlist li{
  position:relative; cursor:pointer;
  background:linear-gradient(180deg,#f7eed6,#f4ebd0 60%,#e9dcb8);
  border:1px solid #cbbf96; border-radius:5px;
  padding:14px 34px 12px 14px; margin-bottom:10px;
  box-shadow:0 3px 0 rgba(0,0,0,.28);
  transform:translateX(2px);
}
.cardlist li:active{transform:translateX(0); box-shadow:0 1px 0 rgba(0,0,0,.2)}
.cardlist .c-client{
  font-weight:bold; font-family:Georgia,serif; font-size:16px; color:var(--ink);
}
.cardlist .c-project{
  display:block; font-family:'Courier New',monospace; font-size:12.5px; color:#6f6350; margin-top:3px;
}
.cardlist .c-client::before{content:"\201C"; }
.cardlist .c-client::after{content:"\201D"; }

/* red date stamp */
.date-stamp{
  position:absolute; right:12px; bottom:6px;
  font-family:'Courier New',monospace; font-size:11.5px; font-weight:bold;
  color:var(--accent); letter-spacing:.5px;
}

/* paperclip indicator (top-right) */
.paperclip{
  position:absolute; right:8px; top:6px; width:18px; height:34px;
  display:block;
}
.paperclip svg{width:18px; height:34px}

/* calendar-style stamp (upcoming) */
.cal-stamp{
  position:absolute; right:10px; top:8px; width:30px; height:34px;
  background:#fff8e6; border:1px solid #b3a27e; border-radius:3px;
  display:flex; flex-direction:column; align-items:center; line-height:1;
  font-family:monospace; font-size:8px; color:#8a7a5a;
}
.cal-stamp .cal-day{font-size:15px; font-weight:bold; color:var(--accent); margin-top:1px}
.days-left{
  display:inline-block; margin-top:3px; font-size:10.5px;
  font-family:monospace; color:#5f533e; background:var(--card-muted);
  border:1px solid #b9a87f; border-radius:8px; padding:0 5px;
}

/* completed cards: muted bg + rubber stamp */
.cardlist li.completed{
  background:linear-gradient(180deg,#e7dbc0,#dccfae);
  filter:saturate(.5) brightness(.97);
  opacity:.9;
}
.completed .c-client{color:#6b5f4a}
.completed .c-project{color:#847762}
.completed .date-stamp{color:#8f5a3a}
.rubber{
  position:absolute; left:16px; top:38%; pointer-events:none; z-index:2;
  color:#8a6f4d; font-family:'Courier New',monospace; font-weight:bold;
  font-size:17px; letter-spacing:2px; opacity:.5;
  transform:rotate(-9deg); text-shadow:1px 1px 0 #fff;
  white-space:nowrap;
}

/* --- empty states --- */
.empty{
  display:none; text-align:center; color:#d8c9a8; font-style:italic;
  font-family:Georgia,serif; font-size:15px; margin:30px 0; padding:14px;
  border:1px dashed rgba(255,255,255,.3); border-radius:6px;
}
.empty.show{display:block}

/* --- FAB --- */
.fab{
  position:fixed; right:16px; bottom:calc(72px + var(--safe-bottom));
  width:54px; height:54px; border-radius:50%; border:3px solid var(--wood-light);
  background:var(--accent); color:#fff; font-size:30px; line-height:1;
  cursor:pointer; box-shadow:0 4px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.3);
  z-index:10;
}
.fab:active{transform:scale(.92)}

/* --- bottom tab bar: colored index card tabs --- */
.tabbar{
  flex:0 0 auto; display:flex; gap:2px;
  padding:8px 8px;
  padding-bottom:calc(8px + var(--safe-bottom));
  background:rgba(60,40,22,.4);
}
.tab{
  flex:1 1 0; height:52px; cursor:pointer; border:none;
  font-family:Georgia,serif; font-size:13px; font-weight:bold;
  color:var(--ink); padding:4px 2px;
  transform:translateY(0); transition:transform .12s, filter .12s, box-shadow .12s;
}
.tab--red{background:#c03a2e; color:#fff}
.tab--yellow{background:#e2c23f}
.tab--green{background:#3f8a4a; color:#fff}
.tab--brown{background:#7a6a4a; color:#fff}

.tab.active{
  transform:translateY(-3px);
  box-shadow:0 4px 6px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.4);
  filter:brightness(1.08);
  z-index:3;
}
.tab:not(.active){
  filter:brightness(.82) saturate(.75);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}

/* --- search --- */
.searchwrap{margin:2px 0 10px; position:relative}
.search{
  width:100%; padding:10px 12px; border-radius:18px; border:1px solid #cbbf96;
  background:var(--card); color:var(--ink); font-family:Georgia,serif; font-size:14px;
}
.search:focus{outline:none; box-shadow:0 0 0 2px var(--accent)}

/* --- modal overlay --- */
.overlay{
  position:fixed; inset:0; display:none; z-index:50;
  background:rgba(30,18,8,.55);
  padding:16px;
  padding-top:calc(16px + env(safe-area-inset-top,0px));
  align-items:flex-start; justify-content:center;
}
.overlay.show{display:flex}
.form,.about{
  background:var(--card); border:2px solid #b3a27e; border-radius:8px;
  box-shadow:0 6px 14px rgba(0,0,0,.5);
  padding:18px 16px; width:100%; max-width:400px; max-height:92%;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.form h2{margin:0 0 12px; font-family:Georgia,serif; font-size:20px; color:var(--ink)}
.form label{display:block; margin:6px 0 10px; font-weight:bold; font-size:13px}
.form input[type=text],.form input[type=date],.form select{
  display:block; width:100%; margin-top:5px; padding:11px 10px;
  border:1px solid #b9a87f; border-radius:4px; background:#fffdf4; color:var(--ink);
  font-family:Georgia,serif; font-size:15px;
}
.form select{font-family:Georgia,serif}
.form input:focus,.form select:focus{outline:none; box-shadow:0 0 0 2px var(--accent)}
.form-errors{color:var(--accent); font-size:12.5px; margin:4px 0}
.form-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:8px}
.btn{
  padding:10px 16px; border:1px solid #b3a27e; border-radius:4px;
  background:var(--card); color:var(--ink); font-family:Georgia,serif; font-size:14px; cursor:pointer;
}
.btn--primary{background:var(--accent); color:#fff; border-color:var(--accent)}

.about h2{margin:0 0 10px; text-align:center; font-size:24px; font-family:Georgia,serif}
.about p{margin:0 0 14px; font-size:14px; line-height:1.5; color:#5f533e}
.about .btn{display:block; margin:0 auto}