/* Общие стили страниц «Вход» и «Мои доски» — те же цвета и шрифты, что у доски */
:root{
  /* --page — фон страницы, --ui — карточки и панели: они заметно отличаются, чтобы карточки не сливались с фоном */
  --page:#E8EDF3; --page-grid:rgba(40,60,90,.06);
  --paper:#FBFCFE; --grid:#D5E3F3;
  --ui:#FFFFFF; --ui-border:#D6DEE8; --ui-text:#1D2533; --ui-muted:#5F6B7E; --ui-hover:#EDF2F8;
  --accent:#1C3FAA; --accent-text:#FFFFFF; --danger:#C62F3A;
  --shadow:0 1px 2px rgba(22,34,58,.08),0 8px 24px rgba(22,34,58,.12);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-skin]){
    --page:#17241F; --page-grid:rgba(236,244,238,.05);
    --paper:#22332C; --grid:rgba(236,244,238,.12);
    --ui:#2C3D35; --ui-border:#41534A; --ui-text:#EDF2EE; --ui-muted:#A3B2AA; --ui-hover:#36483F;
    --accent:#EDF2EE; --accent-text:#22332C; --danger:#FF9189;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35); color-scheme:dark;
  }
}
:root[data-skin="white"]{ --page:#E8EDF3; --page-grid:rgba(40,60,90,.06); --paper:#FBFCFE; --grid:#D5E3F3; --ui:#FFFFFF; --ui-border:#D6DEE8; --ui-text:#1D2533; --ui-muted:#5F6B7E; --ui-hover:#EDF2F8; --accent:#1C3FAA; --accent-text:#FFFFFF; --danger:#C62F3A; color-scheme:light; }
:root[data-skin="cream"]{ --page:#EFE6D2; --page-grid:rgba(90,70,40,.07); --paper:#FBF7EC; --grid:#E6DAC0; --ui:#FFFDF7; --ui-border:#E1D5BC; --ui-text:#2B2418; --ui-muted:#7A6B55; --ui-hover:#F3EBD8; --accent:#7A4A1E; --accent-text:#FFFFFF; --danger:#C0392B; color-scheme:light; }
:root[data-skin="green"]{ --page:#17241F; --page-grid:rgba(236,244,238,.05); --paper:#22332C; --grid:rgba(236,244,238,.12); --ui:#2C3D35; --ui-border:#41534A; --ui-text:#EDF2EE; --ui-muted:#A3B2AA; --ui-hover:#36483F; --accent:#EDF2EE; --accent-text:#22332C; --danger:#FF9189; --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35); color-scheme:dark; }
:root[data-skin="brown"]{ --page:#281D16; --page-grid:rgba(255,238,215,.05); --paper:#3B2B21; --grid:rgba(255,238,215,.10); --ui:#4A382C; --ui-border:#62493A; --ui-text:#F5EDE3; --ui-muted:#C9B8A6; --ui-hover:#574336; --accent:#F5EDE3; --accent-text:#3B2B21; --danger:#FF9C8A; --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.4); color-scheme:dark; }
:root[data-skin="graphite"]{ --page:#131517; --page-grid:rgba(235,240,245,.04); --paper:#1E2124; --grid:rgba(235,240,245,.09); --ui:#2B2F34; --ui-border:#40464D; --ui-text:#EEF1F4; --ui-muted:#A7AEB6; --ui-hover:#363B41; --accent:#EEF1F4; --accent-text:#1E2124; --danger:#FF8F8F; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.45); color-scheme:dark; }
:root[data-skin="blueprint"]{ --page:#132B45; --page-grid:rgba(200,225,255,.06); --paper:#1C3B5E; --grid:rgba(200,225,255,.16); --ui:#26496F; --ui-border:#3A5E86; --ui-text:#EAF3FF; --ui-muted:#A9C1DD; --ui-hover:#2E5580; --accent:#EAF3FF; --accent-text:#1C3B5E; --danger:#FF9A9A; --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35); color-scheme:dark; }
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%}
body{
  font-family:"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ui-text);
  background-color:var(--page);
  background-image:linear-gradient(var(--page-grid) 1px,transparent 1px),linear-gradient(90deg,var(--page-grid) 1px,transparent 1px);
  background-size:24px 24px;-webkit-tap-highlight-color:transparent;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
}
button,input{font:inherit}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:18px;color:var(--ui-text);text-decoration:none}
.brand img{width:30px;height:30px;border-radius:8px}
.b1,.b2{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;border-radius:10px;font-size:15px;font-weight:500;cursor:pointer;touch-action:manipulation;white-space:nowrap}
.b1{background:var(--accent);border:1px solid var(--accent);color:var(--accent-text)}
.b2{background:var(--ui);border:1px solid var(--ui-border);color:var(--ui-text)}
.b1:disabled{opacity:.55;cursor:default}
.b1 svg,.b2 svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media (hover:hover) and (pointer:fine){ .b2:hover{background:var(--ui-hover)} }
.b2:active{background:var(--ui-hover)}
.field{display:block;margin:0 0 14px}
.field span{display:block;font-size:13px;color:var(--ui-muted);margin:0 0 6px}
.field input{width:100%;height:46px;padding:0 14px;font-size:16px;color:var(--ui-text);background:var(--page);border:1px solid var(--ui-border);border-radius:10px}
.field input:focus{outline:2px solid var(--accent);outline-offset:0;border-color:transparent}
.err{min-height:20px;margin:6px 0 0;font-size:14px;color:var(--danger)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Вход */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.card{width:min(400px,100%);background:var(--ui);border:1px solid var(--ui-border);border-radius:18px;box-shadow:var(--shadow);padding:26px 24px 22px}
.card h1{margin:18px 0 6px;font-size:22px;font-weight:600;letter-spacing:-.01em}
.card p.sub{margin:0 0 20px;color:var(--ui-muted);font-size:15px;line-height:1.5}
.card .b1{width:100%;margin-top:6px;height:46px}

/* Мои доски */
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;padding:12px 20px;background:color-mix(in srgb,var(--ui) 92%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-bottom:1px solid var(--ui-border)}
.top .spacer{flex:1}
.userbtn{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 12px;border-radius:10px;border:1px solid var(--ui-border);background:var(--ui);color:var(--ui-text);cursor:pointer}
.userbtn i{width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--accent-text);display:grid;place-items:center;font-style:normal;font-size:13px;font-weight:600}
main{max-width:1180px;margin:0 auto;padding:26px 20px 60px}
.head{display:flex;align-items:baseline;gap:12px;margin:0 0 18px}
.head h1{margin:0;font-size:26px;font-weight:600;letter-spacing:-.01em}
.head span{color:var(--ui-muted);font-size:15px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.bcard{position:relative;display:flex;flex-direction:column;background:var(--ui);border:1px solid var(--ui-border);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;cursor:pointer;text-decoration:none;color:inherit;transition:transform .12s}
@media (hover:hover) and (pointer:fine){ .bcard:hover{transform:translateY(-2px)} }
.bthumb{aspect-ratio:16/10;background-color:var(--paper);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:14px 14px;background-position:center;border-bottom:1px solid var(--ui-border);position:relative}
.bthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.bthumb .empty{position:absolute;inset:0;display:grid;place-items:center;color:inherit;opacity:.7;font-size:13px}
.binfo{padding:12px 14px 14px}
.btitle{font-size:16px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bmeta{margin-top:4px;font-size:13px;color:var(--ui-muted)}
.bmenu{position:absolute;top:8px;right:8px;width:36px;height:36px;border-radius:9px;border:1px solid var(--ui-border);background:var(--ui);color:var(--ui-text);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow)}
.bmenu svg{width:18px;height:18px;fill:currentColor}
.newcard{display:grid;place-items:center;min-height:220px;border:2px dashed var(--ui-border);border-radius:14px;background:transparent;color:var(--ui-muted);font-size:15px;cursor:pointer}
.newcard svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;display:block;margin:0 auto 8px}
@media (hover:hover) and (pointer:fine){ .newcard:hover{color:var(--ui-text);border-color:var(--ui-muted)} }
.emptystate{text-align:center;padding:60px 20px;color:var(--ui-muted)}
.emptystate h2{color:var(--ui-text);font-size:20px;margin:0 0 8px}
.menu{position:fixed;z-index:20;min-width:200px;padding:5px;background:var(--ui);border:1px solid var(--ui-border);border-radius:12px;box-shadow:var(--shadow)}
.menu button{display:flex;align-items:center;gap:10px;width:100%;height:40px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:var(--ui-text);font-size:15px;text-align:left;cursor:pointer}
.menu button.danger{color:var(--danger)}
@media (hover:hover) and (pointer:fine){ .menu button:hover{background:var(--ui-hover)} }
.menu button:active{background:var(--ui-hover)}
.modal-back{position:fixed;inset:0;z-index:30;display:grid;place-items:start center;padding:max(16px,8vh) 16px max(16px,env(safe-area-inset-bottom,0px));overflow:auto;background:rgba(12,18,28,.42)}
.modal{width:min(420px,100%);max-height:calc(100vh - max(16px,8vh) - 16px);max-height:calc(100dvh - max(16px,8vh) - max(16px,env(safe-area-inset-bottom,0px)));overflow:auto;background:var(--ui);border:1px solid var(--ui-border);border-radius:16px;box-shadow:0 2px 6px rgba(20,30,50,.08),0 18px 48px rgba(20,30,50,.22);padding:20px}
.modal h2{margin:0 0 14px;font-size:18px;font-weight:600}
.modal p{margin:0 0 16px;color:var(--ui-muted);line-height:1.5}
.modal .actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px;position:sticky;bottom:-20px;padding:10px 0 4px;background:var(--ui)}
.b1.danger{background:var(--danger);border-color:var(--danger);color:#fff}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:40;padding:11px 16px;border-radius:12px;background:var(--ui-text);color:var(--paper);font-size:14px;box-shadow:var(--shadow)}
@media (max-width:520px){ .top{padding:10px 14px} .top .b1 span{display:none} .top .b1{padding:0 12px} main{padding:18px 14px 50px} .grid{grid-template-columns:1fr 1fr;gap:12px} .binfo{padding:10px 11px 12px} .btitle{font-size:15px} }
@media (max-width:360px){ .grid{grid-template-columns:1fr} }

/* Выбор темы */
.modal.wide{width:min(620px,100%)}
.modal.wide .err:empty{display:none}
.skin{position:relative;display:flex;gap:10px;padding:6px;border-radius:14px;border:1px solid var(--ui-border);background:var(--ui);color:var(--ui-text);cursor:pointer;text-align:left;font:inherit;touch-action:manipulation;transition:border-color .12s,box-shadow .12s}
@media (hover:hover) and (pointer:fine){ .skin:hover{border-color:var(--ui-muted)} }
.skin[aria-checked="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.skin:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.skin .txt{display:flex;flex-direction:column;gap:2px;padding:2px 4px 4px;min-width:0}
.skin strong{font-size:14.5px;font-weight:600}
.skin .hint{font-size:12.5px;color:var(--ui-muted);line-height:1.35}
/* образец доски */
.sw{position:relative;flex:none;height:68px;border-radius:9px;overflow:hidden;background-size:12px 12px;background-position:-1px -1px;box-shadow:inset 0 0 0 1px rgba(127,127,127,.18)}
.sw i{position:absolute;left:10px;bottom:9px;font:italic 19px/1 "STIX Two Text",Georgia,serif;white-space:nowrap}
.sw b{position:absolute;right:10px;top:10px;width:36px;height:22px;border:2px solid;border-radius:3px;transform:rotate(-8deg)}
/* отметка выбранной темы */
.skin .ok{position:absolute;top:12px;left:12px;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--accent-text);display:none;place-items:center;box-shadow:0 0 0 2px var(--ui)}
.skin .ok svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.skin[aria-checked="true"] .ok{display:grid}
/* «Как в системе» — широкая строка над сеткой */
.skwide{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 10px}
.skwide.one{grid-template-columns:1fr}
.skwide:not(.one) .skin.auto .sw{width:42px;height:42px}
.skwide:not(.one) .skin.auto .sw i{font-size:13px;left:6px;bottom:6px}
.skin.auto{width:100%;align-items:center}
.skin.auto .pair{display:flex;flex:none;gap:4px}
.skin.auto .sw{width:62px;height:52px}
.skin.auto .sw i{left:7px;bottom:7px;font-size:15px}
.skin.auto .ok{position:static;margin:0 8px 0 auto;flex:none}
.skin.auto .txt{padding:0 4px}
/* шесть тем — ровная сетка 3×2 (на телефоне 2×3) */
.skins{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.skins .skin{flex-direction:column;gap:6px}
.skins .sw{width:100%}
@media (max-width:520px){
  .skwide{grid-template-columns:1fr;gap:8px;margin-bottom:8px}
  .skins{grid-template-columns:1fr 1fr;gap:8px}
  .skins .sw{height:56px}
  .sw i{font-size:16px;left:8px;bottom:7px}
  .sw b{width:30px;height:18px;right:8px;top:8px}
  .skins .skin .hint{display:none}
  .skin .ok{top:10px;left:10px}
  .skin.auto .sw{width:52px;height:46px}
  .skin.auto .sw i{font-size:13px;left:6px;bottom:6px}
}

/* Учителя */
.users{display:flex;flex-direction:column;margin:0 0 4px}
.urow{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--ui-border);flex-wrap:wrap}
.urow:first-child{border-top:0}
.urow i{flex:none;width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--accent-text);display:grid;place-items:center;font-style:normal;font-weight:600;font-size:14px}
.uinfo{flex:1 1 160px;min-width:0;display:flex;flex-direction:column;gap:2px}
.uinfo b{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uinfo span{font-size:13px;color:var(--ui-muted)}
.b2.sm{height:34px;padding:0 12px;font-size:14px;border-radius:8px}
.b2.danger{color:var(--danger)}

.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 16px}
.filters input{flex:1 1 260px;max-width:440px;padding:10px 14px;border:1px solid var(--ui-border);border-radius:10px;background:var(--ui);color:var(--ui-text);font:inherit}
.tagbar{display:flex;gap:6px;flex-wrap:wrap}
.tagbar button{padding:6px 11px;border:1px solid var(--ui-border);border-radius:999px;background:var(--ui);color:var(--ui-text);font:inherit;font-size:13px;cursor:pointer}
.tagbar button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}
.btags{margin-top:4px;font-size:12px;color:var(--accent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.set{max-width:640px;display:flex;flex-direction:column;gap:14px;padding:22px}
.set h2{font-size:16px;margin:10px 0 0}
.set .hint{margin:-6px 0 0;font-size:13px;color:var(--ui-muted)}
.set .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.set .actions{display:flex;gap:10px;justify-content:flex-end;margin-top:6px}
.field select{width:100%;padding:10px 12px;border:1px solid var(--ui-border);border-radius:10px;background:var(--ui);color:var(--ui-text);font:inherit}
.backlink{text-decoration:none;display:inline-flex;align-items:center;padding:8px 14px;border-radius:10px}
@media (max-width:560px){.set .row2{grid-template-columns:1fr}}

.bcard.colored{box-shadow:inset 0 4px 0 var(--bc)}
.archbtn{padding:6px 11px;border:1px solid var(--ui-border);border-radius:999px;background:var(--ui);color:var(--ui-text);font:inherit;font-size:13px;cursor:pointer}
.archbtn.on{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}
.setpage{max-width:980px}
.setsearch{width:100%;max-width:520px;padding:11px 14px;border:1px solid var(--ui-border);border-radius:12px;background:var(--ui);color:var(--ui-text);font:inherit;margin:0 0 16px}
.savedmark{margin-left:12px;font-size:14px;color:var(--ui-muted)}
.setwrap{display:grid;grid-template-columns:200px minmax(0,1fr);gap:22px;align-items:start}
.settabs{display:flex;flex-direction:column;gap:4px;position:sticky;top:12px}
.settabs button{text-align:left;padding:10px 14px;border:0;border-radius:10px;background:transparent;color:var(--ui-text);font:inherit;cursor:pointer}
.settabs button[aria-selected="true"]{background:var(--accent);color:var(--accent-text)}
.settabs button:not([aria-selected="true"]):hover{background:var(--ui-hover)}
.setmain section{background:var(--ui);border:1px solid var(--ui-border);border-radius:16px;padding:6px 20px 14px;margin-bottom:16px}
.setmain h2{font-size:17px;margin:14px 0 4px}
.setrow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid var(--ui-border)}
.setmain h2+.setrow{border-top:0}
.setrow small{display:block;margin-top:3px;font-size:13px;color:var(--ui-muted);max-width:46ch}
.setrow select,.setrow input:not([type=checkbox]){min-width:190px;max-width:260px;padding:9px 12px;border:1px solid var(--ui-border);border-radius:10px;background:var(--ui);color:var(--ui-text);font:inherit}
.seg{display:flex;border:1px solid var(--ui-border);border-radius:10px;overflow:hidden}
.seg button{padding:8px 13px;border:0;background:transparent;color:var(--ui-text);font:inherit;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-text)}
.accs{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.acc{width:30px;height:30px;border-radius:50%;border:2px solid var(--ui);box-shadow:0 0 0 1px var(--ui-border);cursor:pointer}
.acc[aria-pressed="true"]{box-shadow:0 0 0 2px var(--accent)}
.sw2{position:relative;display:inline-block;width:46px;height:28px;flex:none}
.sw2 input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.sw2 i{position:absolute;inset:0;border-radius:999px;background:var(--ui-border);transition:background .15s;pointer-events:none}
.sw2 i::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.sw2 input:checked+i{background:var(--accent)}
.sw2 input:checked+i::after{transform:translateX(18px)}
kbd{display:inline-block;padding:2px 7px;border:1px solid var(--ui-border);border-bottom-width:2px;border-radius:6px;background:var(--ui);font:600 12px system-ui,sans-serif}
@media (max-width:720px){.setwrap{grid-template-columns:1fr}.settabs{flex-direction:row;overflow-x:auto;position:static;padding-bottom:4px}.settabs button{white-space:nowrap}.setrow{flex-wrap:wrap}.setrow select,.setrow input:not([type=checkbox]){max-width:none;width:100%}}

.hello{margin:-6px 0 14px;font-size:15px;color:var(--ui-muted)}
.sortsel{padding:6px 10px;border:1px solid var(--ui-border);border-radius:999px;background:var(--ui);color:var(--ui-text);font:inherit;font-size:13px}

.grid.list{grid-template-columns:1fr!important}
.grid.list .bcard{display:grid;grid-template-columns:150px minmax(0,1fr) auto;align-items:center}
.grid.list .bthumb{height:90px;aspect-ratio:auto}
.grid.list .newcard{min-height:64px}

.hero{margin:-4px 0 18px;padding:18px 20px;border-radius:18px;border:1px solid var(--ui-border);background:var(--ui);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 16%,var(--ui)),var(--ui) 70%);box-shadow:var(--shadow)}
.hero .hello{margin:0 0 12px;font-size:16px;color:var(--ui-text)}
.hero-act{display:flex;flex-wrap:wrap;gap:8px}
.hero-act button{padding:10px 14px;border-radius:12px;border:1px solid var(--ui-border);background:var(--ui);color:var(--ui-text);font:inherit;font-size:14px;cursor:pointer;transition:transform .12s,box-shadow .12s}
.hero-act button:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(20,30,50,.12)}
.hero .tip{margin:12px 0 0;font-size:13px;color:var(--ui-muted)}
.bmode{display:inline-block;margin-top:6px;padding:2px 9px;border-radius:999px;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--ui-text);font-size:12px}
.bcard{transition:transform .14s,box-shadow .14s}
.bcard:hover{transform:translateY(-2px)}

.hero .meme{cursor:pointer;margin-top:4px}
.hero .meme:hover{color:var(--ui-text)}

.hero{display:flex;flex-wrap:wrap;gap:18px;align-items:stretch}
.hero-main{flex:1 1 320px;min-width:0}
.memecard{flex:0 0 290px;margin:0;border-radius:14px;overflow:hidden;cursor:pointer;user-select:none;box-shadow:0 8px 24px rgba(0,0,0,.2);transition:transform .15s,box-shadow .15s;outline-offset:3px}
.memecard:hover{transform:rotate(-1.2deg) scale(1.02);box-shadow:0 12px 30px rgba(0,0,0,.26)}
.memecard.f-top{display:flex;flex-direction:column;justify-content:space-between;align-items:center;gap:6px;min-height:210px;padding:12px;background:radial-gradient(circle at 50% 45%,#5b6474,#1c2027)}
.memecard .cap{font:900 18px/1.08 Impact,'Arial Black','Golos Text',sans-serif;text-transform:uppercase;color:#fff;text-align:center;letter-spacing:.3px;-webkit-text-stroke:1.2px #000;paint-order:stroke fill;text-shadow:0 2px 0 #000,0 0 6px rgba(0,0,0,.6)}
.memecard .pic{font-size:82px;line-height:1;filter:drop-shadow(0 8px 10px rgba(0,0,0,.5))}
.memecard.f-drake{display:grid;grid-template-columns:76px 1fr;background:#fff}
.memecard .dk{display:grid;place-items:center;font-size:42px;min-height:104px;background:#F4C04A}
.memecard .dk.yes{background:#8FDB9C}
.memecard .dt{display:flex;align-items:center;padding:12px 14px;font:700 15px/1.25 'Golos Text',system-ui,sans-serif;color:#1b1f27}
.memecard .dt:first-of-type{border-bottom:2px solid #ececec}
.memecard .dt.yes{color:#0b6b2e}
.memecard.f-er{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:#0f1216;color:#fff}
.memecard .er-h{padding:7px 4px;text-align:center;font:900 13px Impact,'Arial Black',sans-serif;text-transform:uppercase;letter-spacing:.6px;background:#2a2f38}
.memecard .pic.sm{display:grid;place-items:center;font-size:52px;padding:14px 0;background:linear-gradient(#3a4250,#1f232a)}
.memecard .er-t{padding:7px 8px 11px;font:600 12.5px/1.25 'Golos Text',system-ui,sans-serif;text-align:center;background:#1f232a}
@media (max-width:680px){.memecard{flex-basis:100%}}

.devs{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.dev{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px;padding:8px 10px;border:1px solid var(--ui-border);border-radius:10px}
.dev .b2{padding:6px 12px;border-radius:8px}

.mock{position:relative;height:330px;margin:4px 0 10px;border:1px solid var(--ui-border);border-radius:16px;overflow:hidden;background-color:var(--paper,#FBFCFE);background-image:linear-gradient(var(--grid,#E3E8F0) 1px,transparent 1px),linear-gradient(90deg,var(--grid,#E3E8F0) 1px,transparent 1px);background-size:20px 20px}
.mtop{position:absolute;top:10px;left:10px;right:10px;display:flex;flex-wrap:wrap;gap:6px}
.mdock{position:absolute;left:0;right:0;bottom:12px;display:flex;flex-direction:column;align-items:center;gap:6px}
.mrow{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.mg{display:flex;gap:2px;padding:4px;border-radius:14px;background:var(--ui);border:1px solid var(--ui-border);box-shadow:var(--shadow)}
.mi{position:relative;display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:10px;background:transparent;color:var(--ui-text);cursor:pointer;touch-action:none;transition:opacity .12s,transform .12s}
.mi:hover{background:var(--ui-hover)}
.mi svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mi svg .fill{fill:currentColor;stroke:none}
.mi.wide{width:auto;padding:0 8px}
.mi .dots{display:flex;gap:4px}
.mi .dots i{width:16px;height:16px;border-radius:50%;display:block}
.mi.chipi{width:auto;height:30px;padding:0 10px;font-size:13px;border:1px solid var(--ui-border);border-radius:999px;background:var(--ui);box-shadow:var(--shadow)}
.mi.off{opacity:.3}
.mi.off::after{content:"";position:absolute;left:4px;right:4px;top:50%;height:2px;border-radius:2px;background:#E5484D;transform:rotate(-24deg)}
.mi.drag{opacity:.7;transform:scale(1.12);z-index:1}
.mock.sz-sm .mg .mi:not(.chipi):not(.wide){width:32px;height:32px}
.mock.sz-lg .mg .mi:not(.chipi):not(.wide){width:48px;height:48px}
.mock.sz-lg .mg .mi svg{width:26px;height:26px}
.mock{display:flex;flex-direction:column;justify-content:space-between;gap:24px;height:auto;min-height:330px;padding:10px 10px 12px}
.mock .mtop,.mock .mdock{position:static}

.kg{margin:16px 0 2px;font-size:12px;font-weight:600;color:var(--ui-muted);text-transform:uppercase;letter-spacing:.5px}
.kbtn{display:inline-flex;align-items:center;gap:3px;min-height:36px;padding:5px 10px;border:1px dashed var(--ui-border);border-radius:10px;background:var(--ui);color:var(--ui-text);font:inherit;font-size:14px;cursor:pointer;white-space:nowrap}
.kbtn:hover{border-style:solid}
.kbtn.rec{border-style:solid;border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
.kbtn .none{color:var(--ui-muted)}
@media (max-width:720px){
  .setpage{padding-left:12px;padding-right:12px}
  .setpage .head h1{font-size:24px}
  .setsearch{margin-bottom:10px;font-size:16px}
  .settabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;position:sticky;top:0;z-index:5;padding:8px 0;margin:0 0 4px;overflow:visible;background:var(--page)}
  .settabs button{text-align:center;padding:9px 4px;font-size:13.5px;line-height:1.15;white-space:normal;border:1px solid var(--ui-border);background:var(--ui)}
  .setmain section{padding:4px 14px 10px;border-radius:14px;margin-bottom:12px}
  .setmain h2{font-size:16px}
  .setrow{flex-wrap:wrap;gap:10px;padding:12px 0}
  .setrow>div:first-child{flex:1 1 180px;min-width:0}
  .setrow small{max-width:none}
  .setrow select,.setrow input:not([type=checkbox]){width:100%;max-width:none;min-width:0;font-size:16px}
  .seg{width:100%}
  .seg button{flex:1;padding:10px 4px}
  .accs{justify-content:flex-start;width:100%}
  .acc{width:38px;height:38px}
  .sw2{width:52px;height:32px}
  .sw2 i::after{width:26px;height:26px}
  .sw2 input:checked+i::after{transform:translateX(20px)}
  .mock{min-height:300px}
  .mock .mg .mi:not(.chipi):not(.wide){width:32px;height:32px}
  .mock .mi svg{width:18px;height:18px}
  .mock .mi.chipi{height:28px;font-size:12px;padding:0 8px}
  .dev{flex-wrap:wrap}
  .krow{flex-wrap:nowrap}
  .krow .kbtn{font-size:13px}
}

.memecard .dk{color:#6b4a00}.memecard .dk.yes{color:#0b6b2e}.memecard .dk .ic{stroke-width:2.6;width:38px;height:38px}
.hero-act button .ic{width:18px;height:18px}

.presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:10px 0 6px}
.pcard{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:12px;border:1px solid var(--ui-border);border-radius:14px;background:var(--ui);color:var(--ui-text);font:inherit;text-align:left;cursor:pointer;transition:transform .12s,box-shadow .12s}
.pcard:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(20,30,50,.1)}
.pcard.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.pcard b{font-size:15px}.pcard span{font-size:12.5px;color:var(--ui-muted)}
.pmini{display:block;width:100%;height:44px;border-radius:9px;border:1px solid var(--ui-border);margin-bottom:6px}
details.more{margin-top:6px;border-top:1px solid var(--ui-border)}
details.more>summary{padding:13px 0;cursor:pointer;font-weight:600;list-style:none}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::after{content:'▾';float:right;color:var(--ui-muted)}
details.more[open]>summary::after{content:'▴'}
@media (max-width:720px){.presets{grid-template-columns:repeat(2,minmax(0,1fr))}.pcard{padding:11px}}
.cfgtab{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px 20px;align-items:center;margin:8px 0;font-size:14px}
.cfgtab .h{font-size:12px;color:var(--ui-muted);font-weight:600}
.cfgtab .gh{grid-column:1/-1;margin:12px 0 0}
.cfgtab input[type=checkbox]{width:22px;height:22px;accent-color:var(--accent);justify-self:center}
.blist{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.brow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--ui-border);border-radius:12px}
.brow small{display:block;color:var(--ui-muted);font-size:12.5px}

.grid.list .newcard{display:flex;flex-direction:row;align-items:center;justify-content:center;grid-template-columns:none;min-height:64px;height:64px}
.grid.list .newcard span{display:inline-flex;align-items:center;gap:8px}
.howto{margin:8px 0 4px;padding-left:20px;line-height:1.55;font-size:14px;color:var(--ui-text)}
.howto li{margin:4px 0}
.mock [data-cap]{position:relative;margin-top:14px}
.mock [data-cap]::before{content:attr(data-cap);position:absolute;top:-15px;left:4px;font-size:11px;color:var(--ui-muted);white-space:nowrap}
.mock .mtop[data-cap]{margin-top:16px}
.helptoc{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.helptoc a{padding:6px 12px;border:1px solid var(--ui-border);border-radius:999px;background:var(--ui);color:var(--ui-text);font-size:13.5px;text-decoration:none}
.helptoc a:hover{border-color:var(--accent)}
.helpdoc details{padding:2px 0}
.helpdoc summary{list-style:none;cursor:pointer}
.helpdoc summary::-webkit-details-marker{display:none}
.helpdoc summary h2{display:inline;font-size:17px;margin:0}
.helpdoc summary::after{content:'▾';float:right;color:var(--ui-muted)}
.helpdoc details[open] summary::after{content:'▴'}
.helpdoc p{margin:8px 0;line-height:1.55;font-size:14.5px}
.join{display:flex;gap:8px;margin:0 0 6px}.join input{flex:1;min-width:0;padding:11px 14px;border:1px solid var(--ui-border);border-radius:12px;background:var(--ui);color:var(--ui-text);font:inherit}
.lay{display:grid;place-items:center;margin:8px 0}
.lay-screen{position:relative;width:min(280px,100%);height:170px;border:2px solid var(--ui-border);border-radius:14px;background:var(--paper,#FBFCFE);overflow:hidden}
.lay-screen .lay-in{position:absolute;inset:30px 34px;border:1px dashed var(--ui-border);border-radius:8px;display:grid;place-items:center;color:var(--ui-muted);font-size:13px}
.lay-edge{position:absolute;border:0;border-radius:8px;background:var(--ui-border);cursor:pointer;color:var(--ui-text);font:inherit;font-size:11px}
.lay-edge.on{background:var(--accent);color:var(--accent-text)}
.lay-edge[data-p=top]{left:34px;right:34px;top:4px;height:22px}.lay-edge[data-p=bottom]{left:34px;right:34px;bottom:4px;height:22px}
.lay-edge[data-p=left]{left:4px;top:30px;bottom:30px;width:26px;writing-mode:vertical-rl}.lay-edge[data-p=right]{right:4px;top:30px;bottom:30px;width:26px;writing-mode:vertical-rl}
.mymeme{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.mymeme img{width:96px;height:96px;object-fit:cover;border-radius:14px;border:1px solid var(--ui-border);background:var(--ui)}

.lay-screen .lay-edge[data-p=top]{display:none}
.lay-dot{position:absolute;width:18px;height:18px;padding:0;border-radius:50%;border:2px solid var(--ui-border);background:var(--ui);cursor:pointer}
.lay-dot.on{background:var(--accent);border-color:var(--accent)}
.lay-dot.auto.on{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent)}
.lay-dot[data-f=lm]{left:40px;top:calc(50% - 9px)}.lay-dot[data-f=rm]{right:40px;top:calc(50% - 9px)}
.lay-dot[data-f=lb]{left:40px;bottom:34px}.lay-dot[data-f=bc]{left:calc(50% - 9px);bottom:34px}.lay-dot[data-f=rb]{right:40px;bottom:34px}