:root{
  --bg:#18181b; --card:#27272a; --muted:#a1a1aa; --line:#3f3f46; --accent:#d97706; --danger:#dc2626; --ok:#16a34a; --blue:#2563eb;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:#fff}
a{color:inherit}
.header{background:linear-gradient(90deg,#d97706,#ea580c);padding:1.2rem;text-align:center}
.header h1{font-size:1.25rem;font-weight:900}
.main{padding:1rem;max-width:980px;margin:0 auto}
.card{background:var(--card);padding:1.2rem;border-radius:0.75rem;margin:0.9rem 0;border-left:4px solid var(--accent)}
.row{display:flex;gap:0.75rem;flex-wrap:wrap}
.btn{background:var(--accent);color:#fff;border:none;padding:0.9rem;border-radius:0.55rem;font-size:1rem;font-weight:800;width:100%;margin:0.45rem 0;cursor:pointer}
.btn:active{opacity:.85}
.btn-back{background:#52525b}
.btn-del{background:var(--danger)}
.btn-ok{background:var(--ok)}
.btn-blue{background:var(--blue)}
.btn-small{padding:0.5rem 0.8rem;font-size:0.9rem;width:auto}
.inp,select,textarea{width:100%;background:var(--card);border:2px solid var(--line);border-radius:0.5rem;padding:0.75rem;color:#fff;font-size:1rem;margin:0.5rem 0}
.inp:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}
.label{display:block;margin:0.9rem 0 0.4rem;font-weight:700}
.badge{display:inline-block;padding:0.15rem 0.5rem;border-radius:999px;font-weight:800;font-size:0.8rem}
.badge-red{background:rgba(220,38,38,.9)}
.badge-yellow{background:rgba(245,158,11,.9);color:#111827}
.badge-gray{background:rgba(82,82,91,.9)}
.badge-green{background:rgba(22,163,74,.9)}
.alert{position:fixed;top:0.8rem;left:0.8rem;right:0.8rem;padding:0.85rem;border-radius:0.55rem;z-index:2000;text-align:center;font-weight:800}
.alert-success{background:var(--ok)}
.alert-error{background:var(--danger)}
.alert-info{background:var(--blue)}
.hr{height:1px;background:var(--line);margin:1rem 0}
.small{color:var(--muted);font-size:0.9rem;line-height:1.45}
.kv{color:var(--muted);margin-top:0.4rem}
.upload{border:2px dashed #52525b;border-radius:0.6rem;padding:1.2rem;text-align:center;background:var(--card);cursor:pointer}
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:0.9rem;margin:0.9rem 0}
.photo{position:relative;cursor:pointer;background:var(--card);border-radius:0.75rem;overflow:hidden;border:2px solid var(--line);transition:all .2s}
.photo:hover{border-color:var(--accent);transform:translateY(-2px)}
.photo img{width:100%;height:150px;object-fit:cover;display:block}
.photo-no{position:absolute;top:0.5rem;left:0.5rem;background:rgba(217,119,6,0.9);color:#fff;padding:0.25rem 0.5rem;border-radius:0.25rem;font-weight:900;font-size:0.75rem}
.photo-stage{position:absolute;top:0.5rem;right:0.5rem;background:rgba(0,0,0,0.7);color:#fff;padding:0.25rem 0.5rem;border-radius:0.25rem;font-size:0.7rem}
.photo-actions{position:absolute;bottom:0.5rem;left:0.5rem;right:0.5rem;display:flex;justify-content:space-between;gap:0.5rem}
.photo-actions button{flex:1}
.modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.9);z-index:3000;align-items:center;justify-content:center;padding:1rem;overflow:auto}
.modal.active{display:flex}
.modal-content{background:var(--card);border-radius:1rem;padding:1.2rem;max-width:560px;width:100%;max-height:92vh;overflow:auto}
.modal-img{max-width:96vw;max-height:72vh;object-fit:contain;border-radius:0.6rem}
.modal-close{position:absolute;top:1rem;right:1rem;background:#fff;color:#000;border:none;border-radius:50%;width:3rem;height:3rem;font-size:1.5rem;cursor:pointer;font-weight:900}
.viewer{background:linear-gradient(135deg,#fafafa,#e5e5e5);min-height:100vh;color:#000}
.viewer-top{padding:1rem}
.viewer-card{background:#fff;padding:1rem;border-radius:1rem;box-shadow:0 4px 20px rgba(0,0,0,0.1);margin:1rem}
.viewer-img-wrap{display:flex;justify-content:center;align-items:center;padding:0.5rem}
.viewer-img{max-width:95vw;max-height:70vh;border-radius:0.8rem}
.viewer-detail{background:rgba(0,0,0,0.8);color:#fff;padding:0.8rem;border-radius:0.6rem;margin-top:0.8rem;font-size:0.95rem;line-height:1.6}
.viewer-detail strong{color:#fbbf24}
.navbtn{position:fixed;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.9);color:#000;border:none;border-radius:50%;width:3rem;height:3rem;font-size:1.5rem;cursor:pointer;font-weight:900}
.navprev{left:0.8rem}
.navnext{right:0.8rem}