/* Anti-Design — Brutalist experimental style */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
body{
  font-family:'Courier New',Courier,monospace;
  font-weight:700;
  background:#f0f0f0;
  color:#000;
  line-height:1.4;
  -webkit-font-smoothing:antialiased
}
::selection{background:#ff0;color:#000}
img{image-rendering:auto}

.container{max-width:80rem;margin:0 auto;padding:0 1.5rem}

/* ===== NAV ===== */
header{
  position:sticky;top:0;z-index:50;
  background:#fff;
  border-bottom:4px solid #000
}
nav{
  display:flex;align-items:center;justify-content:space-between;
  height:4rem;max-width:72rem;margin:0 auto;padding:0 1.5rem
}
.logo{
  font-weight:900;font-size:1.25rem;text-transform:uppercase;
  letter-spacing:-.02em;color:#000;text-decoration:none;
  transition:all .1s
}
.logo:hover{color:#ff006e}
.nav-links{display:flex;gap:0}
.nav-links a{
  font-weight:900;font-size:.8rem;text-transform:uppercase;
  color:#000;text-decoration:none;
  padding:.5rem .75rem;
  border:4px solid transparent;
  transition:all .1s
}
.nav-links a:hover{border-color:#000;background:#ff0}
.nav-links a.active{background:#000;color:#fff;border-color:#000}
.mobile-menu-btn{
  display:none;
  background:none;border:4px solid #000;
  color:#000;cursor:pointer;padding:.5rem .625rem;
  font-weight:900;font-size:1.25rem;line-height:1;
  transition:all .1s
}
.mobile-menu-btn:hover{background:#ff0}
@media(max-width:768px){
  .nav-links{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    background:#fff;
    border-bottom:4px solid #000;
    padding:1rem;flex-direction:column;gap:.25rem
  }
  .nav-links.open{display:flex}
  .mobile-menu-btn{display:block}
}

/* ===== MAIN ===== */
main{min-height:calc(100vh - 8rem)}

/* ===== PAGE HEADER ===== */
.page-header{
  padding:3rem 0 2rem;
  text-align:center;
  border-bottom:4px solid #000;
  margin-bottom:2.5rem;
  background:#fff
}
.page-header h1{
  font-weight:900;font-size:2.5rem;
  text-transform:uppercase;letter-spacing:-.02em;
  margin-bottom:.5rem
}
.page-header h1 span{color:#ff006e}
.page-header .subtitle{
  font-weight:700;font-size:1rem;
  color:#000;max-width:500px;margin:0 auto
}

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.75rem 1.5rem;
  font-weight:900;font-size:.85rem;
  text-transform:uppercase;
  border:4px solid #000;
  text-decoration:none;cursor:pointer;
  transition:all .1s;
  background:#fff;color:#000
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 #000;background:#ff0}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #000}
.btn-primary{background:#ff006e;color:#fff}
.btn-primary:hover{background:#000;color:#fff;box-shadow:4px 4px 0 #ff006e}
.btn-outline{background:#fff;color:#000}
.btn-outline:hover{background:#000;color:#fff;box-shadow:4px 4px 0 #ff006e}
.btn-ghost{border-color:#000;background:transparent}
.btn-ghost:hover{background:#ff0;border-color:#000}

/* ===== CARDS ===== */
.card{
  display:block;padding:1.5rem;
  background:#fff;
  border:4px solid #000;
  text-decoration:none;color:inherit;
  transition:all .1s
}
.card:hover{transform:translate(-2px,-2px);box-shadow:2px 2px 0 #000;background:#ff0}
.card-title{
  font-weight:900;font-size:1.125rem;
  text-transform:uppercase;letter-spacing:-.01em;
  margin-bottom:.5rem;transition:color .1s
}
.card:hover .card-title{color:#ff006e}
.card-desc{font-size:.85rem;color:#000;line-height:1.5;font-weight:700}

/* ===== TAGS ===== */
.tag{
  display:inline-block;padding:.25rem .5rem;
  background:#fff;border:3px solid #000;
  font-size:.75rem;font-weight:900;color:#000
}
.tag-brand{background:#ff006e;color:#fff;border-color:#000}

/* ===== GRID ===== */
.grid{display:grid;gap:1.25rem}
.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
@media(min-width:640px){
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:768px){
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
}

/* ===== FOOTER ===== */
footer{
  background:#fff;color:#000;
  padding:2rem 0;text-align:center;
  border-top:4px solid #000;
  border-bottom:4px solid #000;
  margin-top:3rem;
  font-weight:700;font-size:.8rem
}
footer a{color:#ff006e;font-weight:900;text-decoration:none;transition:color .1s}
footer a:hover{color:#000;background:#ff0}
.filing-badge{display:inline-block;padding:.2rem .5rem;border:3px solid #000;font-size:.65rem;font-weight:700;background:#fff;color:#000;margin-top:.5rem}
footer .sep{margin:0 .5rem;color:#000;font-weight:900}

/* ===== FORM ELEMENTS ===== */
input,textarea,select{
  background:#fff;
  border:4px solid #000;
  padding:.625rem .875rem;
  font-family:'Courier New',Courier,monospace;
  font-weight:700;font-size:.85rem;color:#000;
  transition:all .1s
}
input:focus,textarea:focus,select:focus{
  outline:none;
  border-color:#00f;
  box-shadow:4px 4px 0 #00f
}

/* ===== PROSE ===== */
.prose{max-width:48rem;margin:0 auto}
.prose h1,.prose h2,.prose h3{font-weight:900;text-transform:uppercase;letter-spacing:-.01em}
.prose h1{font-size:1.5rem;margin:2rem 0 1rem}
.prose h2{font-size:1.25rem;margin:1.5rem 0 .75rem}
.prose h3{font-size:1rem;margin:1.25rem 0 .5rem}
.prose p{margin-bottom:1rem;color:#000;font-size:.9rem;font-weight:700}
.prose ul,.prose ol{margin-bottom:1rem;padding-left:1.5rem;color:#000;font-size:.9rem;font-weight:700}
.prose li{margin-bottom:.375rem}
.prose code{background:#fff;padding:.125rem .375rem;font-size:.8rem;border:2px solid #000}
.prose pre{background:#fff;padding:1rem;border:4px solid #000;overflow-x:auto;margin-bottom:1rem}
.prose pre code{background:none;padding:0;border:none}
.prose blockquote{border:4px solid #ff006e;padding:.75rem 1rem;margin-bottom:1rem;color:#000;font-weight:700;background:#fff}

/* ===== SCROLL TO TOP ===== */
.scroll-to-top{
  position:fixed;bottom:1.5rem;right:1.5rem;
  width:48px;height:48px;
  background:#000;border:4px solid #000;
  color:#fff;cursor:pointer;
  display:grid;place-items:center;text-align:center;
  font-weight:900;font-size:1.5rem;
  opacity:0;visibility:hidden;
  transition:all .1s;z-index:100
}
.scroll-to-top.visible{opacity:1;visibility:visible}
.scroll-to-top:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 #ff006e;background:#ff006e}

/* ===== FOCUS ===== */
:focus-visible{outline:4px solid #00f;outline-offset:2px}

/* ===== SKIP LINK ===== */
.skip-link{
  position:absolute;top:-100%;left:0;
  background:#ff0;color:#000;padding:.5rem 1rem;
  z-index:1000;font-weight:900;border:4px solid #000
}
.skip-link:focus{top:0}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#f0f0f0}
::-webkit-scrollbar-thumb{background:#000;border:2px solid #f0f0f0}

/* ===== ANIMATIONS ===== */
@keyframes popIn{from{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
.pop-in{animation:popIn .1s ease-out}
.slide-up{animation:slideUp .15s ease-out}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ===== TOAST ===== */
.toast{
  position:fixed;bottom:2rem;left:50%;transform:translateX(-50%);
  background:#fff;color:#000;
  padding:.75rem 1.5rem;
  border:4px solid #000;
  font-weight:900;font-size:.85rem;
  z-index:9999;
  box-shadow:2px 2px 0 #000
}

/* ===== SKELETON ===== */
.skeleton{background:#fff;border:4px solid #000;min-height:1rem}
.skeleton-text{height:1rem;margin-bottom:.75rem}
.skeleton-text.short{width:60%}
.skeleton-card{height:200px}

/* ===== STATS BAR ===== */
.stats-bar{
  display:flex;gap:0;margin-bottom:1.5rem;
  border:4px solid #000;background:#fff
}
.stat-item{text-align:center;flex:1;padding:1rem;border-right:4px solid #000}
.stat-item:last-child{border-right:none}
.stat-num{font-weight:900;font-size:1.75rem;color:#ff006e;line-height:1}
.stat-label{font-size:.7rem;font-weight:900;text-transform:uppercase;color:#000;margin-top:.25rem}

/* ===== DIFFICULTY ===== */
.difficulty{padding:.2rem .5rem;font-size:.7rem;font-weight:900;text-transform:uppercase;border:3px solid #000}
.difficulty.easy{background:#2ecc71;color:#000}
.difficulty.medium{background:#ff0;color:#000}
.difficulty.hard{background:#ff006e;color:#fff}

/* ===== COPY BTN ===== */
.copy-btn{
  padding:.375rem .75rem;
  background:#fff;border:4px solid #000;
  color:#000;cursor:pointer;
  font-weight:900;font-size:.75rem;text-transform:uppercase;
  transition:all .1s
}
.copy-btn:hover{background:#000;color:#fff;transform:translate(-1px,-1px);box-shadow:4px 4px 0 #ff006e}

/* ===== RETRY ===== */
.retry-btn{
  padding:.5rem 1rem;
  background:#fff;border:4px solid #000;
  font-weight:900;font-size:.8rem;text-transform:uppercase;cursor:pointer;
  transition:all .1s
}
.retry-btn:hover{background:#ff0;transform:translate(-1px,-1px);box-shadow:4px 4px 0 #000}

/* ===== ADMIN LAYOUT ===== */
.admin-layout{display:flex;gap:1.5rem;min-height:calc(100vh-200px)}
.admin-sidebar{width:200px;flex-shrink:0}
.admin-sidebar .nav-item{
  display:block;width:100%;padding:.625rem 1rem;
  background:none;border:4px solid transparent;
  color:#000;font-weight:900;
  font-size:.8rem;text-align:left;cursor:pointer;
  transition:all .1s;margin-bottom:.25rem;text-transform:uppercase
}
.admin-sidebar .nav-item:hover{border-color:#000;background:#ff0}
.admin-sidebar .nav-item.active{background:#000;color:#fff;border-color:#000}
.admin-content{flex:1;min-width:0}
.admin-card{
  background:#fff;border:4px solid #000;padding:1.25rem;margin-bottom:1.5rem
}
.admin-card h3{font-weight:900;font-size:.9rem;text-transform:uppercase;margin-bottom:1rem;color:#000}
.form-group{margin-bottom:1rem}
.form-group label{display:block;font-size:.7rem;font-weight:900;margin-bottom:.375rem;color:#000;text-transform:uppercase}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.inline-form{display:flex;gap:.5rem;align-items:end;flex-wrap:wrap}
.inline-form .form-group{margin-bottom:0;flex:1;min-width:120px}
.admin-table{width:100%;border-collapse:collapse;font-size:.8rem}
.admin-table th{padding:.5rem .75rem;text-align:left;border-bottom:4px solid #000;color:#000;font-weight:900;font-size:.65rem;text-transform:uppercase}
.admin-table td{padding:.5rem .75rem;border-bottom:2px solid #000;font-weight:700}
.admin-table tr:hover td{background:#ff0}
.empty-admin{text-align:center;padding:2rem;color:#000;font-weight:900;font-size:.85rem}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
  .container{padding:0 1rem}
  .page-header h1{font-size:1.75rem}
  .stats-bar{flex-direction:column}
  .stat-item{border-right:none;border-bottom:4px solid #000}
  .stat-item:last-child{border-bottom:none}
  .admin-layout{flex-direction:column}
  .admin-sidebar{width:100%;display:flex;flex-wrap:wrap;gap:.25rem}
  .admin-sidebar .nav-item{width:auto;padding:.5rem .75rem;font-size:.75rem}
  .form-row{grid-template-columns:1fr}
}
@media print{header,footer,.mobile-menu-btn,.scroll-to-top{display:none!important}}

/* ===== ANTI-DESIGN CURSOR ===== */
.ad-cursor{
  position:fixed;z-index:999999;pointer-events:none;
  width:16px;height:16px;background:#ff0;border:4px solid #000;
  display:flex;align-items:center;justify-content:center;
  transform:translate(-50%,-50%);line-height:1;
  transition:none;box-shadow:2px 2px 0 #000
}
.ad-cursor.hover{width:22px;height:22px;background:#ff006e;box-shadow:2px 2px 0 #000}
.ad-stamp{
  position:fixed;z-index:999998;pointer-events:none;
  width:28px;height:28px;background:#ff0;border:4px solid #000;
  box-shadow:2px 2px 0 #000;
  transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;
  transition:none;line-height:1
}
.diamond-shape{width:6px;height:6px;background:#000;clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%)}
.ad-cursor.hover .diamond-shape{background:#fff}
.ad-stamp .diamond-shape{width:10px;height:10px}

/* ===== AUTH BOX ===== */
.auth-screen{display:grid;place-items:center;text-align:center;min-height:60vh}
.auth-box{background:#fff;border:4px solid #000;padding:2.5rem;width:100%;max-width:380px;box-shadow:2px 2px 0 #000}
.auth-box h1{font-weight:900;font-size:1rem;text-transform:uppercase;text-align:center;margin-bottom:.5rem}
.auth-box p{font-weight:700;font-size:.8rem;color:#000;text-align:center;margin-bottom:1.5rem}
.auth-box .btn{width:100%;justify-content:center}