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

/* ─── Темы ─────────────────────────────────────────────────────────────── */
:root{
  --bg:#000;--bg2:#1c1c1e;--bg3:#2c2c2e;
  --card:#1c1c1e;--sep:rgba(255,255,255,0.08);
  --text:#fff;--text2:rgba(255,255,255,0.55);--text3:rgba(255,255,255,0.28);
  --accent:#f7a800;--blue:#0a84ff;--green:#30d158;--red:#ff453a;
  --inp:#2c2c2e;--inp-b:rgba(255,255,255,0.12);
  --shadow:0 20px 60px rgba(0,0,0,0.8);
  --blur:rgba(0,0,0,0.75);
}
[data-theme="light"]{
  --bg:#f2f2f7;--bg2:#fff;--bg3:#e5e5ea;
  --card:#fff;--sep:rgba(0,0,0,0.08);
  --text:#000;--text2:rgba(0,0,0,0.5);--text3:rgba(0,0,0,0.28);
  --accent:#e09500;--blue:#007aff;--green:#34c759;--red:#ff3b30;
  --inp:#f2f2f7;--inp-b:rgba(0,0,0,0.1);
  --shadow:0 8px 32px rgba(0,0,0,0.08);
  --blur:rgba(242,242,247,0.88);
}

body{
  font-family:-apple-system,'SF Pro Display',system-ui,sans-serif;
  background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s,color .25s;
  min-height:100vh;
}

/* ─── Кнопка темы ──────────────────────────────────────────────────────── */
.theme-toggle{
  position:fixed;bottom:16px;left:16px;z-index:9999;
  width:36px;height:36px;
  background:var(--bg2);border:1px solid var(--sep);
  border-radius:50%;font-size:1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow);
  transition:background .2s,transform .1s;
}
.theme-toggle:active{transform:scale(.9);}

/* ─── Страница входа ───────────────────────────────────────────────────── */
.login-page{
  min-height:100vh;display:flex;
  align-items:center;justify-content:center;
  padding:20px;background:var(--bg);
}
.login-card{
  background:var(--card);border-radius:24px;
  padding:40px 28px 32px;width:100%;max-width:340px;
  box-shadow:var(--shadow);border:1px solid var(--sep);
}
.login-brand{
  display:flex;flex-direction:column;
  align-items:center;gap:10px;margin-bottom:28px;
}
.login-logo{
  width:90px;height:90px;
  border-radius:50%;object-fit:cover;
  background:transparent;
  box-shadow:0 6px 24px rgba(247,168,0,0.3);
}
.login-name{
  font-size:1.5rem;font-weight:800;letter-spacing:1px;color:var(--text);
  line-height:1;
}
.login-name-accent{color:var(--accent);}
.login-sub{font-size:0.65rem;color:var(--text3);letter-spacing:2px;text-transform:uppercase;}
.login-title{font-size:0.85rem;color:var(--text2);text-align:center;margin-bottom:18px;font-weight:400;}
.login-footer{text-align:center;margin-top:16px;font-size:0.65rem;color:var(--text3);letter-spacing:0.5px;}

/* ─── Поля ─────────────────────────────────────────────────────────────── */
.field{margin-bottom:12px;}
.field label{
  display:block;font-size:0.65rem;font-weight:600;
  color:var(--text3);margin-bottom:5px;
  letter-spacing:1px;text-transform:uppercase;
}
.field input,.field textarea,.field select{
  width:100%;padding:13px 14px;
  background:var(--inp);border:1px solid var(--inp-b);
  border-radius:12px;color:var(--text);
  font-size:0.95rem;font-family:inherit;outline:none;
  transition:border-color .2s;
}
.field input:focus,.field textarea:focus{border-color:var(--accent);}

/* ─── Кнопки ───────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:11px 18px;border:none;border-radius:12px;
  font-size:0.88rem;font-weight:600;font-family:inherit;
  cursor:pointer;text-decoration:none;
  transition:opacity .15s,transform .1s;
}
.btn:active{opacity:.85;transform:scale(.98);}
.btn-primary{background:var(--accent);color:#fff;}
.btn-blue{background:var(--blue);color:#fff;}
.btn-ghost{background:transparent;color:var(--blue);}
.btn-danger{background:var(--red);color:#fff;}
.btn-full{width:100%;padding:14px;font-size:0.95rem;font-weight:700;border-radius:13px;}
.btn-sm{padding:6px 12px;font-size:0.75rem;border-radius:9px;}

/* ─── Шапка ────────────────────────────────────────────────────────────── */
.topbar{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;
  background:var(--blur);border-bottom:1px solid var(--sep);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
.topbar-brand{display:flex;align-items:center;gap:8px;text-decoration:none;}
.topbar-logo{width:28px;height:28px;border-radius:50%;object-fit:cover;}
.topbar-name{font-size:0.95rem;font-weight:800;letter-spacing:1px;color:var(--text);}
.topbar-name-accent{color:var(--accent);}
.topbar-right{display:flex;align-items:center;gap:10px;}
.topbar-user{font-size:0.78rem;color:var(--text2);}

/* ─── Контейнер ────────────────────────────────────────────────────────── */
.container{max-width:860px;margin:0 auto;padding:20px 16px 110px;}
.container--narrow{max-width:540px;}
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.page-title{font-size:1.8rem;font-weight:800;letter-spacing:-0.5px;}
.back-link{display:inline-block;font-size:0.78rem;color:var(--blue);text-decoration:none;margin-bottom:6px;}

/* ─── Карточки ─────────────────────────────────────────────────────────── */
.card,.form-card{
  background:var(--card);border:1px solid var(--sep);
  border-radius:16px;padding:18px;
}
.form-actions{display:flex;gap:8px;margin-top:14px;}

/* ─── Проекты ──────────────────────────────────────────────────────────── */
.project-list{display:flex;flex-direction:column;gap:8px;}
.project-card{
  background:var(--card);border:1px solid var(--sep);
  border-radius:14px;padding:14px 16px;
  display:flex;align-items:center;gap:12px;
  cursor:pointer;text-decoration:none;color:inherit;
  transition:transform .15s,box-shadow .15s;
}
.project-card:hover{transform:translateY(-1px);box-shadow:var(--shadow);}
.project-icon{
  width:42px;height:42px;border-radius:10px;
  background:var(--bg3);display:flex;align-items:center;
  justify-content:center;font-size:1.3rem;flex-shrink:0;
}
.project-info{flex:1;min-width:0;}
.project-name{font-size:0.92rem;font-weight:600;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.project-addr{font-size:0.75rem;color:var(--text2);margin-bottom:6px;}
.chevron{color:var(--text3);font-size:1rem;}

/* ─── Прогресс ─────────────────────────────────────────────────────────── */
.progress-row{display:flex;align-items:center;gap:8px;}
.progress-bar{flex:1;height:3px;background:var(--bg3);border-radius:2px;overflow:hidden;}
.progress-fill{height:100%;border-radius:2px;background:var(--accent);transition:width .3s;}
.progress-pct{font-size:0.7rem;color:var(--text3);font-weight:600;min-width:26px;}

/* ─── Этапы ────────────────────────────────────────────────────────────── */
.stage-card{background:var(--card);border:1px solid var(--sep);border-radius:14px;padding:16px;margin-bottom:10px;}
.stage-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.stage-name{font-size:0.95rem;font-weight:700;}
.stage-actions{display:flex;gap:6px;}

/* ─── Фото ─────────────────────────────────────────────────────────────── */
.photos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px;margin-top:10px;}
.photo-item{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:1;}
.photo-item img{width:100%;height:100%;object-fit:cover;}
.photo-delete{position:absolute;top:4px;right:4px;background:rgba(0,0,0,0.6);color:#fff;border:none;border-radius:6px;padding:3px 7px;font-size:0.65rem;cursor:pointer;}

/* ─── Загрузка ─────────────────────────────────────────────────────────── */
.upload-area{
  border:2px dashed var(--inp-b);border-radius:12px;
  padding:20px;text-align:center;cursor:pointer;
  transition:border-color .2s,background .2s;margin-top:10px;
}
.upload-area:hover,.upload-area.dragover{border-color:var(--accent);background:rgba(247,168,0,0.05);}
.upload-area-text{font-size:0.82rem;color:var(--text2);}

/* ─── Уведомления ──────────────────────────────────────────────────────── */
.alert{padding:10px 14px;border-radius:10px;font-size:0.82rem;margin-bottom:12px;}
.alert-success{background:rgba(48,209,88,0.12);color:var(--green);border:1px solid rgba(48,209,88,0.25);}
.alert-error{background:rgba(255,69,58,0.12);color:var(--red);border:1px solid rgba(255,69,58,0.25);}

/* ─── Бейджи ───────────────────────────────────────────────────────────── */
.badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:0.68rem;font-weight:600;}
.badge-active{background:rgba(48,209,88,0.12);color:var(--green);}
.badge-super{background:rgba(247,168,0,0.12);color:var(--accent);}

/* ─── Пусто ────────────────────────────────────────────────────────────── */
.empty-state{text-align:center;padding:50px 20px;color:var(--text2);}
.empty-state-icon{font-size:2.5rem;margin-bottom:12px;display:block;}
.empty-state h2{font-size:1.1rem;font-weight:700;color:var(--text);margin-bottom:6px;}
.empty-state p{font-size:0.82rem;color:var(--text2);margin-bottom:18px;}

/* ─── Пользователи ─────────────────────────────────────────────────────── */
.users-list{display:flex;flex-direction:column;gap:8px;}
.user-card{
  background:var(--card);border:1px solid var(--sep);
  border-radius:12px;padding:12px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.user-info{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.user-name{font-weight:600;font-size:0.9rem;}
.user-email{font-size:0.78rem;color:var(--text2);}
.user-date{font-size:0.7rem;color:var(--text3);}

/* ─── Публичная страница ───────────────────────────────────────────────── */
.public-header{text-align:center;padding:28px 16px 20px;border-bottom:1px solid var(--sep);}
.public-title{font-size:1.4rem;font-weight:800;margin-bottom:4px;}
.public-addr{font-size:0.82rem;color:var(--text2);}
.public-progress{font-size:2.2rem;font-weight:800;color:var(--accent);margin-top:14px;}
.public-progress-label{font-size:0.7rem;color:var(--text3);margin-top:2px;}

/* ─── Виджет ONE LINE ──────────────────────────────────────────────────── */
.brand-widget{
  position:fixed;bottom:16px;right:16px;
  background:var(--blur);border:1px solid var(--sep);
  border-radius:14px;padding:10px 12px;
  display:flex;align-items:center;gap:10px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  z-index:998;max-width:200px;
}
.bw-logo{width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.bw-info{display:flex;flex-direction:column;gap:1px;min-width:0;}
.bw-name{font-size:0.62rem;font-weight:800;letter-spacing:0.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bw-sub{font-size:0.56rem;color:var(--accent);font-weight:600;}
.bw-phone{font-size:0.6rem;color:var(--text2);text-decoration:none;display:block;margin-top:2px;white-space:nowrap;}
.bw-socials{display:flex;gap:8px;margin-top:2px;}
.bw-socials a{font-size:0.58rem;color:var(--text3);text-decoration:none;font-weight:500;}
.bw-socials a:hover{color:var(--accent);}

/* ─── Адаптив ──────────────────────────────────────────────────────────── */
@media(max-width:600px){
  .container{padding:14px 12px 100px;}
  .page-title{font-size:1.4rem;}
  .photos-grid{grid-template-columns:repeat(auto-fill,minmax(90px,1fr));}
  .topbar-user{display:none;}
  .brand-widget{max-width:170px;padding:8px 10px;}
  .bw-name{font-size:0.58rem;}
}

/* ─── Brand Widget (popup) ──────────────────────────────────────────────── */
.bw-wrap {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 998;
}

.bw-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--sep);
  background: var(--blur);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .2s, border-color .2s;
}
.bw-btn:active { transform: scale(.92); }
.bw-btn--active { border-color: var(--accent); }

.bw-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bw-popup {
  position: absolute;
  bottom: 56px;
  right: 0;
  background: var(--card);
  border: 1px solid var(--sep);
  border-radius: 16px;
  padding: 14px 16px;
  min-width: 200px;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(8px) scale(.95);
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.bw-popup--open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

.bw-popup-name {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.bw-popup-sub {
  font-size: 0.7rem;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 10px;
}
.bw-popup-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text2);
  transition: background .15s, color .15s;
  margin-bottom: 4px;
}
.bw-popup-link:hover { background: var(--bg3); color: var(--text); }
.bw-popup-tg { color: #2aabee; }
.bw-popup-tg:hover { background: rgba(42,171,238,0.12); color: #2aabee; }
.bw-popup-vk { color: #4a76a8; }
.bw-popup-vk:hover { background: rgba(74,118,168,0.12); color: #4a76a8; }