/* ─── MIKI67 DETECTIVE THEME ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg-dark:#0F0624;
  --bg-card:#1E1040;
  --purple-pastel:#D8B4FE;
  --purple-medium:#C084FC;
  --gold:#F5B642;
  --text-primary:#F3E8FF;
  --text-secondary:#A78BFA;
  --text-muted:#7C6BA0;
  --border-subtle:rgba(216,180,254,0.15);
  --radius:16px
}

body{
  font-family:'Segoe UI','Sarabun',-apple-system,sans-serif;
  background:var(--bg-dark);
  color:var(--text-primary);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  position:relative;
  overflow-x:hidden
}

/* Purple ambient glow */
body::before{
  content:'';
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  background:
    radial-gradient(circle at 30% 40%,rgba(216,180,254,0.05) 0%,transparent 50%),
    radial-gradient(circle at 70% 60%,rgba(192,132,252,0.04) 0%,transparent 50%);
  pointer-events:none;z-index:0
}

/* Subtle rotating magnifying glass decor */
.deco-left{
  position:fixed;top:-20px;left:-40px;
  font-size:14rem;opacity:.025;
  pointer-events:none;z-index:0;
  animation:spin 40s linear infinite;
  user-select:none
}
.deco-right{
  position:fixed;bottom:-40px;right:-30px;
  font-size:12rem;opacity:.025;
  pointer-events:none;z-index:0;
  animation:spin 30s linear infinite reverse;
  user-select:none
}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* Top bar */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 24px;
  background:rgba(30,16,64,.85);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border-subtle);
  position:sticky;top:0;z-index:10
}
.topbar .brand{
  font-weight:700;
  font-size:1rem;
  color:var(--gold);
  text-decoration:none;
  letter-spacing:.03em
}
.topbar .brand:hover{color:var(--purple-pastel)}
.topbar .backlink{
  color:var(--text-muted);
  font-size:.85rem;
  text-decoration:none;
  display:flex;align-items:center;gap:4px
}
.topbar .backlink:hover{color:var(--purple-pastel)}

/* Page container */
.page{
  max-width:920px;
  margin:0 auto;
  padding:32px 20px 60px;
  position:relative;z-index:1
}

/* Hero / intro card */
.hero{
  padding:32px;
  margin-bottom:24px
}
.hero .eyebrow{
  color:var(--purple-medium);
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:.75rem;
  font-weight:600;
  margin-bottom:6px;
  display:flex;align-items:center;gap:6px
}
.hero h1{
  font-size:1.8rem;
  font-weight:700;
  margin-bottom:8px;
  background:linear-gradient(135deg,var(--purple-pastel),var(--purple-medium),var(--gold));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text
}
.hero .meta{
  color:var(--text-muted);
  font-size:.9rem;
  max-width:600px;
  line-height:1.5
}

/* Assignment grid */
.assignments{display:grid;gap:12px}

/* Assignment cards */
.assign-card{
  display:block;
  background:var(--bg-card);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius);
  padding:20px;
  text-decoration:none;
  transition:all .3s ease;
  animation:fade-up .5s ease-out backwards
}
.assign-card:nth-child(1){animation-delay:.05s}
.assign-card:nth-child(2){animation-delay:.1s}
.assign-card:nth-child(3){animation-delay:.15s}
.assign-card:nth-child(4){animation-delay:.2s}
.assign-card:nth-child(5){animation-delay:.25s}

@keyframes fade-up{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}

.assign-card:hover{
  border-color:var(--purple-medium);
  background:rgba(192,132,252,.08);
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(192,132,252,.15)
}
.assign-card .top{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:6px
}
.assign-card .no{
  font-size:.78rem;
  font-weight:700;
  color:var(--purple-medium);
  text-transform:uppercase;
  letter-spacing:.06em
}
.assign-card .status{
  font-size:.72rem;
  color:var(--text-muted);
  display:flex;
  align-items:center;
  gap:4px
}
.assign-card .dot{
  width:7px;height:7px;
  border-radius:50%;
  background:var(--gold);
  display:inline-block;
  animation:pulse 2s ease-in-out infinite
}
@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.6;transform:scale(1.3)}
}
.assign-card h3{
  font-size:1.1rem;
  font-weight:600;
  color:var(--text-primary);
  margin-bottom:4px
}
.assign-card p{
  font-size:.85rem;
  color:var(--text-muted)
}

/* Generic card */
.card{
  background:var(--bg-card);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius);
  padding:24px;
  margin-bottom:16px;
  animation:fade-up .5s ease-out backwards
}
.card h2{
  font-size:1.1rem;
  font-weight:600;
  color:var(--purple-pastel);
  margin-bottom:14px;
  display:flex;
  align-items:center;
  gap:8px
}
.card p{color:var(--text-secondary);font-size:.9rem}

/* Member list */
.memberlist{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:0
}
.memberlist li{
  background:rgba(216,180,254,.07);
  border:1px solid rgba(216,180,254,.12);
  border-radius:10px;
  padding:10px 16px;
  display:flex;
  flex-direction:column;
  font-size:.85rem
}
.memberlist li span:first-child{font-weight:600;color:var(--text-primary)}
.memberlist li span:last-child{color:var(--text-muted);font-size:.78rem}

/* Chips grid */
.grid{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  background:rgba(216,180,254,.06);
  border:1px solid rgba(216,180,254,.1);
  border-radius:10px;
  padding:8px 14px;
  display:flex;
  flex-direction:column;
  font-size:.85rem
}
.chip span{color:var(--text-muted);font-size:.72rem}
.chip strong{color:var(--text-primary)}

/* File cards */
.filecard{
  background:rgba(216,180,254,.04);
  border:1px solid var(--border-subtle);
  border-radius:10px;
  padding:14px;
  width:calc(50% - 5px);
  min-width:180px;
  flex:1;
  transition:border-color .2s
}
.filecard:hover{border-color:rgba(216,180,254,.3)}
.filecard.wide{width:100%}
.filecard img{
  max-width:100%;
  border-radius:6px;
  margin-bottom:8px;
  display:block;
  border:1px solid var(--border-subtle)
}
.filebody .filename{
  font-weight:600;
  font-size:.85rem;
  margin-bottom:2px;
  color:var(--text-primary)
}
.filebody .filetype{
  color:var(--text-muted);
  font-size:.72rem;
  margin-bottom:6px
}
.filecard .button{
  display:inline-block;
  padding:6px 14px;
  border-radius:8px;
  background:linear-gradient(135deg,var(--purple-medium),#9B6CE0);
  color:#fff;
  text-decoration:none;
  font-size:.78rem;
  font-weight:600;
  transition:all .2s
}
.filecard .button:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(192,132,252,.25)
}
.empty{
  color:var(--text-muted);
  font-size:.85rem;
  font-style:italic;
  padding:8px 0
}

/* Notes */
.note{
  background:rgba(216,180,254,.05);
  border-radius:8px;
  padding:10px 14px;
  margin-bottom:8px;
  font-size:.85rem;
  color:var(--text-muted)
}
.note strong{color:var(--text-primary)}
.note pre{
  font-family:inherit;
  white-space:pre-wrap;
  margin:0;
  color:var(--text-muted)
}
code{
  background:rgba(216,180,254,.08);
  padding:2px 6px;
  border-radius:4px;
  font-family:'Courier New',monospace;
  font-size:.85em;
  color:var(--purple-pastel)
}

/* Footer */
.footer{
  text-align:center;
  color:var(--text-muted);
  font-size:.8rem;
  padding:20px 0 8px;
  border-top:1px solid var(--border-subtle);
  margin-top:32px;
  opacity:.7
}

/* Small text */
.small{font-size:.72rem;color:var(--text-muted);margin-top:4px}

/* Badge tag (intake / status) */
.badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:rgba(216,180,254,.08);
  border:1px solid rgba(216,180,254,.12);
  border-radius:50px;
  padding:4px 12px;
  font-size:.72rem;
  color:var(--purple-pastel)
}
.badge-dot{
  width:5px;height:5px;
  background:var(--gold);
  border-radius:50%;
  animation:pulse 2s ease-in-out infinite;
  display:inline-block
}

/* Responsive */
@media(max-width:600px){
  .filecard{width:100%}
  .hero h1{font-size:1.4rem}
  .page{padding:20px 14px 40px}
  .hero,.card{padding:18px}
}