/* ------------------------------------------------------------------ *
 *  Личный кабинет /me/ — стили страницы (вынесены из engine/pages/me.php)
 *
 *  Подключается ПОСЛЕ /media/css/pages/board.css: оттуда общие стили доски,
 *  палитра --pg-* (лёгкая версия — класс kodg-lite на <body>) и правила body —
 *  фон, цвет и шрифт 15px/1.6 у кабинета те же, что у доски.
 * ------------------------------------------------------------------ */
.bd .sug{list-style:none;margin:4px 0 0;padding:0;border:1px solid var(--pg-border);border-radius:5px;
  background:var(--pg-panel);max-height:220px;overflow:auto;display:none}
.bd .sug li{padding:6px 10px;cursor:pointer;font-size:14px;display:flex;align-items:center;gap:6px}
.bd .sug li:hover{background:var(--pg-bg)}
.bd code.big{display:inline-block;padding:4px 10px;font-size:19px;letter-spacing:1px}
.bd .me-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;align-items:start}
.bd .me-grid .card{margin:0}
/* Кирпичная раскладка (скрипт внизу): строки сетки по 4px, блок занимает столько, сколько
   ему нужно по высоте, — без пустот под короткими блоками. Без скрипта — обычная сетка. */
.bd .me-grid.me-mason{grid-auto-rows:4px;row-gap:0;grid-auto-flow:row dense}
.bd .me-grid.me-mason .card{margin-bottom:16px}
.bd .me-list{list-style:none;padding:0;margin:8px 0 0}
.bd .me-list li{padding:6px 0;border-top:1px solid var(--pg-border);display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.bd .me-list li:first-child{border-top:0}
.bd .card:target{box-shadow:0 0 0 2px var(--pg-acc)}
.bd .me-subs a{text-decoration:none}
.bd .me-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.bd .me-acts form{margin:0;display:inline}
.bd .me-acts .push{margin-left:auto}
.bd .me-tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:14px}
.bd .me-tiles a{display:flex;flex-direction:column;padding:10px 12px;border:1px solid var(--pg-border);border-radius:6px;
  text-decoration:none;color:var(--pg-text);background:var(--pg-bg)}
.bd .me-tiles a:hover{border-color:var(--pg-acc)}
.bd .me-tiles b{font-size:22px;line-height:1.2}
.bd .me-tiles span{font-size:12.5px;color:var(--pg-muted)}
@media (max-width:600px){.bd .me-tiles{grid-template-columns:repeat(2,1fr)}}
.bd .me-hint{margin:16px 0 8px}
.bd .me-charms{list-style:none;margin:8px 0 10px;padding:0;max-height:320px;overflow:auto}
.bd .me-charms li{display:flex;align-items:center;gap:8px;padding:5px 0;border-top:1px solid var(--pg-border)}
.bd .me-charms li:first-child{border-top:0}
.bd .me-ch-d{flex:none;font-size:12px;color:var(--pg-muted);min-width:98px}
.bd .me-ch-u{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.bd .me-ch-x{margin:0;flex:none}
.bd .me-charms .btn{padding:1px 7px;font-size:12px}
.bd .me-grid .card{position:relative}
.bd .me-grid .card h2{padding-right:34px}
.bd .me-h{color:var(--pg-muted);font-size:18px;line-height:1}
.bd .me-grid .card > .me-h{position:absolute;top:12px;right:12px;cursor:grab;touch-action:none;user-select:none;
  padding:4px 6px;border-radius:4px}
.bd .me-grid .card > .me-h:hover{color:var(--pg-acc);background:var(--pg-bg)}
.bd .me-grid .card.me-drag{opacity:.55;outline:2px dashed var(--pg-acc);outline-offset:2px}
body.me-dragging,body.me-dragging *{cursor:grabbing !important;user-select:none}
.bd .me-opt{display:grid;grid-template-columns:auto 1fr;gap:4px 24px;align-items:center;margin:0 0 10px}
.bd .me-opt > span{grid-row:1 / span 3;align-self:start;color:var(--pg-muted);font-size:13.5px;padding-top:1px}
.bd .me-opt label{font-weight:normal;margin:0;display:inline-flex;gap:6px;align-items:center;cursor:pointer}
.bd .me-opt > label{grid-column:2;justify-self:start}
.bd .or{display:flex;align-items:center;gap:12px;color:var(--pg-muted);margin:18px 0;font-size:13px}
.bd .or:before,.bd .or:after{content:"";flex:1;border-top:1px solid var(--pg-border)}