:root { --accent: #ff7a00; --bg: #ffffff; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--bg); color: #222; }
.container { max-width: 1000px; margin: 0 auto; padding: 20px; }
.page { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.stack { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.card { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 20px; box-shadow: 0 6px 20px rgba(0,0,0,0.06); position: relative; }
.grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 900px){ .grid { grid-template-columns: 1fr 1fr; } }
.title { font-size: 22px; margin: 0 0 16px; }
label { display: block; font-size: 14px; margin-bottom: 6px; }
input, select { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 10px; font-size: 14px; }
.row { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 600px){ .row-2 { grid-template-columns: 1fr 1fr; } }
.btn { display: inline-block; border: none; background: var(--accent); color: #fff; padding: 12px 16px; border-radius: 10px; font-weight: 600; cursor: pointer; }
.btn-outline { background: transparent; color: var(--accent); border: 2px solid var(--accent); }
.header { display:flex; align-items:center; justify-content:space-between; margin-bottom: 20px; }
.brand { display:flex; align-items:center; gap:10px; }
.logo { height: 36px; width: auto; display: block; }
.logo-lg { height: 96px; width: auto; display: block; }
.brand-dot { width:12px; height:12px; background:var(--accent); border-radius:50%; }
.tabs { display:flex; gap:10px; margin-bottom:10px; }
.muted { color:#666; font-size:13px; }
.error { color: #c00; font-size: 13px; margin-top: 6px; }
a { color: var(--accent); text-decoration: none; }
.dash { display:flex; min-height: 100vh; }
.sidebar { width: 260px; background:#fff; border-inline-start: 1px solid #eee; padding: 24px; display:flex; flex-direction:column; gap:16px; }
.side-header { display:flex; justify-content:center; }
.side-nav { display:flex; flex-direction:column; gap:8px; }
.side-link { padding: 10px 12px; border-radius:10px; color:#333; border:1px solid transparent; }
.side-link.active { background: rgba(255,122,0,0.08); border-color: #ffd2b0; color:#000; }
.side-footer { margin-top:auto; }
.content { flex:1; padding: 24px; }

.topbar { display:none; }
.menu-btn { background: var(--accent); color:#fff; border:none; padding:10px 14px; border-radius:10px; font-weight:600; }

@media (max-width: 900px){
  .topbar { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid #eee; }
  .dash { display:block; }
  .sidebar { position: fixed; top: 0; bottom: 0; right: 0; width: 80vw; max-width: 320px; transform: translateX(100%); transition: transform .25s ease; z-index: 1000; box-shadow: -12px 0 24px rgba(0,0,0,.08); }
  .sidebar-open .sidebar { transform: translateX(0); }
  .content { padding: 16px; }
  .overlay { position: fixed; inset: 0; background: rgba(0,0,0,.25); display: none; z-index: 999; }
  .sidebar-open .overlay { display: block; }
}

.hidden-banner { position: absolute; inset: 0; display:flex; align-items:center; justify-content:center; font-weight:800; font-size: 22px; color: rgba(0,0,0,.55); pointer-events:none; }
.expired-banner { position: absolute; inset: 0; display:flex; align-items:center; justify-content:center; font-weight:800; font-size: 22px; color: #d32f2f; pointer-events:none; }
.expired-ribbon { position:absolute; top:12px; right:-48px; width:200px; transform: rotate(-45deg); background:#d32f2f; color:#fff; text-align:center; font-weight:800; padding:4px 0; box-shadow: 0 2px 8px rgba(0,0,0,.12); pointer-events:none; }
.status-dot { width:10px; height:10px; border-radius:50%; display:inline-block; }
.status-dot.green { background:#2e7d32; }
.status-dot.red { background:#d32f2f; }
.photo-wrap { position: relative; width:70%; margin:8px auto; }
.expired-overlay { position:absolute; inset:0; background: rgba(211,47,47,.75); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size: 20px; border-radius:10px; pointer-events:none; }
.icon-btn { width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; padding:0; }