:root{
  --accent:#f5c518;
  --primary:#f3ede2;
  --secondary:#b2a99d;
  --graphite:#3a3833;
  --line:#e3dac9;
  --danger:#d64541;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{height:100%; margin:0;}
body{
  font-family:'Caveat','Segoe Print','Comic Sans MS',cursive;
  color:var(--graphite);
  background:#c9c3b5;
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}

/* ============ DRYWALL PANEL BACKGROUND ============ */
#app{
  height:100%;
  padding-bottom:calc(64px + env(safe-area-inset-bottom));
  background-color:#f0ead9;
  background-image:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.55) 0, transparent 40%),
    radial-gradient(circle at 70% 80%, rgba(255,255,255,.4) 0, transparent 45%),
    radial-gradient(circle at 12% 70%, rgba(0,0,0,.04) 2px, transparent 3px),
    radial-gradient(circle at 55% 30%, rgba(0,0,0,.05) 2px, transparent 3px),
    radial-gradient(circle at 85% 55%, rgba(0,0,0,.04) 2px, transparent 3px),
    radial-gradient(circle at 35% 88%, rgba(0,0,0,.05) 2px, transparent 3px),
    linear-gradient(rgba(0,0,0,.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.015) 1px, transparent 1px);
  background-size:auto,auto,80px 90px,90px 70px,70px 110px,95px 80px,220px 220px,220px 220px;
}

/* drywall seams */
#app::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    linear-gradient(rgba(120,110,95,.06) 2px, transparent 3px) 0 0 / 100% 120px,
    linear-gradient(90deg, rgba(120,110,95,.06) 2px, transparent 3px) 0 0 / 160px 100%;
  mix-blend-mode:multiply;
}
/* screw dimples */
#app::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(circle at 20px 26px, rgba(90,82,68,.18) 4px, rgba(160,150,130,.12) 5px, transparent 7px),
    radial-gradient(circle at 140px 90px, rgba(90,82,68,.18) 4px, rgba(160,150,130,.12) 5px, transparent 7px);
  background-size:160px 120px; background-position:0 0;
}

#view{position:relative; z-index:1; padding:14px 14px 20px;}

/* ============ TOPBAR ============ */
#topbar{position:relative; z-index:2; padding:calc(env(safe-area-inset-top) + 12px) 16px 6px;}
.brand{
  font-size:34px; line-height:1; margin:0;
  font-weight:700; letter-spacing:.5px;
  color:#4a443a;
}
.brand::after{
  content:""; display:block; height:3px; width:64px; margin-top:2px;
  background:linear-gradient(90deg,var(--accent),#e8b50a); border-radius:2px;
  opacity:.9; transform:rotate(-1deg);
}
#room-filter-wrap{margin:10px 0 2px;}
.filter-select{
  width:100%; font-family:inherit; font-size:20px; padding:8px 10px;
  border:2px dashed var(--secondary); border-radius:8px; background:rgba(255,255,255,.35);
  color:var(--graphite); outline:none;
}

/* ============ TABS ============ */
#tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  display:flex; height:calc(60px + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:var(--primary); box-shadow:0 -4px 10px rgba(0,0,0,.15);
}
.tab{
  flex:1; border:none; background:transparent; margin:0; padding:0;
  font-family:inherit; font-size:19px; font-weight:700; cursor:pointer;
  color:rgba(60,56,48,.85);
  position:relative; overflow:hidden;
}
/* painter's tape strips */
.tab::before{
  content:""; position:absolute; inset:6px 3px; border-radius:3px;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.10) 0 3px, rgba(0,0,0,.05) 3px 6px),
    linear-gradient(rgba(0,0,0,.03), rgba(0,0,0,.06));
  background-size:auto,100% 100%;
  box-shadow:inset 0 0 6px rgba(0,0,0,.12);
}
.tab:nth-child(1)::before{background-color:#4a90d9;}
.tab:nth-child(2)::before{background-color:#5aaf5f;}
.tab:nth-child(3)::before{background-color:#c05bd6;}
.tab:nth-child(4)::before{background-color:#e0b23f;}
.tab span{position:relative; z-index:1;}
.tab.active{color:#2b2721; text-shadow:0 1px 0 rgba(255,255,255,.6);}
.tab.active::before{
  box-shadow:0 4px 12px rgba(0,0,0,.35);
  transform:translateY(-2px);
}
.tab.active::after{
  content:""; position:absolute; top:4px; right:-6px; width:22px; height:22px;
  background:var(--primary); transform:rotate(8deg);
  border-radius:2px; box-shadow:0 2px 6px rgba(0,0,0,.3);
  /* peeled corner revealing bright strip underneath */
}
.tab.active .peel-under{display:block;}
.peel-under{display:none; position:absolute; top:8px; right:0; width:16px; height:16px; background:#eaf3ff; transform:rotate(8deg);}

/* ============ DASHBOARD ============ */
#view.dash .counters{position:relative; margin:6px 0 4px; padding-left:6px;}
.counter-row{display:flex; gap:26px;}
.counter{position:relative;}
.counter .num{
  font-size:88px; line-height:.9; font-weight:700; color:var(--danger);
  text-shadow:0 0 3px rgba(180,40,30,.25);
  transform:rotate(-4deg); display:block;
  background-image:repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 2px, transparent 2px 5px);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.counter .lbl{font-size:20px; color:#5a5346; letter-spacing:.5px;}
.chalk{position:absolute; left:-10px; top:-6px; font-size:26px; color:#b04538; opacity:.7;}
.quick-add{
  width:100%; margin:18px 0 20px; padding:16px; font-family:inherit; font-size:24px; font-weight:700;
  background:var(--accent); color:#3a3312; border:none; border-radius:10px;
  box-shadow:0 5px 0 #d19a0b, 0 8px 14px rgba(0,0,0,.18);
  cursor:pointer; transform:rotate(-1deg);
}
.quick-add:active{transform:translateY(3px) rotate(-1deg); box-shadow:0 2px 0 #d19a0b;}
.section-title{font-size:26px; margin:14px 2px 8px; color:#4a443a; border-bottom:2px solid rgba(178,169,157,.5); padding-bottom:2px;}

/* ============ LIST & ITEMS ============ */
.note{
  position:relative; background:rgba(255,253,246,.8);
  border-radius:6px; padding:12px 42px 12px 14px; margin:10px 0;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
  transform:rotate(-.4deg); touch-action:pan-y;
  overflow:hidden; cursor:pointer;
}
.note:nth-child(odd){transform:rotate(.4deg);}
.note .name{font-size:24px; font-weight:700; color:var(--graphite); word-break:break-word;}
.note .meta{font-size:18px; color:#6d6558; margin-top:2px;}
.note .strike{
  position:absolute; left:8px; right:8px; top:48%; height:3px;
  background:#4a443a; border-radius:2px; transform:rotate(-1deg);
  box-shadow:0 1px 1px rgba(255,255,255,.4);
}
.note .pin{
  position:absolute; top:50%; right:12px; width:16px; height:16px; border-radius:50%;
  transform:translateY(-50%) rotate(0deg);
  box-shadow:0 2px 4px rgba(0,0,0,.35), inset 0 -2px 3px rgba(0,0,0,.2), inset 0 2px 2px rgba(255,255,255,.5);
}
.pin.high{background:#e53e3e;}
.pin.medium{background:var(--accent);}
.pin.low{background:#4caf50;}
.note.high{background:#fff8e0;}
.done .name{color:#9a9184;}
.done .meta{color:#a39a8c;}
.note .tape-rip{position:absolute; left:0; right:0; top:0; height:4px; background:linear-gradient(90deg,rgba(0,0,0,.08),transparent);}

/* swipe reveal (done action) */
.note .swipe-done{
  position:absolute; top:0; right:-80px; width:80px; height:100%;
  display:flex; align-items:center; justify-content:center;
  background:var(--danger); color:#fff; font-size:18px; font-weight:700;
  transition:right .2s ease; border-radius:0 6px 6px 0;
}
.note.ripped .swipe-done{right:0;}
.note .swipe-hit{position:absolute; top:0; right:0; height:100%; width:0; background:var(--danger);}

/* ============ ROOMS ============ */
.room-card{
  background:rgba(255,253,246,.85); border-radius:8px; padding:14px; margin:10px 0;
  box-shadow:0 2px 6px rgba(0,0,0,.12); cursor:pointer; transform:rotate(-.4deg);
}
.room-card:nth-child(even){transform:rotate(.4deg);}
.room-card .rname{font-size:26px; font-weight:700;}
.room-card .rmeta{font-size:18px; color:#6d6558;}
.room-bar{height:12px; background:#e5dcc9; border-radius:6px; margin-top:8px; overflow:hidden;}
.room-bar i{display:block; height:100%; background:var(--accent); border-radius:6px;}

/* ============ EMPTY / MISC ============ */
.empty{
  text-align:center; padding:50px 16px; color:#8d8474; font-size:22px;
}
.empty .scribble{font-size:60px; opacity:.25; line-height:1;}
.empty small{display:block; margin-top:6px; font-size:18px;}
.back-btn{
  font-family:inherit; font-size:20px; border:2px dashed var(--secondary);
  background:transparent; border-radius:8px; padding:8px 14px; margin-bottom:8px; cursor:pointer; color:var(--graphite);
}

/* ============ MODAL ============ */
#modal{
  position:fixed; inset:0; z-index:40; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(30,28,24,.5);
}
#modal.hidden{display:none;}
.modal-card{
  width:100%; max-width:520px; background:#f6f1e4; border-radius:16px 16px 0 0;
  padding:20px 18px calc(20px + env(safe-area-inset-bottom));
  box-shadow:0 -6px 20px rgba(0,0,0,.3);
  animation:slideup .22s ease;
}
@keyframes slideup{from{transform:translateY(40%);opacity:0;}to{transform:none;opacity:1;}}
.modal-card h2{font-size:30px; margin:0 0 14px; color:#3f3a30;}
#punch-form label{display:block; font-size:20px; font-weight:700; color:#4a443a; margin-bottom:12px;}
#punch-form input,#punch-form select{
  width:100%; margin-top:4px; font-family:inherit; font-size:22px; font-weight:400;
  padding:10px 12px; border:2px dashed var(--secondary); border-radius:8px;
  background:#fffdf7; color:var(--graphite); outline:none;
}
#punch-form input:focus,#punch-form select:focus{border-color:var(--graphite);}
.row{display:flex; gap:10px; margin-top:6px;}
.btn{
  flex:1; font-family:inherit; font-size:22px; font-weight:700; padding:12px; border-radius:10px; cursor:pointer; border:none;
}
.btn.ghost{background:#e0d8c7; color:#5a5346;}
.btn.accent{background:var(--accent); color:#3a3312; box-shadow:0 4px 0 #d19a0b;}
.btn.accent:active{transform:translateY(3px); box-shadow:0 1px 0 #d19a0b;}
.btn.danger{background:var(--danger); color:#fff; box-shadow:0 4px 0 #a83430;}
.btn.danger:active{transform:translateY(3px); box-shadow:0 1px 0 #a83430;}
.err{color:var(--danger); font-size:18px; margin-top:-6px; display:none;}
.show{display:block !important;}

/* ============ TOAST ============ */
#toast{
  position:fixed; left:50%; bottom:calc(76px + env(safe-area-inset-bottom)); transform:translateX(-50%);
  z-index:50; background:rgba(40,36,30,.9); color:#fff; padding:10px 18px; border-radius:20px; font-size:19px;
  transition:opacity .25s; pointer-events:none; max-width:90%; text-align:center;
}
#toast.hidden{opacity:0;}

/* ============ UNDO / TIMESTAMPS ============ */
.undo-btn{
  font-family:inherit; font-size:17px; border:none; background:var(--accent); color:#3a3312;
  border-radius:14px; padding:5px 12px; margin-left:6px; cursor:pointer; font-weight:700;
}

/* ============ SEARCH BAR ============ */
.search-wrap{display:flex; gap:8px; margin:6px 0 2px;}
.search-input{
  flex:1; font-family:inherit; font-size:21px; padding:9px 12px; border:2px dashed var(--secondary);
  border-radius:8px; background:rgba(255,255,255,.4); outline:none;
}
.search-input:focus{border-color:var(--graphite);}

.hidden{display:none !important;}

@media (min-width:640px){
  .modal-card{border-radius:16px; margin-bottom:10px;}
}