/* Служебные страницы магазина в оформлении сайта (вариант 8, 27.10.2026): «Мои покупки», вход, заказ,
   «Ввести код», прежняя витрина /shop, страница партнёра и короткие страницы-ответы (_layout.html).
   Цвета, шрифты, кнопки, шапка и подвал — из base.css; здесь — только узкая колонка, таблицы и формы.
   Все правила под .acct: на главную и карточку покупки этот файл не влияет. */

/* шапка: пункт меню из двух слов — одной строкой */
.top nav a{white-space:nowrap}

.acct{padding:44px 0 0}
.acct .wrap{max-width:920px}
.acct h1{font:800 38px/1.15 var(--head);letter-spacing:-1px}
.acct h2{font:700 21px/1.3 var(--head);letter-spacing:-.3px}
.acct h3{margin-top:24px;font-size:18px;font-weight:700}
.acct .wrap > p{margin-top:14px;color:var(--text-2)}
.acct a{color:var(--green)}
.acct a.btn{color:var(--gold-ink)}
.acct a.btn.line,.acct a.btn.ghost{color:var(--text)}

/* плашки */
.acct .note{margin-top:16px;padding:13px 18px;border-radius:var(--r-m);background:var(--bg-2);border:1px solid var(--line);color:var(--text)}
.acct .note.err{border-color:rgba(255,98,66,.5);background:var(--red-soft);color:var(--text);font-weight:600}
.acct .note .btn{margin-left:8px}
.acct .hint{margin-top:10px;font-size:15px;color:var(--text-3)}
.acct .wrap > .hint{margin-top:22px}

/* блоки */
.acct .card{margin-top:22px;padding:24px 26px 24px;border-radius:var(--r-l);background:var(--bg-2);border:1px solid var(--line)}
.acct .card > :first-child{margin-top:0}
.acct .card p{margin-top:8px;color:var(--text-2)}
.acct .card h2 + p,.acct .card h2 + .scroll{margin-top:10px}
.acct .card .btn{margin-top:16px}
.acct .card h2 a{color:inherit;text-decoration:none}
.acct .card h2 a:hover{color:var(--gold)}
.acct .kind{color:var(--gold);font-size:14.5px;font-weight:600}
.acct .offers{margin-top:12px;padding-left:20px;color:var(--text)}
.acct .offers li + li{margin-top:4px}
.acct .off{color:var(--text-3)}

/* кнопки: прежнее «line» — контурная, как на сайте */
.acct .btn.line{background:transparent;color:var(--text);border-color:var(--line-2);font-weight:600}
.acct .btn.line:hover{border-color:var(--text);filter:none}
.acct form .btn{margin-top:16px}

/* поля */
.acct .field{display:block;margin:18px 0 6px;font-weight:700;color:var(--text)}
.acct p.field{margin-top:20px}
.acct .sub{display:block;margin:12px 0 6px;font-size:15px;color:var(--text-2)}
.acct input[type=text],.acct input[type=email]{display:block;width:100%;max-width:380px;min-height:50px;padding:10px 14px;border-radius:var(--r-s);
  border:1px solid var(--line-2);background:var(--bg);color:var(--text);font:500 17px/1.2 var(--text-f)}
.acct input[type=text]:focus,.acct input[type=email]:focus{border-color:var(--gold);outline:none}
.acct input#code{max-width:260px;font-size:22px;font-weight:700;letter-spacing:4px}
.acct .check{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:15px;color:var(--text-2)}
.acct .check input{flex:none;width:21px;height:21px;margin-top:2px;accent-color:var(--gold)}

/* таблицы «Мои покупки», заказа, партнёра */
.acct .scroll{overflow-x:auto}
.acct table.rows{width:100%;border-collapse:collapse;margin-top:12px;font-size:16px}
.acct table.rows th{text-align:left;vertical-align:top;padding:8px 14px 8px 0;border-bottom:1px solid var(--line);color:var(--text-3);font-weight:600;font-size:14px}
.acct table.rows td{vertical-align:top;padding:12px 14px 12px 0;border-bottom:1px solid var(--line);color:var(--text-2)}
.acct table.rows td b{color:var(--text)}
.acct table.rows tr:last-child td,.acct table.rows tr:last-child th{border-bottom:0}

/* добавки к идущей покупке */
.acct details.addon{margin-top:10px;padding:0 18px;border-radius:var(--r-m);border:1px dashed var(--gold-line);background:var(--gold-soft)}
.acct details.addon summary{cursor:pointer;padding:14px 0;font-weight:700;color:var(--gold);list-style:none}
.acct details.addon summary::-webkit-details-marker{display:none}
.acct details.addon summary::before{content:"+";display:inline-block;width:20px;font-size:20px;line-height:1}
.acct details.addon[open] summary::before{content:"−"}
.acct details.addon[open]{padding-bottom:18px}
.acct details.addon form{margin-top:4px}

/* «Мои покупки» → «Устройства»: просьбы новых устройств, строки устройств, «Переименовать» и «Убрать» —
   формами, без скрипта; имя устройства пишет программа или человек — длинное слово переносится. Мелкие
   кнопки — только внутри раздела (#devices): .row есть и у входа, и у «Ввести код», там кнопки — рядом
   с полем в 50 px и не меняются */
.acct .ask{margin-top:14px;padding:14px 18px;border-radius:var(--r-m);border:1px solid var(--gold-line);background:var(--gold-soft)}
.acct .ask p{margin-top:0;color:var(--text);overflow-wrap:anywhere}
.acct .ask .row{margin-top:12px}
.acct ul.devices{list-style:none;padding-left:0;margin-top:12px}
.acct ul.devices > li{padding:14px 0;border-bottom:1px solid var(--line)}
.acct ul.devices > li:last-child{border-bottom:0}
.acct ul.devices > li > p{margin-top:0;color:var(--text);overflow-wrap:anywhere}
.acct ul.devices .row{margin-top:10px;align-items:flex-start}
.acct #devices .row > form{margin:0}
.acct #devices .row .btn,.acct details.rename summary{min-height:44px;padding:8px 18px;font-size:15px}
.acct details.rename summary{display:inline-flex;align-items:center;cursor:pointer;list-style:none;border-radius:var(--r-s);
  border:1px solid var(--line-2);font-weight:600;color:var(--text)}
.acct details.rename summary::-webkit-details-marker{display:none}
.acct details.rename summary:hover{border-color:var(--text)}
.acct details.rename[open]{flex-basis:100%}
.acct details.rename form{margin-top:4px}
.acct details.rename input[type=text]{width:100%}
.acct details.rename form .btn{margin-top:12px}
/* страница «Точно убрать «…»?»: «Убрать» и «Отмена» — обычные кнопки сайта, под вопросом */
.acct .row.confirm{margin-top:20px}

/* вход и «Ввести код»: как шаг «Вход» карточки покупки */
.acct .card.main{border-color:var(--gold-line);box-shadow:0 0 0 4px rgba(255,178,46,.05)}
.acct .card h2 svg{display:inline-block;vertical-align:-4px;width:24px;height:24px;margin-right:10px;color:var(--gold)}
.acct .enter{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:0 22px;align-items:stretch;margin-top:22px}
.acct .enter > .card{margin-top:0;display:flex;flex-direction:column}
.acct .enter > .card.main .btn{align-self:flex-start}
.acct .enter > .card form{margin-top:auto}
.acct .flow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px}
.acct .chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:var(--bg);border:1px solid var(--line-2);font-weight:600;font-size:14.5px;color:var(--text)}
.acct .chip svg{width:18px;height:18px;color:var(--gold)}
.acct .chip.ok svg{color:var(--green)}
.acct .arr{color:var(--text-3)}
.acct .or{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--text-3);font-size:14px}
.acct .or::before,.acct .or::after{content:"";flex:1;width:1px;background:var(--line)}
.acct .row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.acct .row input[type=text]{flex:1 1 180px;width:auto}
.acct .row input#code{max-width:none;min-width:0}
.acct .row .btn{margin-top:0}
.acct ul.gifts{list-style:none;padding-left:0}
.acct ul.gifts li{position:relative;padding:6px 0 6px 30px;font-weight:600}
.acct ul.gifts li::before{content:"";position:absolute;left:4px;top:13px;width:12px;height:7px;border-left:2.5px solid var(--green);border-bottom:2.5px solid var(--green);transform:rotate(-45deg)}
.acct .card .done-line{display:flex;gap:12px;align-items:flex-start;color:var(--text);font-size:18px;font-weight:700}
.acct .card .done-line svg{flex:none;width:30px;height:30px;padding:6px;border-radius:50%;background:var(--green);color:var(--green-ink);stroke-width:3}

@media (max-width:860px){
  .acct .enter{grid-template-columns:minmax(0,1fr);gap:0}
  .acct .or{flex-direction:row;margin:16px 0}
  .acct .or::before,.acct .or::after{height:1px;width:auto}
}

@media (max-width:620px){
  .acct{padding-top:28px}
  .acct h1{font-size:28px;letter-spacing:-.6px}
  .acct h2{font-size:19px}
  .acct .card{padding:20px 16px}
  .acct .note{padding:12px 14px}
  /* таблицы — строками: подпись столбца над значением */
  .acct .scroll{overflow:visible}
  .acct table.rows,.acct table.rows tbody,.acct table.rows tr,.acct table.rows td,.acct table.rows th{display:block;width:100%}
  .acct table.rows tr.head{display:none}
  .acct table.rows tr{padding:10px 0;border-bottom:1px solid var(--line)}
  .acct table.rows tr:last-child{border-bottom:0}
  .acct table.rows td,.acct table.rows th{padding:3px 0;border:0}
  .acct table.rows td[data-l]::before{content:attr(data-l);display:block;color:var(--text-3);font-size:13px;font-weight:600}
}