/* EasyControlGSM — мягкая тёмная тема входа (в стиле pcb, приглушённый графит) */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  --bg:#111a20;          /* мягкий графит, не чёрный */
  --bg-2:#16232b;
  --panel:#1a2831;       /* карточка — на тон светлее фона */
  --panel-2:#20323c;
  --line:#2c4552;
  --line-soft:#243843;
  --copper:#d8925a;      /* чуть мягче меди pcb */
  --copper-lit:#e6a24a;
  --text:#e9e3d8;
  --muted:#9fb0b9;
  --muted-2:#7d919b;
  --ok:#7fbf8f;
  --err:#e08a6a;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{overflow-x:hidden}
button, .login-box, .toggle-password, a{
  -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}
input, textarea{
  -webkit-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text;
  -webkit-touch-callout:default;
}

body{
  font-family:'Inter',system-ui,sans-serif;
  color:var(--text);
  min-height:100vh;
  display:flex;justify-content:center;align-items:center;
  padding:20px;
  /* мягкий графитовый фон с еле заметной сеткой-платой */
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(216,146,90,.08), transparent 60%),
    linear-gradient(rgba(44,69,82,.20) 1px, transparent 1px),
    linear-gradient(90deg, rgba(44,69,82,.20) 1px, transparent 1px),
    var(--bg);
  background-size:auto, 42px 42px, 42px 42px, auto;
}

.login-box{
  background:var(--panel);
  border:1px solid var(--line);
  padding:36px 32px;
  border-radius:18px;
  box-shadow:0 30px 70px -30px #000, inset 0 1px 0 rgba(255,255,255,.03);
  width:100%;max-width:400px;margin:16px;
  position:relative;
}
/* медная полоска сверху карточки */
.login-box::before{
  content:"";position:absolute;left:32px;right:32px;top:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--copper),transparent);
}
@media(max-width:360px){ .login-box{margin:8px;padding:26px 22px} }

.logo-container{display:flex;flex-direction:column;align-items:center;margin-bottom:26px}
.logo{max-width:96px;width:100%;height:auto}
/* Название сервиса под логотипом */
.brand-title{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:22px;letter-spacing:.5px;margin-top:12px;text-align:center}
.brand-title .g{color:var(--copper-lit)}
.brand-sub{font-family:'IBM Plex Mono','Courier New',monospace;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted-2);margin-top:5px;text-align:center}


h2{text-align:center;margin-bottom:22px;color:var(--text);font-family:'Chakra Petch',sans-serif;font-weight:600}

.form-group{margin-bottom:18px}
label{display:block;margin-bottom:7px;font-weight:500;font-size:13px;color:var(--muted);
  font-family:'Chakra Petch',sans-serif;letter-spacing:.02em}

input[type="text"],input[type="email"],input[type="password"],input[type="tel"]{
  display:block;width:100%;max-width:100%;
  padding:12px 14px;padding-right:45px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:10px;
  font-size:16px;color:var(--text);
  transition:border-color .2s, background .2s;
}
input::placeholder{color:var(--muted-2)}
input[type="text"]:focus,input[type="email"]:focus,input[type="password"]:focus,input[type="tel"]:focus{
  outline:none;border-color:var(--copper);background:var(--panel-2);
}

.password-wrapper{position:relative}
.password-wrapper input{width:100%;max-width:100%;padding:12px 14px;padding-right:45px}
.toggle-password{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  cursor:pointer;font-size:18px;color:var(--muted);user-select:none;line-height:0}
.toggle-password svg{width:20px;height:20px;display:block;fill:none;stroke:var(--muted)}
.toggle-password:hover svg{stroke:var(--copper-lit)}

/* чекбокс «запомнить меня» */
.form-group label input[type="checkbox"]{
  accent-color:var(--copper);margin-right:6px;vertical-align:middle;
}
.form-group > label{display:flex;align-items:center;gap:2px;color:var(--muted);
  font-family:'Inter',sans-serif;text-transform:none;font-size:14px;font-weight:400}

button{
  width:100%;padding:13px;border:none;border-radius:10px;cursor:pointer;
  font-size:16px;font-weight:600;font-family:'Chakra Petch',sans-serif;letter-spacing:.3px;
  color:#160c05;
  background:linear-gradient(135deg,var(--copper-lit),var(--copper));
  box-shadow:0 10px 26px -12px var(--copper);
  transition:transform .15s, box-shadow .2s, filter .2s;
}
button:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 14px 30px -12px var(--copper)}

.form-links{text-align:right;margin-top:-6px;margin-bottom:16px}
.form-links a{font-size:14px;color:var(--copper-lit);text-decoration:none}
.form-links a:hover{text-decoration:underline}

.form-footer{text-align:center;margin-top:22px;font-size:14px;color:var(--muted)}
.form-footer a{color:var(--copper-lit);text-decoration:none}
.form-footer a:hover{text-decoration:underline}

.error{background:rgba(224,138,106,.12);color:var(--err);padding:11px;border-radius:10px;
  margin-bottom:15px;text-align:center;font-size:14px;border:1px solid rgba(224,138,106,.3)}
.success{background:rgba(127,191,143,.12);color:var(--ok);padding:11px;border-radius:10px;
  margin-bottom:12px;text-align:center;font-size:14px;border:1px solid rgba(127,191,143,.3)}

/* код из письма (6 ячеек) */
.reset-code-container{display:flex;justify-content:center;align-items:center;gap:6px;margin:20px 0;flex-wrap:wrap}
.reset-box-container{align-items:center}
input.reset-code-input{all:unset;width:38px;height:44px;text-align:center;font-size:20px;
  border:1px solid var(--line);border-radius:10px;box-sizing:border-box;background:var(--bg-2);color:var(--text)}
input.reset-code-input:focus{border-color:var(--copper)}

/* индикатор силы пароля */
.pwd-strength{height:8px;background:var(--bg-2);border-radius:999px;overflow:hidden;margin-top:8px;border:1px solid var(--line-soft)}
.pwd-strength .bar{height:100%;width:0%;transition:width .25s ease}
.pwd-strength.weak .bar{background:#e05a4a}
.pwd-strength.fair .bar{background:var(--copper)}
.pwd-strength.medium .bar{background:var(--copper-lit)}
.pwd-strength.strong .bar{background:var(--ok)}
.pwd-hint{font-size:12px;color:var(--muted-2);margin-top:6px}

/* все ссылки на странице входа/регистрации — в тон теме (перебиваем и :visited) */
.login-box a, .login-box a:link, .login-box a:visited,
.modal a, .modal a:link, .modal a:visited,
.center a, .center a:link, .center a:visited{
  color:var(--copper-lit) !important;text-decoration:none;
  transition:color .2s,border-color .2s}
.modal a, .center a{color:var(--muted) !important;border-bottom:1px dashed var(--line)}
.login-box a:hover, .modal a:hover, .center a:hover{
  color:var(--copper) !important;border-color:var(--copper)}​/* EasyControlGSM — мягкая тёмная тема входа (в стиле pcb, приглушённый графит) */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  --bg:#111a20;          /* мягкий графит, не чёрный */
  --bg-2:#16232b;
  --panel:#1a2831;       /* карточка — на тон светлее фона */
  --panel-2:#20323c;
  --line:#2c4552;
  --line-soft:#243843;
  --copper:#d8925a;      /* чуть мягче меди pcb */
  --copper-lit:#e6a24a;
  --text:#e9e3d8;
  --muted:#9fb0b9;
  --muted-2:#7d919b;
  --ok:#7fbf8f;
  --err:#e08a6a;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{overflow-x:hidden}

body{
  font-family:'Inter',system-ui,sans-serif;
  color:var(--text);
  min-height:100vh;
  display:flex;justify-content:center;align-items:center;
  padding:20px;
  /* мягкий графитовый фон с еле заметной сеткой-платой */
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(216,146,90,.08), transparent 60%),
    linear-gradient(rgba(44,69,82,.20) 1px, transparent 1px),
    linear-gradient(90deg, rgba(44,69,82,.20) 1px, transparent 1px),
    var(--bg);
  background-size:auto, 42px 42px, 42px 42px, auto;
}

.login-box{
  background:var(--panel);
  border:1px solid var(--line);
  padding:36px 32px;
  border-radius:18px;
  box-shadow:0 30px 70px -30px #000, inset 0 1px 0 rgba(255,255,255,.03);
  width:100%;max-width:400px;margin:16px;
  position:relative;
}
/* медная полоска сверху карточки */
.login-box::before{
  content:"";position:absolute;left:32px;right:32px;top:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--copper),transparent);
}
@media(max-width:360px){ .login-box{margin:8px;padding:26px 22px} }

.logo-container{display:flex;flex-direction:column;align-items:center;margin-bottom:26px}
.logo{max-width:96px;width:100%;height:auto}
/* Название сервиса под логотипом */
.brand-title{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:22px;letter-spacing:.5px;margin-top:12px;text-align:center}
.brand-title .g{color:var(--copper-lit)}
.brand-sub{font-family:'IBM Plex Mono','Courier New',monospace;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted-2);margin-top:5px;text-align:center}


h2{text-align:center;margin-bottom:22px;color:var(--text);font-family:'Chakra Petch',sans-serif;font-weight:600}

.form-group{margin-bottom:18px}
label{display:block;margin-bottom:7px;font-weight:500;font-size:13px;color:var(--muted);
  font-family:'Chakra Petch',sans-serif;letter-spacing:.02em}

input[type="text"],input[type="email"],input[type="password"],input[type="tel"]{
  display:block;width:100%;max-width:100%;
  padding:12px 14px;padding-right:45px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:10px;
  font-size:16px;color:var(--text);
  transition:border-color .2s, background .2s;
}
input::placeholder{color:var(--muted-2)}
input[type="text"]:focus,input[type="email"]:focus,input[type="password"]:focus,input[type="tel"]:focus{
  outline:none;border-color:var(--copper);background:var(--panel-2);
}

.password-wrapper{position:relative}
.password-wrapper input{width:100%;max-width:100%;padding:12px 14px;padding-right:45px}
.toggle-password{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  cursor:pointer;font-size:18px;color:var(--muted);user-select:none;line-height:0}
.toggle-password svg{width:20px;height:20px;display:block;fill:none;stroke:var(--muted)}
.toggle-password:hover svg{stroke:var(--copper-lit)}

/* чекбокс «запомнить меня» */
.form-group label input[type="checkbox"]{
  accent-color:var(--copper);margin-right:6px;vertical-align:middle;
}
.form-group > label{display:flex;align-items:center;gap:2px;color:var(--muted);
  font-family:'Inter',sans-serif;text-transform:none;font-size:14px;font-weight:400}

button{
  width:100%;padding:13px;border:none;border-radius:10px;cursor:pointer;
  font-size:16px;font-weight:600;font-family:'Chakra Petch',sans-serif;letter-spacing:.3px;
  color:#160c05;
  background:linear-gradient(135deg,var(--copper-lit),var(--copper));
  box-shadow:0 10px 26px -12px var(--copper);
  transition:transform .15s, box-shadow .2s, filter .2s;
}
button:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 14px 30px -12px var(--copper)}

.form-links{text-align:right;margin-top:-6px;margin-bottom:16px}
.form-links a{font-size:14px;color:var(--copper-lit);text-decoration:none}
.form-links a:hover{text-decoration:underline}

.form-footer{text-align:center;margin-top:22px;font-size:14px;color:var(--muted)}
.form-footer a{color:var(--copper-lit);text-decoration:none}
.form-footer a:hover{text-decoration:underline}

.error{background:rgba(224,138,106,.12);color:var(--err);padding:11px;border-radius:10px;
  margin-bottom:15px;text-align:center;font-size:14px;border:1px solid rgba(224,138,106,.3)}
.success{background:rgba(127,191,143,.12);color:var(--ok);padding:11px;border-radius:10px;
  margin-bottom:12px;text-align:center;font-size:14px;border:1px solid rgba(127,191,143,.3)}

/* код из письма (6 ячеек) */
.reset-code-container{display:flex;justify-content:center;align-items:center;gap:6px;margin:20px 0;flex-wrap:wrap}
.reset-box-container{align-items:center}
input.reset-code-input{all:unset;width:38px;height:44px;text-align:center;font-size:20px;
  border:1px solid var(--line);border-radius:10px;box-sizing:border-box;background:var(--bg-2);color:var(--text)}
input.reset-code-input:focus{border-color:var(--copper)}

/* индикатор силы пароля */
.pwd-strength{height:8px;background:var(--bg-2);border-radius:999px;overflow:hidden;margin-top:8px;border:1px solid var(--line-soft)}
.pwd-strength .bar{height:100%;width:0%;transition:width .25s ease}
.pwd-strength.weak .bar{background:#e05a4a}
.pwd-strength.fair .bar{background:var(--copper)}
.pwd-strength.medium .bar{background:var(--copper-lit)}
.pwd-strength.strong .bar{background:var(--ok)}
.pwd-hint{font-size:12px;color:var(--muted-2);margin-top:6px}

/* все ссылки на странице входа/регистрации — в тон теме (перебиваем и :visited) */
.login-box a, .login-box a:link, .login-box a:visited,
.modal a, .modal a:link, .modal a:visited,
.center a, .center a:link, .center a:visited{
  color:var(--copper-lit) !important;text-decoration:none;
  transition:color .2s,border-color .2s}
.modal a, .center a{color:var(--muted) !important;border-bottom:1px dashed var(--line)}
.login-box a:hover, .modal a:hover, .center a:hover{
  color:var(--copper) !important;border-color:var(--copper)}