/* ===== Corkit - corkboard study wall ===== */
:root{
  --accent:#d14b38;
  --primary:#5c3a21;
  --secondary:#f5e6d3;
  --ink:#22303c;
  --cork-base:#b8875a;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);
  background:#3b2413;
  display:flex;
  flex-direction:column;
  overscroll-behavior:none;
}

/* Wooden frame border */
.frame{
  flex:1;
  display:flex;
  min-height:0;
  border:14px solid;
  border-image:linear-gradient(180deg,#7a4b24,#a06a35 30%,#5e3817 70%,#7a4b24) 1;
  box-shadow:inset 0 0 0 3px #2e1a0c, 0 6px 22px rgba(0,0,0,.45);
  position:relative;
  z-index:1;
}

/* --- CSS cork texture (no images) --- */
.cork-scroll{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding:18px 16px calc(120px + env(safe-area-inset-bottom));
  background-color:var(--cork-base);
  background-image:
    radial-gradient(circle at 22% 18%, rgba(90,58,25,.35) 0, rgba(90,58,25,0) 40%),
    radial-gradient(circle at 70% 40%, rgba(120,80,45,.35) 0, rgba(120,80,45,0) 45%),
    radial-gradient(circle at 45% 78%, rgba(70,44,18,.3) 0, rgba(70,44,18,0) 40%),
    radial-gradient(circle at 88% 70%, rgba(120,80,45,.28) 0, rgba(120,80,45,0) 42%),
    radial-gradient(rgba(0,0,0,.16) 1px, transparent 1.4px),
    radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.3px);
  background-size:100% 100%,100% 100%,100% 100%,100% 100%, 7px 7px, 9px 9px;
  background-position:0 0;
  scrollbar-width:thin;
}

/* ===== Headers ===== */
.brand-row{text-align:center;margin-bottom:16px;}
.app-title{
  font-family:Georgia,"Times New Roman",serif;
  font-size:2.4rem;
  color:var(--secondary);
  text-shadow:2px 2px 0 rgba(0,0,0,.35);
  letter-spacing:1px;
}
.app-sub{
  display:block;color:#e8d4b8;font-size:.75rem;
  letter-spacing:.3em;text-transform:uppercase;margin-top:-6px;
}
.tab-head{margin-bottom:14px;text-align:center;}
.tab-title{
  font-family:Georgia,serif;font-size:1.5rem;color:var(--secondary);
  text-shadow:1px 2px 0 rgba(0,0,0,.35);
}

/* ===== Dashboard enamel badge pins ===== */
.badges{display:flex;justify-content:center;gap:22px;margin-bottom:24px;}
.badge-pin{position:relative;width:118px;padding-top:26px;}
.pin-head{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:20px;height:26px;border-radius:50% 50% 45% 45%;
  background:radial-gradient(circle at 35% 30%,#fff,#c7c9ce 55%,#8b8e96);
  box-shadow:0 3px 4px rgba(0,0,0,.4);
  z-index:2;
}
.pin-head::after{
  content:"";position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);
  width:2px;height:14px;background:#6b6d72;
}
.badge-plate{
  background:radial-gradient(circle at 30% 20%,#eef0f4,#cfd2d9 70%);
  border:1px solid #9a9da6;
  border-radius:50%;
  width:118px;height:118px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:inset 0 3px 8px rgba(0,0,0,.22), 0 5px 9px rgba(0,0,0,.35);
}
.badge-num{
  font-size:2.6rem;font-weight:800;color:#fff;line-height:1;
  text-shadow:0 2px 0 rgba(0,0,0,.3);
}
.badge-label{
  margin-top:6px;font-size:.6rem;text-align:center;line-height:1.15;
  color:#6f6155;letter-spacing:.05em;text-transform:uppercase;
  font-weight:700;
}

.recent-title{text-align:center;margin-bottom:14px;}
.label-tag{
  display:inline-block;background:#f3e4cc;color:#5c3a21;
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  padding:5px 14px;border-radius:3px;
  box-shadow:1px 2px 3px rgba(0,0,0,.3);
  font-weight:700;
}
.recent-stack{display:flex;flex-direction:column;gap:14px;}

/* ===== Index cards ===== */
.card-list{display:flex;flex-direction:column;gap:16px;padding-bottom:6px;}
.mini-card{
  position:relative;background:#fbf7ec;border-radius:3px;
  box-shadow:0 4px 8px rgba(0,0,0,.35);
  padding:14px 16px 12px 14px;
  border-left:2px solid #e3d9c3;
}
.mini-card .mc-title{font-family:"Segoe Script","Comic Sans MS",cursive;font-size:1.05rem;color:#2a4a8f;}
.mini-card .mc-due{font-family:Georgia,serif;font-size:.78rem;color:#8a6b3f;}

/* Assignment card */
.card{
  position:relative;background:#fbf7ec;border-radius:3px;
  box-shadow:0 5px 10px rgba(0,0,0,.35);
  overflow:hidden;
}
.card-inner{
  position:relative;padding:16px 20px 16px 16px;
  background-image:
    repeating-linear-gradient(transparent 0, transparent 26px, #c9d4e6 26px, #c9d4e6 27px);
  background-position:left 8px;
  transition:transform .25s ease;
}
.card.done .card-inner{opacity:.6;}
.card.done{filter:grayscale(.35);}
.card-title{
  font-family:"Segoe Script","Comic Sans MS",cursive;
  font-size:1.18rem;color:#2a4a8f;line-height:1.25;
  word-break:break-word;
}
.card-subject{
  font-size:.78rem;color:#7a6a55;margin-top:2px;
}
.card-due{
  font-family:Georgia,serif;font-size:.86rem;color:#8a6b3f;
  margin-top:8px;
  background:rgba(255,255,255,.35);
  display:inline-block;padding:1px 6px;border-radius:2px;
  text-shadow:0 1px 0 rgba(255,255,255,.5);
}
.card-due.late-due{color:#b23b2a;font-weight:700;}
.card-status{
  font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  color:#a76a2a;margin-top:8px;font-weight:700;
}

/* paperclip top-right */
.clip{
  position:absolute;top:-6px;right:8px;width:18px;height:44px;
  border-radius:9px;
  border:3px solid;
  background:transparent;
  z-index:3;
  transform:rotate(6deg);
}
.clip.green{border-color:#3d9a4a;}
.clip.yellow{border-color:#d8a51a;}
.clip.blue{border-color:#3a6fd8;}
.clip.red{border-color:#cf3a2e;}
.clip.gold{border-color:#c9a227;}

/* card silver pin */
.card-pin{
  position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:12px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#f4f5f7,#b7bac1 60%,#7d8088);
  box-shadow:0 2px 3px rgba(0,0,0,.4);
  z-index:2;
}
.card-pin::after{content:"";position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:1.5px;height:8px;background:#6b6d72;}

/* swipe delete */
.swipe-wrap{position:relative;overflow:hidden;border-radius:3px;}
.delete-btn{
  position:absolute;top:0;right:0;bottom:0;width:82px;
  background:#cf3a2e;border:none;color:#fff;
  font-size:.72rem;font-weight:700;letter-spacing:.05em;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;
}
.delete-btn span{font-size:1.3rem;line-height:1;}
.card-inner{background-color:#fbf7ec;}

/* ===== Search ===== */
.search-wrap{margin-bottom:16px;}
.search-input{
  width:100%;padding:12px 14px;border-radius:22px;border:none;
  background:#f5e6d3;color:#3b2413;font-size:1rem;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.2);
}
.search-input::placeholder{color:#9a7d5a;}

/* ===== Forms ===== */
.form-card{
  position:relative;background:#fbf7ec;border-radius:4px;
  box-shadow:0 6px 12px rgba(0,0,0,.4);
  padding:30px 20px 20px;
}
.form-heading{
  font-family:"Segoe Script",cursive;color:#2a4a8f;
  font-size:1.5rem;margin-bottom:16px;text-align:center;
}
.field{display:block;margin-bottom:14px;}
.field span{
  display:block;font-size:.72rem;color:#7a6a55;
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:5px;font-weight:700;
}
.field input,.field select{
  width:100%;padding:12px;border:1px solid #d8cdb4;border-radius:6px;
  background:#fffdf6;font-size:1rem;color:#2a2a2a;
  -webkit-appearance:none;appearance:none;
}
.field select{background-image:linear-gradient(45deg,transparent 50%,#7a6a55 50%),linear-gradient(135deg,#7a6a55 50%,transparent 50%);background-repeat:no-repeat;background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;}
.form-error{color:#cf3a2e;font-size:.85rem;font-weight:700;margin:4px 0 10px;}
.btn-submit{
  width:100%;padding:14px;border:none;border-radius:8px;
  background:var(--accent);color:#fff;font-size:1rem;font-weight:700;
  box-shadow:0 3px 6px rgba(0,0,0,.3);margin-top:4px;
}
.btn-cancel{
  width:100%;padding:12px;border:none;border-radius:8px;
  background:#e3d9c3;color:#5c3a21;font-size:.95rem;font-weight:700;margin-top:8px;
}

/* ===== Overlay edit ===== */
.overlay{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end;justify-content:center;}
.overlay-backdrop{position:absolute;inset:0;background:rgba(30,15,5,.55);}
.edit-card{
  position:relative;z-index:2;width:100%;max-width:440px;
  margin:0 auto;border-radius:14px 14px 0 0;
  padding-bottom:calc(24px + env(safe-area-inset-bottom));
  animation:slideUp .28s ease;
  max-height:92vh;overflow-y:auto;
}
@keyframes slideUp{from{transform:translateY(40px);opacity:0;}to{transform:translateY(0);opacity:1;}}

/* ===== Empty state ===== */
.empty-state{
  text-align:center;color:#f5e6d3;padding:40px 20px;
  text-shadow:1px 2px 0 rgba(0,0,0,.3);
}
.empty-state p{font-size:1rem;line-height:1.6;}
.pushpin-illus{
  width:44px;height:52px;margin:0 auto 16px;
  border-radius:50% 50% 40% 40%;
  background:radial-gradient(circle at 35% 30%,#ff9c87,#d14b38 60%,#a33120);
  box-shadow:0 6px 8px rgba(0,0,0,.4);
  position:relative;
}
.pushpin-illus::after{
  content:"";position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);
  width:3px;height:18px;background:#7d8088;
}

/* ===== Bottom pushpin tab bar ===== */
.pin-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:flex;justify-content:space-around;align-items:flex-start;
  height:72px;
  padding:0 8px calc(env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(92,58,33,0) 0%,rgba(62,39,20,.9) 40%,rgba(48,29,14,.97) 100%);
}
.pin-tab{
  width:46px;height:46px;border-radius:50%;
  border:none;position:relative;margin-top:10px;
  cursor:pointer;
  box-shadow:0 2px 3px rgba(0,0,0,.4);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
  filter:saturate(.85);
}
.pin-tab::after{
  content:"";position:absolute;bottom:-12px;left:50%;transform:translateX(-50%);
  width:2.5px;height:12px;background:#3a3d42;
}
.pin-red{background:radial-gradient(circle at 34% 28%,#ff8a76,#d14b38 62%,#8f2d1f);}
.pin-blue{background:radial-gradient(circle at 34% 28%,#7ea7f0,#3a6fd8 62%,#24509e);}
.pin-green{background:radial-gradient(circle at 34% 28%,#86d98e,#3d9a4a 62%,#2a6d34);}
.pin-yellow{background:radial-gradient(circle at 34% 28%,#ffe28a,#d8a51a 62%,#a8780c);}

.pin-tab.active{
  transform:translateY(-6px) scale(1.06);
  filter:saturate(1);
  box-shadow:0 2px 2px rgba(0,0,0,.2), 0 0 0 3px rgba(255,255,255,.28), 0 8px 14px rgba(0,0,0,.5);
  background:linear-gradient(180deg,#f3f4f6 0%,#c6c9cf 20%,radial-gradient(#8f9299,#5d6068));
}
.pin-tab.active::after{height:10px;bottom:-10px;}
.pin-tab.inactive{filter:saturate(.7) blur(.4px);transform:translateY(0);}

@media(min-width:600px){
  .cork-scroll{max-width:520px;margin:0 auto;}
  .pin-bar{max-width:520px;left:50%;transform:translateX(-50%);}
  .overlay{left:50%;transform:translateX(-50%);width:100%;max-width:520px;}
}