*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --color-bg:#fff;
  --color-text:#0a0a0a;
  --color-muted:#888;
  --color-border:#d0d0d0;
  --font:"Space Grotesk",sans-serif;
  --font-mono:"Space Mono",monospace;
}

html{font-size:16px}
body{
  font-family:var(--font);
  color:var(--color-text);
  background:var(--color-bg);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

/* ---- HEADER ---- */
header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:2rem 2.5rem;
}
.logo{
  font-family:var(--font-mono);
  font-size:.85rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--color-text);
}
.header-right{display:flex;align-items:center;gap:1.2rem}
.header-tag{
  font-family:var(--font-mono);
  font-size:.72rem;
  color:var(--color-muted);
  letter-spacing:.06em;
}
.header-link{
  font-family:var(--font-mono);
  font-size:.72rem;
  color:var(--color-muted);
  letter-spacing:.06em;
  text-decoration:none;
  text-transform:uppercase;
  transition:color .2s;
}
.header-link:hover{color:var(--color-text)}

/* ---- DAILY GRID ---- */
.daily-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:0;
  padding:0 2.5rem 2.5rem;
}

.tile{
  position:relative;
  display:block;
  aspect-ratio:1 / 1.4142;   /* DIN A portrait */
  border:1px solid var(--color-border);
  margin-top:-1px;
  margin-left:-1px;
  overflow:hidden;
  text-decoration:none;
  color:var(--color-text);
  background:var(--color-bg);
  transition:transform .35s cubic-bezier(.23,1,.32,1),
             box-shadow .35s cubic-bezier(.23,1,.32,1);
}
.tile img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  opacity:0;
  transition:opacity .5s ease;
}
.tile img.loaded{opacity:1}
.tile:hover{
  transform:scale(1.04);
  box-shadow:0 20px 60px rgba(0,0,0,.12),0 0 0 1px var(--color-text);
  z-index:10;
  border-color:var(--color-text);
}
.tile .tile-date{
  position:absolute;
  left:0;bottom:0;
  z-index:2;
  font-family:var(--font-mono);
  font-size:.62rem;
  letter-spacing:.08em;
  color:var(--color-text);
  background:rgba(255,255,255,.9);
  padding:.35rem .55rem;
  border-top:1px solid var(--color-border);
  border-right:1px solid var(--color-border);
}
.tile .tile-kind{
  position:absolute;
  right:.5rem;top:.5rem;
  z-index:2;
  font-family:var(--font-mono);
  font-size:.55rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--color-muted);
  background:rgba(255,255,255,.85);
  padding:.2rem .4rem;
}

/* sentinel + empty/loading states */
.sentinel{height:1px}
.state{
  font-family:var(--font-mono);
  font-size:.72rem;
  color:var(--color-muted);
  letter-spacing:.06em;
  padding:2rem 2.5rem;
  text-align:center;
}

/* ---- FORMS (login / register / admin) ---- */
.panel{
  max-width:520px;
  margin:0 auto;
  padding:0 2.5rem 3rem;
}
.card{
  border:1px solid var(--color-border);
  padding:2.2rem;
}
.card h1{
  font-size:1.6rem;
  font-weight:300;
  letter-spacing:-.02em;
  margin-bottom:.4rem;
}
.card .sub{
  font-family:var(--font-mono);
  font-size:.65rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--color-muted);
  margin-bottom:1.6rem;
}
label{
  display:block;
  font-family:var(--font-mono);
  font-size:.62rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--color-muted);
  margin:1.2rem 0 .5rem;
}
input[type=text],input[type=url],input[type=date],input[type=password],select{
  width:100%;
  font-family:var(--font);
  font-size:1rem;
  color:var(--color-text);
  background:var(--color-bg);
  border:1px solid var(--color-border);
  padding:.7rem .8rem;
  outline:none;
  transition:border-color .2s;
}
input:focus,select:focus{border-color:var(--color-text)}
input[type=file]{
  width:100%;
  font-family:var(--font-mono);
  font-size:.75rem;
  color:var(--color-muted);
  padding:.4rem 0;
}
.hint{
  font-family:var(--font-mono);
  font-size:.62rem;
  color:var(--color-muted);
  letter-spacing:.02em;
  margin-top:.4rem;
  line-height:1.5;
}
button,.btn{
  display:inline-block;
  width:100%;
  margin-top:1.8rem;
  font-family:var(--font-mono);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--color-bg);
  background:var(--color-text);
  border:1px solid var(--color-text);
  padding:.9rem 1rem;
  cursor:pointer;
  transition:background .2s,color .2s;
}
button:hover,.btn:hover{background:var(--color-bg);color:var(--color-text)}
button:disabled{opacity:.4;cursor:not-allowed}
button.secondary{background:var(--color-bg);color:var(--color-text)}
button.secondary:hover{background:var(--color-text);color:var(--color-bg)}

.msg{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.02em;
  margin-top:1.2rem;
  line-height:1.5;
  min-height:1rem;
}
.msg.err{color:#c0392b}
.msg.ok{color:#1a7a3a}

/* preview area in admin */
.preview-wrap{
  display:flex;
  gap:1.2rem;
  align-items:flex-start;
  margin-top:1rem;
}
.preview-box{
  width:120px;
  aspect-ratio:1 / 1.4142;
  border:1px solid var(--color-border);
  overflow:hidden;
  flex-shrink:0;
  background:#fafafa;
}
.preview-box img{width:100%;height:100%;object-fit:cover;display:block}

.radio-row{display:flex;gap:0;margin-top:.4rem}
.radio-row label{
  flex:1;
  margin:0;
  text-align:center;
  padding:.7rem .4rem;
  border:1px solid var(--color-border);
  margin-left:-1px;
  cursor:pointer;
  color:var(--color-muted);
  transition:all .2s;
}
.radio-row label.active{
  color:var(--color-bg);
  background:var(--color-text);
  border-color:var(--color-text);
}
.radio-row input{display:none}

/* ---- RESPONSIVE ---- */
@media (max-width:1024px){
  header{padding:1.5rem}
  .daily-grid{padding:0 1.5rem 1.5rem}
  .panel{padding:0 1.5rem 2rem}
}
@media (max-width:600px){
  header{padding:1.2rem 1rem}
  .daily-grid{
    grid-template-columns:repeat(2,1fr);
    padding:0 1rem 1rem;
  }
  .panel{padding:0 1rem 2rem}
  .tile:hover{transform:scale(1.02)}
}