*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
* { font-family: 'Inter', system-ui, sans-serif; }

:root {
  --bg:        #f0f4ff;
  --surface:   #ffffff;
  --surface2:  #f4f7ff;
  --surface3:  #e8eeff;
  --border:    rgba(79,70,229,0.13);
  --border-md: rgba(79,70,229,0.28);
  --border-hi: rgba(79,70,229,0.5);
  --text:      #1e1b4b;
  --text-mu:   #5b5ea6;
  --text-hi:   #9ca3af;
  --accent:    #4f46e5;
  --accent-dk: #3730a3;
  --accent-bg: #eef2ff;
  --green:     #059669;
  --green-bg:  #ecfdf5;
  --red:       #dc2626;
  --red-bg:    #fef2f2;
  --amber:     #b45309;
  --amber-bg:  #fffbeb;
  --orange:    #c2410c;
  --orange-bg: #fff7ed;
  --r-sm: 8px; --r: 12px; --r-lg: 16px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #0c0b18;
    --surface:   #16142a;
    --surface2:  #1e1c34;
    --surface3:  #272544;
    --border:    rgba(139,92,246,0.18);
    --border-md: rgba(139,92,246,0.36);
    --border-hi: rgba(139,92,246,0.6);
    --text:      #ede9fe;
    --text-mu:   #a78bfa;
    --text-hi:   #6d28d9;
    --accent:    #818cf8;
    --accent-dk: #6366f1;
    --accent-bg: #1e1b4b;
    --green:     #34d399;
    --green-bg:  #064e3b;
    --red:       #f87171;
    --red-bg:    #450a0a;
    --amber:     #fbbf24;
    --amber-bg:  #451a03;
    --orange:    #fb923c;
    --orange-bg: #431407;
  }
}

body { background: var(--bg); color: var(--text); min-height: 100vh; }

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: 0 2px 10px rgba(0,0,0,0.05); transition: border-color .18s, box-shadow .18s;
}
.card:hover { border-color: var(--border-md); box-shadow: 0 6px 20px rgba(0,0,0,0.08); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--r-sm); font-size: 13px; font-weight: 500;
  cursor: pointer; border: 1px solid var(--border-md); background: var(--surface);
  color: var(--text); transition: background .13s, border-color .13s, transform .1s;
  white-space: nowrap; line-height: 1;
}
.btn:hover:not(:disabled) { background: var(--surface2); border-color: var(--border-hi); }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { opacity: 0.42; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover:not(:disabled) { background: var(--accent-dk); border-color: var(--accent-dk); }
.btn-success { background: var(--green); color: #fff; border-color: var(--green); }
.btn-success:hover:not(:disabled) { filter: brightness(0.88); }
.btn-danger  { background: var(--red-bg); color: var(--red); border-color: var(--red); }

.input {
  width: 100%; padding: 7px 11px; border: 1px solid var(--border-md);
  border-radius: var(--r-sm); background: var(--surface2); color: var(--text);
  font-size: 13px; outline: none; transition: border-color .14s, box-shadow .14s;
}
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79,70,229,0.1); }
.input::placeholder { color: var(--text-hi); }
select.input { cursor: pointer; }
.lbl { font-size: 11.5px; font-weight: 500; color: var(--text-mu); margin-bottom: 4px; display: block; }

input[type="range"] {
  flex: 1; height: 4px; border-radius: 4px; appearance: none;
  background: var(--surface3); outline: none; cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none; width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent); cursor: pointer; border: 2px solid var(--surface);
  box-shadow: 0 1px 4px rgba(79,70,229,0.4);
}

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 20px;
}
.b-blue   { background: var(--accent-bg); color: var(--accent); }
.b-green  { background: var(--green-bg);  color: var(--green); }
.b-amber  { background: var(--amber-bg);  color: var(--amber); }
.b-orange { background: var(--orange-bg); color: var(--orange); }
.b-red    { background: var(--red-bg);    color: var(--red); }

.chip {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 5px 10px;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--text-mu);
}
.chip strong { color: var(--text); font-weight: 600; }

.prog-track { height: 6px; background: var(--surface3); border-radius: 10px; overflow: hidden; }
.prog-fill  { height: 100%; background: var(--accent); border-radius: 10px; transition: width .12s ease; }
.prog-fill.done { background: var(--green); }

.mem-track { height: 5px; background: var(--surface3); border-radius: 10px; overflow: hidden; }
.mem-fill  { height: 100%; border-radius: 10px; transition: width .3s, background .3s; }

.dropzone {
  border: 2px dashed var(--border-hi); border-radius: var(--r-lg);
  background: var(--surface); cursor: pointer; transition: background .18s, border-color .18s;
}
.dropzone:hover, .dropzone.drag-over { background: var(--accent-bg); border-color: var(--accent); }

#video { display: block; width: 100%; max-height: 400px; object-fit: contain; background: #000; border-radius: var(--r); }

.ph { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding-bottom: 11px; border-bottom: 1px solid var(--border); }
.ph-icon { width: 27px; height: 27px; background: var(--accent-bg); color: var(--accent);
           border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.ph h2 { font-size: 13.5px; font-weight: 600; color: var(--text); }

.frame-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden; position: relative;
  transition: transform .14s, box-shadow .14s, border-color .14s;
  animation: popIn .18s ease-out;
}
.frame-card:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0,0,0,0.1); border-color: var(--border-hi); }
@keyframes popIn { from { opacity:0; transform:scale(0.93) } to { opacity:1; transform:scale(1) } }

.f-img { width:100%; height:110px; object-fit:cover; background:var(--surface3); display:block; cursor:pointer; }
.f-ov  { position:absolute; top:0; left:0; right:0; height:110px;
         background:linear-gradient(to bottom,rgba(0,0,0,0) 50%,rgba(0,0,0,0.45));
         opacity:0; transition:opacity .14s; pointer-events:none; }
.frame-card:hover .f-ov { opacity:1; }
.f-acts { position:absolute; top:5px; right:5px; display:flex; gap:3px;
          opacity:0; transition:opacity .14s; }
.frame-card:hover .f-acts { opacity:1; }
.ia { width:24px; height:24px; border-radius:5px; border:none; cursor:pointer;
      display:flex; align-items:center; justify-content:center; font-size:9px; }
.ia-dl  { background:var(--accent); color:#fff; }
.ia-cp  { background:rgba(0,0,0,0.55); color:#fff; }
.ia-del { background:var(--red); color:#fff; }

.toast-wrap { position:fixed; bottom:20px; right:20px; z-index:9999;
              display:flex; flex-direction:column; gap:7px; pointer-events:none; }
.toast {
  background:var(--surface); border:1px solid var(--border-md); border-radius:var(--r-sm);
  padding:9px 14px; font-size:12.5px; font-weight:500; color:var(--text);
  box-shadow:0 6px 20px rgba(0,0,0,0.12); display:flex; align-items:center; gap:7px;
  pointer-events:auto; max-width:300px; animation:tIn .18s ease-out;
}
.toast.success { border-color:var(--green); color:var(--green); }
.toast.error   { border-color:var(--red);   color:var(--red);   }
.toast.info    { border-color:var(--accent); color:var(--accent);}
.toast.warning { border-color:var(--amber);  color:var(--amber); }
@keyframes tIn  { from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)} }
@keyframes tOut { from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(16px)} }

.spinner { width:13px; height:13px; border:2px solid rgba(255,255,255,0.3);
           border-top-color:#fff; border-radius:50%; animation:spin .65s linear infinite; flex-shrink:0; }
@keyframes spin { to { transform:rotate(360deg) } }

.row  { display:flex; align-items:center; gap:8px; }
.g2   { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.info-note {
  font-size:11.5px; color:var(--text-mu); padding:7px 10px;
  background:var(--surface2); border-radius:var(--r-sm); border:1px solid var(--border);
  line-height:1.5;
}

.site-head {
  position: sticky; top: 0; z-index: 100;
  display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 18px; padding: 12px 14px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(8px);
}

.site-head__brand,
.site-head__title-row,
.site-head__actions,
.site-foot__top,
.site-foot__links {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}

.site-head__logo {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; text-decoration: none;
  box-shadow: 0 8px 20px rgba(79,70,229,0.18);
}

.site-head__copy { display: flex; flex-direction: column; gap: 3px; }
.site-head__title { font-size: 20px; font-weight: 700; color: var(--text); }
.site-head__tagline { font-size: 11.5px; color: var(--text-mu); }
.site-head__actions { justify-content: flex-end; }

.site-foot {
  margin-top: 40px; padding: 20px 10px 6px;
  border-top: 1px solid var(--border);
}

.site-foot__top {
  justify-content: space-between; align-items: flex-start; gap: 16px;
  margin-bottom: 14px;
}

.site-foot__brand { max-width: 560px; }
.site-foot__title {
  font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 6px;
}
.site-foot__text {
  font-size: 12px; line-height: 1.6; color: var(--text-mu);
}

.site-foot__links {
  justify-content: flex-end;
}

.site-foot__bottom {
  padding-top: 10px; text-align: center;
  font-size: 13px; color: var(--text-mu);
}

.site-foot__bottom-link {
  color: var(--accent); text-decoration: none; font-weight: 600;
}

@media (max-width: 760px) {
  .site-head,
  .site-foot__top {
    flex-direction: column; align-items: flex-start;
  }

  .site-head__actions,
  .site-foot__links {
    justify-content: flex-start;
  }
}