:root { --bg:#f4f4f2; --surface:#fff; --ink:#19191d; --muted:#65656d; --line:#d9d9d5; --accent:#4e46dc; --accent-hover:#3e37b9; --danger:#b42318; --success:#18794e; --shadow:0 2px 7px rgba(18,18,22,.08); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--bg); font-family:"Archivo",Arial,sans-serif; line-height:1.45; }
button,input,textarea { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.auth-body { min-height:100vh; display:grid; place-items:center; padding:1.2rem; background:#1c1c22; }
.auth-shell { width:min(100%,440px); }
.auth-brand { display:inline-flex; align-items:center; gap:.65rem; margin-bottom:1.2rem; color:#fff; text-decoration:none; font-weight:700; }
.auth-brand span,.admin-brand span { width:2rem; height:2rem; display:grid; place-items:center; color:#fff; background:var(--accent); font-weight:850; }
.auth-panel { padding:2.2rem; background:var(--surface); box-shadow:8px 8px 0 #ff5b35; }
.auth-label { margin:0 0:.5rem; color:var(--accent); font-size:.78rem; font-weight:750; }
.auth-panel h1 { margin:0; font-size:2rem; letter-spacing:-.035em; }
.auth-panel > p:not(.auth-label):not(.auth-hint) { color:var(--muted); }
.auth-form { display:grid; gap:.55rem; margin-top:1.5rem; }
.auth-form label { font-size:.82rem; font-weight:700; }
.auth-form input { min-height:46px; padding:.7rem .8rem; border:1px solid var(--line); background:#fff; outline:none; }
.auth-form input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(78,70,220,.15); }
.auth-form button,.primary-button { min-height:42px; padding:.65rem 1rem; border:0; color:#fff; background:var(--accent); cursor:pointer; font-weight:720; }
.auth-form button:hover,.primary-button:hover { background:var(--accent-hover); }
.auth-error { margin-top:1rem; padding:.8rem; color:#842019; background:#fee9e7; font-size:.86rem; }
.auth-hint { margin:1.2rem 0 0; color:var(--muted); font-size:.78rem; }
.admin-header { min-height:64px; padding:0 clamp(1rem,4vw,3rem); display:flex; align-items:center; justify-content:space-between; gap:1rem; border-bottom:1px solid var(--line); background:var(--surface); }
.admin-header > div,.admin-header-actions { display:flex; align-items:center; gap:1rem; }
.admin-brand { display:flex; align-items:center; gap:.6rem; color:var(--ink); text-decoration:none; font-weight:750; }
.admin-section { padding-left:1rem; border-left:1px solid var(--line); color:var(--muted); font-size:.85rem; }
.admin-header-actions a,.text-button { border:0; color:var(--muted); background:transparent; cursor:pointer; text-decoration:none; font-size:.84rem; }
.admin-header-actions a:hover,.text-button:hover { color:var(--ink); }
.admin-main { width:min(1180px,calc(100% - 2rem)); margin:0 auto; padding:3.5rem 0 7rem; }
.admin-title-row { display:flex; justify-content:space-between; align-items:end; gap:1.5rem; margin-bottom:2rem; }
.admin-title-row p { margin:0 0:.25rem; color:var(--accent); font-size:.8rem; font-weight:750; }
.admin-title-row h1 { margin:0; font-size:2.25rem; letter-spacing:-.035em; }
.admin-title-row span { color:var(--muted); font-size:.85rem; }
.admin-toolbar { padding:1rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; border:1px solid var(--line); background:var(--surface); }
.admin-toolbar > div { display:flex; gap:.5rem; }
.admin-search { flex:1; }
.admin-search input { width:min(100%,320px); min-height:40px; padding:.6rem .75rem; border:1px solid var(--line); background:var(--bg); outline:none; }
.admin-search input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(78,70,220,.12); }
.secondary-button,.danger-button,.icon-button { min-height:38px; padding:.55rem .8rem; border:1px solid var(--line); color:var(--ink); background:var(--surface); cursor:pointer; font-size:.82rem; font-weight:680; }
.secondary-button:hover,.icon-button:hover { background:#ececea; }
.danger-button { color:var(--danger); border-color:#efc8c4; }
.danger-button:hover { background:#fee9e7; }
.icon-button { width:38px; padding:0; }
.save-notice { min-height:22px; margin:1rem 0; color:var(--muted); font-size:.8rem; }
.save-notice.success { color:var(--success); }
.save-notice.error { color:var(--danger); }
.app-editor-list { display:grid; gap:.7rem; }
.editor-row { display:grid; grid-template-columns:110px minmax(0,1fr) auto; align-items:center; gap:1rem; border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow); }
.editor-preview { position:relative; align-self:stretch; min-height:100px; display:grid; place-items:center; overflow:hidden; color:var(--muted); background:#e5e5e2; font-size:.7rem; }
.editor-preview img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.editor-summary { min-width:0; padding:.8rem 0; }
.editor-meta { display:flex; align-items:center; gap:.55rem; }
.editor-category { color:var(--accent); font-size:.72rem; font-weight:750; }
.editor-status { padding:.15rem .42rem; color:var(--success); background:#e3f5ec; font-size:.68rem; font-weight:750; }
.editor-summary h2 { margin:.2rem 0; font-size:1.08rem; }
.editor-summary p { margin:0; max-width:65ch; color:var(--muted); font-size:.82rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.editor-actions { display:flex; gap:.4rem; padding-right:1rem; }
.status-button { min-height:38px; padding:.55rem .8rem; border:1px solid #efc8c4; color:var(--danger); background:var(--surface); cursor:pointer; font-size:.82rem; font-weight:680; }
.status-button:hover { background:#fee9e7; }
.status-button.enable-button { color:var(--success); border-color:#b8dfcc; }
.status-button.enable-button:hover { background:#e3f5ec; }
.editor-row.is-disabled { color:#5f5f66; background:#ededeb; box-shadow:none; }
.editor-row.is-disabled .editor-preview img { filter:grayscale(1); opacity:.48; }
.editor-row.is-disabled .editor-status { color:#5f5f66; background:#d9d9d5; }
.editor-form { grid-column:1/-1; padding:1.2rem; display:grid; grid-template-columns:1fr 1fr; gap:1rem; border-top:1px solid var(--line); background:#fafafa; }
.editor-form[hidden] { display:none; }
.editor-form label { display:grid; gap:.35rem; color:#3e3e45; font-size:.78rem; font-weight:680; }
.editor-form input,.editor-form textarea { width:100%; padding:.65rem .7rem; border:1px solid var(--line); background:#fff; outline:none; resize:vertical; }
.editor-form input:focus,.editor-form textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(78,70,220,.12); }
.field-wide { grid-column:1/-1; }
.apk-checkbox { min-height:48px; display:flex!important; grid-template-columns:none!important; align-items:center; gap:.65rem!important; padding:.7rem .8rem; border:1px solid var(--line); background:#fff; cursor:pointer; }
.apk-checkbox input { width:1.15rem!important; height:1.15rem; margin:0; padding:0!important; accent-color:var(--accent); }
.apk-checkbox span { font-size:.82rem; font-weight:750; }
.rich-field { display:grid; gap:.35rem; }
.field-label { color:#3e3e45; font-size:.78rem; font-weight:680; }
.editor-toolbar { display:flex; flex-wrap:wrap; gap:1px; padding:.35rem; border:1px solid var(--line); border-bottom:0; background:#ececea; }
.editor-toolbar button { min-height:34px; padding:.35rem .65rem; border:0; color:var(--ink); background:#fff; cursor:pointer; font-size:.78rem; }
.editor-toolbar button:hover { color:#fff; background:var(--accent); }
.editor-toolbar button:active { background:var(--accent-hover); }
.rich-editor { min-height:150px; padding:.8rem; border:1px solid var(--line); background:#fff; outline:none; font-size:.9rem; font-weight:400; line-height:1.55; overflow-wrap:anywhere; }
.rich-editor:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(78,70,220,.12); }
.rich-editor:empty::before { content:attr(data-placeholder); color:#686870; pointer-events:none; }
.rich-editor p,.rich-editor div { margin:.25rem 0 .65rem; }
.rich-editor ul,.rich-editor ol { margin:.5rem 0; padding-left:1.5rem; }
.rich-editor a { color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.rich-field small { color:var(--muted); font-size:.72rem; font-weight:400; }
.screenshot-field { display:grid; gap:.45rem; }
.screenshot-field small { color:var(--muted); font-size:.72rem; font-weight:400; }
.screenshot-upload-row { display:flex; align-items:center; gap:.6rem; padding:.7rem; border:1px solid var(--line); background:#fff; }
.screenshot-input { min-width:0; flex:1; padding:0!important; border:0!important; box-shadow:none!important; font-size:.78rem; }
.admin-screenshot-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:.65rem; margin-top:.35rem; }
.admin-screenshot { position:relative; aspect-ratio:16/10; margin:0; overflow:visible; border:1px solid var(--line); background:#e5e5e2; cursor:grab; transition:opacity .18s,transform .18s,box-shadow .18s; }
.admin-screenshot:active { cursor:grabbing; }
.admin-screenshot.is-dragging { opacity:.35; transform:scale(.96); }
.admin-screenshot.drop-before::before,.admin-screenshot.drop-after::after { content:""; position:absolute; z-index:4; top:-4px; bottom:-4px; width:4px; background:var(--accent); pointer-events:none; }
.admin-screenshot.drop-before::before { left:-6px; }
.admin-screenshot.drop-after::after { right:-6px; }
.admin-screenshot:focus-visible { outline:3px solid rgba(78,70,220,.42); outline-offset:3px; }
.admin-screenshot img { width:100%; height:100%; object-fit:cover; }
.screenshot-drag-handle { position:absolute; left:.35rem; bottom:.35rem; z-index:2; min-width:30px; min-height:30px; display:grid; place-items:center; color:#fff; background:rgba(25,25,29,.88); font-size:1rem; font-weight:800; pointer-events:none; }
.remove-screenshot { position:absolute; top:.35rem; right:.35rem; min-width:30px; min-height:30px; padding:0; border:0; color:#fff; background:rgba(25,25,29,.88); cursor:pointer; font-size:1rem; }
.remove-screenshot:hover { background:var(--danger); }
.form-actions { display:flex; justify-content:flex-end; gap:.6rem; }
.sticky-save { position:fixed; z-index:10; inset:auto 0 0; min-height:68px; padding:.8rem max(1rem,calc((100vw - 1180px)/2)); display:flex; align-items:center; justify-content:space-between; gap:1rem; color:#fff; background:#24242b; box-shadow:0 -4px 8px rgba(0,0,0,.12); }
.sticky-save[hidden] { display:none; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,.rich-editor:focus-visible { outline:3px solid rgba(78,70,220,.35); outline-offset:2px; }
button:disabled { opacity:.5; cursor:not-allowed; }
@media (max-width:820px) { .admin-header{align-items:flex-start;padding-block:.8rem}.admin-section{display:none}.admin-header-actions{flex-direction:column;align-items:flex-end!important;gap:.2rem}.admin-title-row,.admin-toolbar{align-items:stretch;flex-direction:column}.admin-toolbar>div{flex-wrap:wrap}.editor-row{grid-template-columns:82px minmax(0,1fr)}.editor-actions{grid-column:1/-1;padding:0 .7rem .7rem;flex-wrap:wrap}.editor-form{grid-template-columns:1fr}.field-wide{grid-column:auto}.screenshot-upload-row{align-items:stretch;flex-direction:column}.screenshot-upload-row .secondary-button{width:100%}.sticky-save span{font-size:.8rem} }