/* Общий стиль для всех страниц сайта. Палитра — та же самая, что уже
   используется в handwriting-editor.html и в прототипе подписи, чтобы
   вход/каталог/редактор не выглядели как три разных продукта.
   Это "ходячий скелет" — функционально, без вылизывания; полировка
   интерфейса идёт отдельным этапом после того, как весь путь работает. */

:root{
  --bg:#17181c; --panel:#1f2126; --panel-2:#25272e; --border:#31333b;
  --ink:#eae7e0; --muted:#8b8d97; --gold:#c9a15a;
  --danger:#d97757; --ok:#7fbf7f;
}
*{box-sizing:border-box;}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:'Manrope',Arial,sans-serif;}
body{min-height:100vh;}
a{color:var(--gold);text-decoration:none;}
a:hover{text-decoration:underline;}

.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 28px;border-bottom:1px solid var(--border);background:var(--panel);
}
.topbar .brand{font-weight:700;font-size:16px;}
.topbar .brand span{color:var(--gold);}
.topbar .right{display:flex;align-items:center;gap:16px;font-size:13.5px;color:var(--muted);}
.topbar .balance{color:var(--ink);font-weight:600;}
.topbar .balance b{color:var(--gold);}

.wrap{max-width:760px;margin:0 auto;padding:40px 20px;}
.wrap.wide{max-width:1100px;}

h1{font-size:22px;margin:0 0 6px;}
h2{font-size:15px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin:28px 0 14px;font-weight:600;}
p.sub{color:var(--muted);font-size:13.5px;margin:0 0 28px;}

.panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:22px;}

.field{margin-bottom:14px;}
.field label{display:block;font-size:11.5px;color:var(--muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:.04em;}
.field input, .field select, .field textarea{
  width:100%;background:var(--panel-2);border:1px solid var(--border);color:var(--ink);
  border-radius:7px;padding:10px 12px;font-size:14px;font-family:inherit;
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none;border-color:var(--gold);}

button, .btn{
  background:var(--gold);color:#1a1a1a;border:none;border-radius:7px;
  padding:11px 18px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;
  display:inline-block;
}
button:hover, .btn:hover{filter:brightness(1.08);text-decoration:none;}
button:disabled{opacity:.5;cursor:not-allowed;}
button.secondary, .btn.secondary{background:var(--panel-2);color:var(--ink);border:1px solid var(--border);}
button.danger{background:var(--danger);color:#fff;}

.error-msg{color:var(--danger);font-size:13px;margin-top:8px;min-height:16px;}
.hint{color:var(--muted);font-size:12.5px;margin-top:6px;line-height:1.5;}

.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(220px,1fr));gap:16px;}
.tpl-card{
  background:var(--panel);border:1px solid var(--border);border-radius:12px;overflow:hidden;
  cursor:pointer;transition:border-color .15s;
}
.tpl-card:hover{border-color:var(--gold);}
.tpl-card .thumb{aspect-ratio:4/3;background:var(--panel-2);background-size:cover;background-position:center;}
.tpl-card .info{padding:12px 14px;}
.tpl-card .name{font-weight:600;font-size:14.5px;}
.tpl-card .price{color:var(--gold);font-weight:700;font-size:14.5px;margin-top:4px;}

.modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;
  align-items:center;justify-content:center;z-index:50;
}
.modal-backdrop.hidden{display:none;}
.modal{
  background:var(--panel);border:1px solid var(--border);border-radius:14px;
  padding:26px;max-width:380px;width:90%;
}
.modal h3{margin:0 0 10px;font-size:17px;}
.modal p{color:var(--muted);font-size:13.5px;line-height:1.5;}
.modal .actions{display:flex;gap:10px;margin-top:18px;}

.status-line{font-size:12.5px;color:var(--muted);margin-top:8px;}
.status-line.ok{color:var(--ok);}
.status-line.err{color:var(--danger);}

table{width:100%;border-collapse:collapse;font-size:13.5px;}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--border);}
th{color:var(--muted);font-weight:600;text-transform:uppercase;font-size:11px;letter-spacing:.04em;}
tr:last-child td{border-bottom:none;}
.tag{display:inline-block;font-size:11px;padding:2px 7px;border-radius:5px;border:1px solid var(--border);color:var(--muted);}
.tag.active{color:var(--ok);border-color:var(--ok);}
.tag.inactive{color:var(--danger);border-color:var(--danger);}