:root{
  --ink:#0B1220;
  --ink-soft:#4A5468;
  --paper:#F6F7F9;
  --panel:#FFFFFF;
  --line:#E2E5EA;
  --line-soft:#EDEFF2;
  --brand:#1F5EFF;
  --brand-soft:#EEF3FF;
  --success:#1AA36B;
  --danger:#E5484D;
  --radius:14px;
}

*{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter', -apple-system, sans-serif;
  min-height:100vh;
  min-height:100dvh; /* учитывает мобильные адресные строки браузера */
  display:flex;
  flex-direction:column;
  align-items:center;
  -webkit-font-smoothing:antialiased;
}

/* ===== Header ===== */

.header{
  width:100%;
  padding:16px 20px;
  padding-top:calc(16px + env(safe-area-inset-top)); /* под "чёлку"/шторку iOS */
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  background:var(--panel);
  position:sticky;
  top:0;
  z-index:10;
}

.logo{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  font-size:18px;
  color:var(--ink);
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:8px;
}

.logo svg{ display:block; flex-shrink:0; }

/* ===== Auth pages (login/register) ===== */

.container{
  width:100%;
  max-width:440px;
  margin:24px auto;
  padding:0 16px;
  flex:1;
  display:flex;
  align-items:center;
}

.card{
  width:100%;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px 20px;
}

.card h1{
  font-family:'Space Grotesk', sans-serif;
  font-size:22px;
  margin:0 0 6px;
  line-height:1.25;
}

.card p.subtitle{
  color:var(--ink-soft);
  margin:0 0 24px;
  font-size:14px;
  line-height:1.4;
}

label{
  display:block;
  font-size:13px;
  font-weight:500;
  margin-bottom:6px;
  color:var(--ink-soft);
}

input{
  width:100%;
  padding:14px;             /* повышенная высота тач-таргета для мобильных */
  border:1px solid var(--line);
  border-radius:10px;
  font-size:16px;           /* 16px минимум — иначе iOS Safari зумит при фокусе */
  font-family:inherit;
  margin-bottom:16px;
  background:var(--paper);
  color:var(--ink);
  -webkit-appearance:none;
}

input:focus{
  outline:none;
  border-color:var(--brand);
  background:var(--panel);
}

button{
  width:100%;
  padding:14px;             /* >= 44px по высоте вместе с line-height — тач-таргет */
  border:none;
  border-radius:10px;
  background:var(--brand);
  color:white;
  font-size:16px;
  font-weight:600;
  font-family:inherit;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

button:active{ opacity:0.85; }
button:hover{ opacity:0.92; }
button:disabled{ opacity:0.5; cursor:not-allowed; }

.link-row{
  margin-top:18px;
  text-align:center;
  font-size:14px;
  color:var(--ink-soft);
}

.link-row a{ color:var(--brand); text-decoration:none; font-weight:500; }

.error{
  background:#FDEDED;
  color:var(--danger);
  padding:12px 14px;
  border-radius:10px;
  font-size:14px;
  margin-bottom:16px;
  display:none;
  line-height:1.4;
}

.error.visible{ display:block; }

/* ===== Dashboard ===== */

.dash-container{
  width:100%;
  max-width:680px;
  margin:0 auto;
  padding:20px 16px 40px;
  flex:1;
}

.dash-container h1{
  font-family:'Space Grotesk', sans-serif;
  font-size:20px;
  margin:0 0 16px;
}

.status-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:20px;
  font-size:13px;
  font-weight:600;
}

.status-badge.active{ background:#E9F9F1; color:var(--success); }
.status-badge.expired{ background:#FDEDED; color:var(--danger); }
.status-badge.none{ background:var(--line-soft); color:var(--ink-soft); }

.status-badge .dot{
  width:7px; height:7px; border-radius:50%; background:currentColor; flex-shrink:0;
}

.dash-grid{
  display:grid;
  gap:12px;
  margin-top:12px;
}

/* Мобильная база: строка складывается в колонку, если не влезает */
.row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:16px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
}

.row .label{ font-size:13px; color:var(--ink-soft); }
.row .value{ font-size:15px; font-weight:600; }

.row .btn-secondary{
  /* На мобильном кнопка "Продлить" тянется на всю ширину под статусом,
     если строке не хватает места — так удобнее нажимать пальцем */
  flex:1 1 auto;
  min-width:120px;
}

.sync-link-box{
  padding:16px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  margin-top:12px;
}

.sync-link-box .label{ font-size:13px; color:var(--ink-soft); font-weight:500; }

.sync-link-box .link-value{
  display:flex;
  flex-direction:column;   /* на мобильном — поле и кнопка друг под другом */
  gap:8px;
  margin-top:12px;
}

.sync-link-box input{
  margin-bottom:0;
  font-family:'IBM Plex Mono', monospace;
  font-size:13px;
  word-break:break-all;
}

.btn-secondary{
  background:var(--brand-soft);
  color:var(--brand);
  width:auto;
  padding:12px 18px;
  white-space:nowrap;
  font-size:14px;
}

.plans-grid{
  display:grid;
  gap:10px;
  margin-top:16px;
}

.plan-card{
  padding:16px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.plan-card .plan-name{ font-weight:600; font-size:15px; }
.plan-card .plan-price{ color:var(--ink-soft); font-size:13px; margin-top:2px; }

.plan-card button{ width:auto; padding:10px 18px; font-size:14px; flex-shrink:0; }

.muted{ color:var(--ink-soft); font-size:13px; line-height:1.4; }

/* =========================================================
   Десктоп и планшеты — раскрываем макет, когда есть пространство
   ========================================================= */
@media (min-width: 640px){

  .header{ padding:20px 32px; }
  .logo{ font-size:20px; }

  .container{ margin:64px auto; padding:0 20px; }
  .card{ padding:32px; }
  .card h1{ font-size:24px; }

  input{ padding:11px 14px; font-size:15px; margin-bottom:18px; }
  button{ padding:12px; font-size:15px; }

  .dash-container{ margin:48px auto; padding:0 20px 40px; }
  .dash-container h1{ font-size:22px; }

  .row{ flex-wrap:nowrap; padding:16px 20px; }
  .row .btn-secondary{ flex:0 0 auto; min-width:0; }

  .sync-link-box{ padding:20px; }
  .sync-link-box .link-value{ flex-direction:row; }
  .sync-link-box input{ font-size:13px; }

  .plan-card{ padding:18px 20px; flex-wrap:nowrap; }
}

/* =========================================================
   Stat cards — сетка карточек вместо тонких полосок,
   эффективнее использует пространство на широких экранах
   ========================================================= */

.stats-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:16px;
}

.stat-card{
  padding:18px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
}

.stat-card .stat-label{
  font-size:13px;
  color:var(--ink-soft);
  margin-bottom:8px;
}

.stat-card .stat-value{
  font-size:20px;
  font-weight:700;
  font-family:'Space Grotesk', sans-serif;
}

.stat-card.wide{
  grid-column:1 / -1; /* занимает всю ширину ряда — для sync-link-box и пустого состояния */
}

@media (min-width: 640px){
  .dash-container{ max-width:840px; }
  .stats-grid{
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:16px;
  }
  .stat-card{ padding:22px; }
  .stat-card .stat-value{ font-size:24px; }

  .plans-grid{
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:14px;
  }
  .plan-card{
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
  }
  .plan-card button{ width:100%; }
}

/* ===== Storage usage bar ===== */

.usage-bar-track{
  width:100%;
  height:8px;
  background:var(--line-soft);
  border-radius:4px;
  overflow:hidden;
  margin-top:10px;
}

.usage-bar-fill{
  height:100%;
  background:var(--brand);
  border-radius:4px;
  transition:width 0.4s ease;
}

.usage-bar-fill.warn{ background:#E5A93A; }
.usage-bar-fill.danger{ background:var(--danger); }

.usage-caption{
  display:flex;
  justify-content:space-between;
  margin-top:8px;
  font-size:12px;
  color:var(--ink-soft);
}

/* ===== QR code block ===== */

.qr-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:16px;
  background:var(--paper);
  border-radius:10px;
  margin-top:12px;
}

#qrCodeCanvas{ border-radius:8px; }

/* =========================================================
   App shell — sidebar + контент (дашборд/тарифы)
   Mobile-first: сайдбар превращается в горизонтальную панель вкладок
   ========================================================= */

.app-shell{
  width:100%;
  display:flex;
  flex-direction:column;
  flex:1;
}

.sidebar{
  width:100%;
  background:var(--panel);
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  padding:0 12px;
  position:sticky;
  top:0;
  z-index:20;
  padding-top:env(safe-area-inset-top);
}

.sidebar .logo{
  padding:14px 8px;
  flex-shrink:0;
}

.sidebar-nav{
  display:flex;
  gap:2px;
  overflow-x:auto;
  flex:1;
  -ms-overflow-style:none;
  scrollbar-width:none;
}
.sidebar-nav::-webkit-scrollbar{ display:none; }

.nav-link{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:9px;
  color:var(--ink-soft);
  text-decoration:none;
  font-size:14px;
  font-weight:500;
  white-space:nowrap;
  flex-shrink:0;
}

.nav-link svg{ flex-shrink:0; }

.nav-link.active{
  background:var(--brand-soft);
  color:var(--brand);
  font-weight:600;
}

.sidebar-footer{
  display:none; /* на мобильном скрыт — email/выход через кнопку в верху */
}

.main-content{
  flex:1;
  width:100%;
}

@media (min-width: 900px){
  .app-shell{ flex-direction:row; }

  .sidebar{
    width:248px;
    flex-shrink:0;
    height:100vh;
    height:100dvh;
    position:sticky;
    top:0;
    flex-direction:column;
    align-items:stretch;
    padding:20px 14px;
    border-bottom:none;
    border-right:1px solid var(--line);
  }

  .sidebar .logo{ padding:6px 8px 24px; }

  .sidebar-nav{
    flex-direction:column;
    overflow:visible;
  }

  .nav-link{ padding:11px 14px; }

  .sidebar-footer{
    display:block;
    margin-top:auto;
    padding-top:16px;
    border-top:1px solid var(--line);
  }

  .sidebar-footer .user-email{
    font-size:13px;
    color:var(--ink-soft);
    padding:0 14px 10px;
    word-break:break-all;
  }

  .sidebar-footer .nav-link{ color:var(--danger); }

  .main-content{ padding:32px 40px; }
}

/* =========================================================
   Круговой индикатор использования хранилища
   ========================================================= */

.progress-ring-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:28px 20px;
}

.progress-ring-wrap{
  position:relative;
  width:168px;
  height:168px;
}

.progress-ring-wrap svg{ transform:rotate(-90deg); }

.progress-ring-bg{
  fill:none;
  stroke:var(--line-soft);
  stroke-width:12;
}

.progress-ring-fill{
  fill:none;
  stroke:var(--brand);
  stroke-width:12;
  stroke-linecap:round;
  transition:stroke-dashoffset 0.6s ease, stroke 0.3s ease;
}

.progress-ring-fill.warn{ stroke:#E5A93A; }
.progress-ring-fill.danger{ stroke:var(--danger); }

.progress-ring-label{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.progress-ring-label .big{
  font-family:'Space Grotesk', sans-serif;
  font-size:30px;
  font-weight:700;
}

.progress-ring-label .small{
  font-size:12px;
  color:var(--ink-soft);
  margin-top:2px;
}

/* =========================================================
   Иконки-бейджи для карточек статуса
   ========================================================= */

.icon-badge{
  width:38px;
  height:38px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:12px;
  flex-shrink:0;
}

.icon-badge.blue{ background:var(--brand-soft); color:var(--brand); }
.icon-badge.green{ background:#E9F9F1; color:var(--success); }
.icon-badge.gray{ background:var(--line-soft); color:var(--ink-soft); }

.stat-card-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
}

.stat-card-row .icon-badge{ margin-bottom:0; }

/* ===== Регионы: карта + список статусов ===== */

.regions-map-wrap{
  position:relative;
  width:100%;
  aspect-ratio: 784.077 / 458.627; /* точное соотношение сторон world-map.svg — без этого <object> вписывается с полями по бокам, и % позиционирование точек съезжает от центра */
  background:var(--paper);
  border-radius:10px;
  overflow:hidden;
  margin-top:12px;
}

.regions-map-wrap svg{ width:100%; height:100%; display:block; }

.region-dot{
  position:absolute;
  width:10px;
  height:10px;
  border-radius:50%;
  transform:translate(-50%, -50%);
  box-shadow:0 0 0 4px rgba(31,94,255,0.15);
}

.region-dot.operational{ background:var(--success); box-shadow:0 0 0 4px rgba(26,163,107,0.15); }
.region-dot.degraded{ background:#E5A93A; box-shadow:0 0 0 4px rgba(229,169,58,0.15); }
.region-dot.offline{ background:var(--danger); box-shadow:0 0 0 4px rgba(229,72,77,0.15); }

.region-dot-marker{
  position:absolute;
  width:18px;
  height:18px;
  border-radius:50%;
  transform:translate(-50%, -50%);
  border:3px solid white;
  cursor:pointer;
  z-index:5;
}

.region-dot-marker.operational{ background:var(--success); box-shadow:0 0 0 5px rgba(26,163,107,0.22); }
.region-dot-marker.degraded{ background:#E5A93A; box-shadow:0 0 0 5px rgba(229,169,58,0.22); }
.region-dot-marker.offline{ background:var(--danger); box-shadow:0 0 0 5px rgba(229,72,77,0.22); }

.region-list{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-top:14px;
}

.region-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:9px 4px;
  border-bottom:1px solid var(--line-soft);
  font-size:14px;
}

.region-row:last-child{ border-bottom:none; }

.region-row .region-name{
  display:flex;
  align-items:center;
  gap:8px;
}

.region-status-pill{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:12px;
  font-weight:600;
  padding:3px 9px;
  border-radius:12px;
}

.region-status-pill.operational{ background:#E9F9F1; color:var(--success); }
.region-status-pill.degraded{ background:#FBF0DD; color:#B27818; }
.region-status-pill.offline{ background:#FDEDED; color:var(--danger); }

.region-status-pill .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }

@media (min-width: 900px){
  .regions-card-grid{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:24px;
    align-items:start;
  }
}