/* Magazine — the editor, the reader and the shared page surface.
 *
 * Scoped under .mg- prefixes throughout so nothing here can reach the rest of the ERP's
 * stylesheets, which are large, old and full of bare element selectors.
 *
 * The editor is LIGHT and colour-coded, laid out the way a page designer is expected to
 * be: a narrow icon rail on the left, the panel that rail opens beside it, the canvas in
 * the middle, the properties panel on the right, and a second narrow rail on the far
 * right for the actions that are not about the selected element (undo, layers, spread
 * view, shortcuts). Each left-rail tab owns a colour, so "where the images live" is a
 * thing you learn once by colour rather than by reading six labels every time.
 *
 * The reader is the one part that has to be comfortable on a phone, so that is where the
 * media queries are.
 */

/* ===================== shared page surface ============================= */
.mg-page {
    position: relative;
    overflow: hidden;
    background: var(--mk-white);
    box-shadow: 0 6px 28px rgba(15, 23, 42, .18);
}
.mg-el { position: absolute; }
/* A frame with no fill of its own: neutral hatch, so it reads as "nothing here yet". */
.mg-el-image-empty {
    background: repeating-linear-gradient(45deg, var(--mk-blue-100), var(--mk-blue-100) 10px, var(--mk-blue-200) 10px, var(--mk-blue-200) 20px);
}
/* A frame the template coloured: keep its own fill and put the marker on top of it. */
.mg-el-image-tinted .mg-img-placeholder { color: rgba(255, 255, 255, .82); }
.mg-img-placeholder {
    position: absolute; inset: 0; display: flex; align-items: center;
    justify-content: center; color: var(--mk-slate-400); pointer-events: none;
}
.mg-img-placeholder svg { width: 26%; height: 26%; max-width: 54px; max-height: 54px; opacity: .85; }
.mg-img-placeholder.is-tinted svg { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .25)); }
.mg-thumb { position: relative; overflow: hidden; background: var(--mk-white); }
.mg-thumb-inner { position: absolute; top: 0; left: 0; }

/* ===================== editor shell =================================== */
.mg-editor {
    position: fixed; inset: 0; display: grid;
    grid-template-rows: 56px 1fr;
    grid-template-columns: 66px 244px 1fr 296px 54px;
    grid-template-areas: "top top top top top" "rail left canvas right rrail";
    background: var(--mk-blue-100-21); font-family: system-ui, "Segoe UI", Battambang, sans-serif;
    color: var(--mk-blue-950); overflow: hidden;
    --mg-blue: var(--mk-blue-500); --mg-violet: var(--mk-indigo-500); --mg-pink: var(--mk-pink-600);
    --mg-amber: var(--mk-orange-600); --mg-green: var(--mk-green-800-2); --mg-cyan: var(--mk-cyan-700-4);
    --mg-line: var(--mk-blue-200-33);
}

/* --- top bar: white, with the actions colour-coded by weight ---------- */
.mg-topbar {
    grid-area: top; display: flex; align-items: center; gap: 7px;
    padding: 0 12px; background: var(--mk-white); color: var(--mk-blue-950);
    border-bottom: 1px solid var(--mg-line); overflow-x: auto; overflow-y: hidden;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .05); z-index: 40;
}
.mg-topbar .mg-title-input {
    background: var(--mk-blue-50-9); border: 1px solid transparent; color: var(--mk-blue-950);
    font-size: 14px; font-weight: 700; padding: 7px 11px; border-radius: 9px;
    min-width: 160px; max-width: 280px;
}
.mg-topbar .mg-title-input:hover { border-color: var(--mk-slate-300-2); background: var(--mk-white); }
.mg-topbar .mg-title-input:focus {
    border-color: var(--mg-blue); outline: none; background: var(--mk-white);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}
.mg-sep { width: 1px; height: 26px; background: var(--mg-line); flex: 0 0 1px; margin: 0 2px; }
.mg-spacer { flex: 1 1 auto; }

.mg-btn {
    display: inline-flex; align-items: center; gap: 7px; height: 36px;
    padding: 0 12px; border-radius: 9px; border: 1px solid var(--mg-line);
    background: var(--mk-white); color: var(--mk-slate-800); font-size: 13px; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    transition: background .13s, border-color .13s, color .13s, box-shadow .13s;
}
.mg-btn:hover:not(:disabled) {
    background: var(--mk-blue-50-10); border-color: var(--mk-blue-200-14); color: var(--mg-blue);
}
.mg-btn:disabled { opacity: .38; cursor: not-allowed; }
.mg-btn i { font-size: 14px; }
/* Icon-only buttons carry their meaning in colour, so the icon is never grey. */
.mg-btn-icon { padding: 0 10px; }
.mg-btn-icon i { color: var(--mk-slate-600); }
.mg-btn-icon:hover:not(:disabled) i { color: var(--mg-blue); }
.mg-btn-icon.mg-tone-undo i { color: var(--mg-violet); }
.mg-btn-icon.mg-tone-page i { color: var(--mg-cyan); }
.mg-btn-icon.mg-tone-zoom i { color: var(--mg-amber); }
.mg-btn-icon.mg-tone-danger i { color: var(--mk-rose-600-10); }
.mg-btn-icon:disabled i { color: var(--mk-slate-400) !important; }

.mg-btn-primary {
    background: linear-gradient(135deg, var(--mk-blue-500-3), var(--mk-blue-500)); border-color: var(--mk-blue-500);
    color: var(--mk-white); box-shadow: 0 2px 8px rgba(37, 99, 235, .28);
}
.mg-btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--mk-blue-500), var(--mk-blue-600)); color: var(--mk-white);
    border-color: var(--mk-blue-600);
}
.mg-btn-primary i { color: var(--mk-white) !important; }
.mg-btn-ok {
    background: linear-gradient(135deg, var(--mk-green-700-3), var(--mk-green-800-2)); border-color: var(--mk-green-800-2);
    color: var(--mk-white); box-shadow: 0 2px 8px rgba(5, 150, 105, .26);
}
.mg-btn-ok:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--mk-green-800-2), var(--mk-green-800-5)); color: var(--mk-white);
    border-color: var(--mk-green-800-5);
}
.mg-btn-ok i { color: var(--mk-white) !important; }
.mg-btn-eye {
    background: linear-gradient(135deg, var(--mk-indigo-300), var(--mk-indigo-500)); border-color: var(--mk-indigo-500);
    color: var(--mk-white); box-shadow: 0 2px 8px rgba(124, 58, 237, .24);
}
.mg-btn-eye:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--mk-indigo-500), var(--mk-indigo-600)); color: var(--mk-white);
    border-color: var(--mk-indigo-600);
}
.mg-btn-eye i { color: var(--mk-white) !important; }

.mg-status {
    display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
    padding: 6px 12px; border-radius: 999px; font-weight: 700; white-space: nowrap;
}
.mg-status::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor;
}
.mg-status-saved   { background: var(--mk-green-200); color: var(--mk-green-800); }
.mg-status-saving  { background: var(--mk-blue-200-2); color: var(--mk-blue-600); }
.mg-status-dirty   { background: var(--mk-amber-200); color: var(--mk-orange-700); }
.mg-status-failed  { background: var(--mk-rose-100); color: var(--mk-rose-700); }

/* --- left icon rail: one colour per tab ------------------------------- */
.mg-rail {
    grid-area: rail; background: var(--mk-slate-900-15); border-right: 1px solid var(--mk-slate-900-20);
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 8px 0; overflow-y: auto;
}
.mg-rail::-webkit-scrollbar { width: 0; }
.mg-railbtn {
    width: 58px; padding: 9px 2px 7px; border: 0; background: transparent;
    border-radius: 10px; cursor: pointer; display: flex; flex-direction: column;
    align-items: center; gap: 5px; color: var(--mk-slate-300-2); font-size: 9px; font-weight: 600;
    letter-spacing: .2px; transition: background .13s, color .13s; flex: none;
    /* The caption must never reach past the rail: an overflowing label used to print
       across the edge of the canvas. */
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 62px;
}
.mg-railbtn > span:last-child {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mg-railbtn .mg-railicon {
    width: 32px; height: 32px; border-radius: 10px; display: inline-flex;
    align-items: center; justify-content: center; font-size: 15px;
    color: var(--mk-white); background: var(--mk-slate-600);
    box-shadow: 0 2px 6px rgba(2, 6, 23, .38);
    transition: transform .13s, box-shadow .13s;
}
.mg-railbtn:hover { background: var(--mk-slate-800-21); color: var(--mk-white); }
.mg-railbtn:hover .mg-railicon { transform: translateY(-1px); }
.mg-railbtn.is-active, .mg-railbtn.is-open { background: var(--mk-slate-800-14); color: var(--mk-white); }
.mg-railbtn.is-active .mg-railicon, .mg-railbtn.is-open .mg-railicon {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .34), 0 3px 10px rgba(2, 6, 23, .46);
}

/* --- the More flyout -------------------------------------------------- */
.mg-moremenu {
    position: fixed; left: 66px; top: 0; z-index: 60; display: none;
    min-width: 172px; padding: 8px; background: var(--mk-slate-900-15); border: 1px solid var(--mk-slate-900-20);
    border-radius: 10px; box-shadow: 0 14px 38px rgba(2, 6, 23, .42);
}
.mg-moremenu.is-open { display: block; }
.mg-moreitem {
    width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 12px;
    border: 0; background: transparent; border-radius: 8px; cursor: pointer;
    color: var(--mk-blue-200); font-size: 12.5px; font-weight: 500; text-align: left;
}
.mg-morechip {
    flex: 0 0 24px; width: 24px; height: 24px; border-radius: 7px; background: var(--mk-slate-600);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; color: var(--mk-white); box-shadow: 0 2px 5px rgba(2, 6, 23, .34);
}
.mg-moreitem:hover { background: var(--mk-slate-800-14); color: var(--mk-white); }

/* --- left panel ------------------------------------------------------- */
.mg-side {
    background: var(--mk-white); border-right: 1px solid var(--mg-line); display: flex;
    flex-direction: column; min-height: 0;
}
.mg-side-left { grid-area: left; }
.mg-side-right { grid-area: right; border-right: none; border-left: 1px solid var(--mg-line); }
.mg-panelhead {
    display: flex; align-items: center; gap: 9px; padding: 12px 14px 10px;
    border-bottom: 1px solid var(--mk-blue-100-2); flex: 0 0 auto;
}
.mg-panelhead .mg-dot {
    width: 26px; height: 26px; border-radius: 9px; display: inline-flex;
    align-items: center; justify-content: center; color: var(--mk-white); font-size: 13px;
    flex: 0 0 26px; background: var(--mk-slate-600);
}
.mg-panelhead b { font-size: 14px; font-weight: 800; }
.mg-panel { display: none; padding: 12px 14px 18px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.mg-panel.is-active { display: block; }
.mg-panel h4 {
    margin: 0 0 9px; font-size: 10.5px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 1px; color: var(--mk-slate-400);
}
.mg-panel h4:not(:first-child) { margin-top: 20px; }

/* --- right icon rail: everything that is not about the selection ------ */
.mg-rrail {
    grid-area: rrail; background: var(--mk-white); border-left: 1px solid var(--mg-line);
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 12px 0;
}
.mg-rrailbtn {
    width: 40px; height: 40px; border: 1px solid transparent; border-radius: 11px;
    background: var(--mk-blue-50-9); color: var(--mk-slate-700); cursor: pointer; font-size: 15px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .13s, color .13s, border-color .13s;
}
.mg-rrailbtn:hover:not(:disabled) { background: var(--mk-blue-100-41); color: var(--mg-blue); border-color: var(--mk-blue-200-14); }
.mg-rrailbtn:disabled { opacity: .35; cursor: not-allowed; }
.mg-rrailbtn.is-on { background: var(--mg-blue); color: var(--mk-white) !important; border-color: var(--mg-blue); }
.mg-rrail-sep { width: 24px; height: 1px; background: var(--mg-line); margin: 4px 0; }

/* --- canvas ----------------------------------------------------------- */
.mg-canvas-wrap {
    grid-area: canvas; overflow: auto;
    background: var(--mk-blue-100-21) radial-gradient(circle at 1px 1px, var(--mk-blue-200-34) 1px, transparent 0) 0 0 / 22px 22px;
    display: flex; align-items: flex-start; justify-content: center;
    padding: 30px 20px 96px; min-width: 0;
}
.mg-soon {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 8px; padding: 30px 16px; color: var(--mk-slate-600);
}
.mg-soon i { font-size: 30px; color: var(--mk-slate-300-2); }
.mg-soon b { font-size: 14px; color: var(--mk-blue-950); }
.mg-soon span { font-size: 12px; line-height: 1.6; }
.mg-soon em {
    margin-top: 4px; font-style: normal; font-size: 10px; font-weight: 700;
    letter-spacing: .6px; text-transform: uppercase; color: var(--mk-orange-700);
    background: var(--mk-amber-200); border-radius: 999px; padding: 4px 10px;
}
.mg-canvas-wrap.mg-panning { cursor: grabbing; user-select: none; }
.mg-canvas-wrap.mg-panning * { pointer-events: none; }
.mg-canvas-scale { transform-origin: top center; position: relative; }
.mg-page-host { position: relative; }
/* The facing page in spread view: shown for checking a spread, never edited. */
.mg-facing {
    position: absolute; top: 0; left: 0; margin-left: 16px;
    transform: translateX(100%);
    box-shadow: 0 6px 28px rgba(15, 23, 42, .14); opacity: .96; pointer-events: none;
    overflow: hidden;
}
.mg-facing::after {
    content: 'FACING PAGE'; position: absolute; top: 10px; left: 10px;
    background: rgba(15, 23, 42, .72); color: var(--mk-white); font: 800 11px/1 system-ui, sans-serif;
    letter-spacing: 2px; padding: 6px 10px; border-radius: 6px;
}

/* selection chrome — drawn OVER the page so it never becomes part of the design */
.mg-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 90000; }
.mg-marquee {
    position: absolute; border: 1.5px solid var(--mk-blue-500); background: rgba(37, 99, 235, .10);
    pointer-events: none;
}
.mg-sel { position: absolute; border: 1.5px solid var(--mk-blue-500); pointer-events: none; box-sizing: border-box; }
.mg-sel.is-secondary { border-style: dashed; border-color: var(--mk-blue-400-5); }
.mg-handle {
    position: absolute; width: 10px; height: 10px; background: var(--mk-white);
    border: 1.5px solid var(--mk-blue-500); border-radius: 2px; pointer-events: auto;
    box-sizing: border-box;
}
.mg-handle-rot { border-radius: 50%; background: var(--mk-indigo-500); border-color: var(--mk-white); cursor: grab; }
.mg-hint {
    position: absolute; top: -22px; left: 0; background: var(--mk-blue-500); color: var(--mk-white);
    font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 5px; white-space: nowrap;
}
.mg-guide { position: absolute; background: var(--mk-pink-500); pointer-events: none; }

.mg-el.mg-editing { outline: 2px solid var(--mk-green-800-2); outline-offset: 1px; cursor: text; }
.mg-page-host > .mg-el { cursor: move; }
.mg-page-host .mg-el a { pointer-events: none; }

/* --- floating page bar ------------------------------------------------ */
.mg-pagebar {
    position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: 8px; background: var(--mk-white); color: var(--mk-blue-950);
    padding: 7px 10px; border-radius: 999px; border: 1px solid var(--mg-line);
    box-shadow: 0 8px 26px rgba(15, 23, 42, .14); z-index: 60; font-size: 13px;
    font-weight: 700;
}
.mg-pagebar button {
    border: 0; background: var(--mk-blue-100-11); color: var(--mk-blue-500); width: 30px; height: 30px;
    border-radius: 50%; cursor: pointer;
}
.mg-pagebar button:hover:not(:disabled) { background: var(--mk-blue-500); color: var(--mk-white); }
.mg-pagebar button:disabled { opacity: .35; cursor: not-allowed; }

/* --- page list -------------------------------------------------------- */
.mg-pagelist { display: flex; flex-direction: column; gap: 8px; }
.mg-pagecard {
    display: flex; gap: 9px; align-items: center; padding: 6px; border-radius: 10px;
    border: 1.5px solid var(--mk-blue-100-8); cursor: pointer; background: var(--mk-white);
}
.mg-pagecard:hover { border-color: var(--mk-blue-300-4); background: var(--mk-slate-50-13); }
.mg-pagecard.is-active { border-color: var(--mg-cyan); background: var(--mk-teal-100-5); }
.mg-pagecard.is-dragging { opacity: .45; }
.mg-pagecard.is-dropbefore { border-top: 3px solid var(--mg-cyan); }
.mg-pagecard.is-dropafter { border-bottom: 3px solid var(--mg-cyan); }
.mg-pagecard .mg-thumb { border: 1px solid var(--mk-blue-200-15); border-radius: 5px; flex: 0 0 auto; }
/* The reserved box a miniature is drawn into once the card scrolls near view. Sized
   up front so a 200-page list does not reflow as the thumbnails arrive. */
.mg-thumbslot {
    flex: 0 0 auto; background: var(--mk-blue-50-8); border: 1px solid var(--mk-blue-200-15); border-radius: 5px;
}
.mg-thumbslot .mg-thumb { border: 0; }
.mg-pagecard-meta { flex: 1 1 auto; min-width: 0; }
.mg-pagecard-meta b { display: block; font-size: 12.5px; }
.mg-pagecard-meta span { font-size: 11px; color: var(--mk-slate-500-8); }
.mg-pagecard-acts { display: flex; flex-direction: column; gap: 3px; }
.mg-mini {
    border: 0; background: var(--mk-blue-100-2); color: var(--mk-slate-600); width: 25px; height: 23px;
    border-radius: 6px; cursor: pointer; font-size: 11px;
}
.mg-mini:hover { background: var(--mk-blue-200-2); color: var(--mg-blue); }
.mg-mini-danger:hover { background: var(--mk-rose-100); color: var(--mk-rose-700); }

/* --- template + asset grids ------------------------------------------ */
.mg-tplgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mg-tplcard {
    border: 1.5px solid var(--mk-blue-100-8); border-radius: 10px; overflow: hidden; cursor: pointer;
    background: var(--mk-white); text-align: left; padding: 0; transition: border-color .13s, box-shadow .13s;
}
.mg-tplcard:hover { border-color: var(--mg-violet); box-shadow: 0 6px 18px rgba(124, 58, 237, .14); }
.mg-tplcard.is-active { border-color: var(--mg-violet); box-shadow: 0 0 0 2px var(--mk-indigo-200); }
.mg-tplcard .mg-thumb { margin: 0 auto; }
.mg-tplcard-body { padding: 7px 9px; border-top: 1px solid var(--mk-blue-100-2); }
.mg-tplcard-body b { display: block; font-size: 11.5px; line-height: 1.3; }
.mg-tplcard-body span { font-size: 10px; color: var(--mk-slate-400); text-transform: uppercase; letter-spacing: .5px; }

.mg-imggrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mg-imgcard {
    position: relative; border: 1.5px solid var(--mk-blue-100-8); border-radius: 9px; overflow: hidden;
    aspect-ratio: 4 / 3; cursor: pointer; background: var(--mk-blue-50);
}
.mg-imgcard img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mg-imgcard:hover { border-color: var(--mg-pink); }
.mg-imgcard .mg-imgdel {
    position: absolute; top: 4px; right: 4px; width: 21px; height: 21px; border: 0;
    border-radius: 50%; background: rgba(15, 23, 42, .75); color: var(--mk-white); font-size: 11px;
    cursor: pointer; display: none;
}
.mg-imgcard:hover .mg-imgdel { display: block; }

.mg-drop {
    border: 2px dashed var(--mk-blue-200-35); border-radius: 12px; padding: 20px 10px; text-align: center;
    color: var(--mk-slate-600); font-size: 12px; cursor: pointer;
    background: linear-gradient(135deg, var(--mk-slate-50-7), var(--mk-blue-100-11));
}
.mg-drop.is-over { border-color: var(--mg-pink); background: var(--mk-pink-50); color: var(--mk-pink-700); }
.mg-drop i { display: block; font-size: 24px; margin-bottom: 7px; color: var(--mg-pink); }

/* --- add-element buttons --------------------------------------------- */
.mg-addgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mg-add {
    display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 13px 6px;
    border: 1.5px solid var(--mk-blue-100-8); border-radius: 10px; background: var(--mk-white); cursor: pointer;
    font-size: 11px; font-weight: 700; color: var(--mk-slate-800); transition: border-color .13s, background .13s;
}
.mg-add:hover { border-color: var(--mg-amber); background: var(--mk-amber-100); color: var(--mk-orange-800); }
.mg-add i { font-size: 19px; color: var(--mg-amber); }
.mg-add .mg-swatchbox { width: 24px; height: 24px; background: var(--mg-blue); display: block; }
.mg-preset {
    width: 100%; text-align: left; border: 1.5px solid var(--mk-blue-100-8); border-radius: 10px;
    background: var(--mk-white); cursor: pointer; padding: 9px 11px; margin-bottom: 7px;
    color: var(--mk-blue-950); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mg-preset:hover { border-color: var(--mg-green); background: var(--mk-green-100); }

/* --- property rows ---------------------------------------------------- */
.mg-row { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.mg-row > label {
    flex: 0 0 62px; font-size: 10.5px; font-weight: 800; color: var(--mk-slate-500-8);
    text-transform: uppercase; letter-spacing: .4px;
}
.mg-row .mg-fields { flex: 1 1 auto; display: flex; gap: 6px; min-width: 0; }
.mg-in, .mg-sel-in {
    width: 100%; min-width: 0; height: 32px; padding: 0 8px; border: 1px solid var(--mk-blue-200-6);
    border-radius: 8px; font-size: 12px; color: var(--mk-blue-950); background: var(--mk-white);
    font-family: inherit;
}
.mg-in:focus, .mg-sel-in:focus {
    border-color: var(--mg-blue); outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, .13);
}
textarea.mg-in { height: 82px; padding: 7px 8px; resize: vertical; line-height: 1.5; }
.mg-color {
    width: 36px; height: 32px; padding: 2px; border: 1px solid var(--mk-blue-200-6); border-radius: 8px;
    background: var(--mk-white); cursor: pointer; flex: 0 0 36px;
}
.mg-range { flex: 1 1 auto; min-width: 0; accent-color: var(--mk-blue-500); }
/* A segmented control fills the field column. Without the flex here the group is
   only as wide as its own content, which squeezed "Crop Fit Stretch" into about
   half the panel and left the icon groups a third of it. */
.mg-group { display: flex; gap: 0; flex: 1 1 auto; min-width: 0; }
.mg-group button {
    flex: 1 1 0; min-width: 0; height: 32px; padding: 0 6px;
    border: 1px solid var(--mk-blue-200-6); background: var(--mk-white); cursor: pointer;
    font-size: 12px; line-height: 1; color: var(--mk-slate-700); margin-left: -1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: inline-flex; align-items: center; justify-content: center;
}
.mg-group button:first-child { margin-left: 0; border-radius: 8px 0 0 8px; }
.mg-group button:last-child { border-radius: 0 8px 8px 0; }
.mg-group button:hover { background: var(--mk-blue-50-10); color: var(--mg-blue); }
.mg-group button.is-on {
    background: linear-gradient(135deg, var(--mk-blue-500-3), var(--mk-blue-500)); border-color: var(--mk-blue-500); color: var(--mk-white);
}
.mg-empty { color: var(--mk-slate-400); font-size: 12px; text-align: center; padding: 26px 8px; line-height: 1.6; }
.mg-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.mg-swatch {
    width: 24px; height: 24px; border-radius: 7px; border: 1px solid rgba(15, 23, 42, .12);
    cursor: pointer; transition: transform .1s;
}
.mg-swatch:hover { transform: scale(1.14); }

/* --- page properties: size, schemes, background ----------------------- */
.mg-readonly {
    flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px;
    height: 32px; padding: 0 10px; border: 1px solid var(--mk-blue-200-16); border-radius: 8px;
    background: var(--mk-blue-50);
}
.mg-readonly span { font-size: 11px; font-weight: 700; color: var(--mk-slate-400); }
.mg-readonly b { font-size: 12.5px; color: var(--mk-slate-600); font-weight: 600; }

.mg-chip {
    display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 10px;
    background: var(--mk-blue-100-2); border-radius: 9px; font-size: 11.5px; color: var(--mk-slate-700);
}
.mg-chip > i { color: var(--mk-green-700); font-size: 13px; flex: 0 0 auto; }
.mg-chip > span { flex: 1 1 auto; min-width: 0; }
.mg-chip-x {
    flex: 0 0 auto; border: 0; background: none; cursor: pointer; color: var(--mk-slate-400);
    padding: 0; font-size: 14px; line-height: 1;
}
.mg-chip-x:hover { color: var(--mk-slate-700); }

.mg-schemes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.mg-scheme {
    border: 1.5px solid var(--mk-blue-200-16); border-radius: 10px; background: var(--mk-white); cursor: pointer;
    padding: 0; overflow: hidden; text-align: center; font-family: inherit;
}
.mg-scheme:hover { border-color: var(--mg-blue); box-shadow: 0 4px 14px rgba(37, 99, 235, .14); }
.mg-scheme-face { padding: 12px 11px 10px; text-align: left; }
.mg-scheme-face b { display: block; font-size: 14px; font-weight: 800; line-height: 1.2; }
.mg-scheme-face > span { display: block; font-size: 11.5px; margin-top: 3px; }
.mg-scheme-strip { display: flex; gap: 2px; margin-top: 12px; }
.mg-scheme-strip span { flex: 1 1 0; height: 13px; border-radius: 2px; }
.mg-scheme small {
    display: block; padding: 7px 6px 8px; font-size: 11.5px; color: var(--mk-slate-700);
    font-weight: 600; border-top: 1px solid var(--mk-blue-100-2);
}
.mg-imgcard.is-on { border-color: var(--mg-blue); box-shadow: 0 0 0 2px var(--mk-blue-200-2); }

/* --- image properties: tabs, switches, masks, crop -------------------- */
.mg-ptabs { display: flex; gap: 2px; border-bottom: 1px solid var(--mg-line); margin-bottom: 12px; }
.mg-ptab {
    flex: 1 1 0; border: 0; background: none; cursor: pointer; padding: 9px 4px;
    font-size: 12.5px; font-weight: 700; color: var(--mk-slate-400); border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.mg-ptab.is-on { color: var(--mg-blue); border-bottom-color: var(--mg-blue); }
.mg-ppane { display: none; }
.mg-ppane.is-on { display: block; }

.mg-btnrow { display: flex; gap: 8px; margin-bottom: 8px; }
.mg-btnrow > .mg-bigbtn:first-child { flex: 1 1 auto; }
.mg-btnrow-3 > .mg-bigbtn { flex: 1 1 0; }
.mg-bigbtn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 38px; padding: 0 12px; border: 1px solid var(--mk-blue-200-6); border-radius: 9px;
    background: var(--mk-white); cursor: pointer; font-size: 12.5px; font-weight: 600;
    color: var(--mk-slate-800); font-family: inherit;
}
.mg-bigbtn.is-wide { width: 100%; margin-bottom: 8px; }
.mg-bigbtn:hover:not(:disabled) { border-color: var(--mg-blue); color: var(--mg-blue); }
.mg-bigbtn.is-on { border-color: var(--mg-blue); background: var(--mk-blue-100-4); color: var(--mg-blue); }
.mg-bigbtn:disabled { opacity: .45; cursor: not-allowed; }
.mg-iconbtn { flex: 0 0 46px; width: 46px; padding: 0; }
/* A tool that is drawn but has nothing behind it yet. Marked, not hidden: the panel
   should say what it will do, and say plainly that it does not do it yet. */
.mg-bigbtn.is-soon { color: var(--mk-slate-400); border-style: dashed; }
.mg-bigbtn.is-soon::after {
    content: 'soon'; font-size: 9px; font-weight: 800; letter-spacing: .6px;
    text-transform: uppercase; color: var(--mk-orange-700); background: var(--mk-amber-200);
    border-radius: 999px; padding: 2px 7px;
}

.mg-switch {
    flex: 0 0 44px; width: 44px; height: 24px; border-radius: 999px; border: 0;
    background: var(--mk-slate-300-2); cursor: pointer; padding: 0; position: relative;
    transition: background .15s;
}
.mg-switch.is-on { background: var(--mg-blue); }
.mg-switch-dot {
    position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
    border-radius: 50%; background: var(--mk-white); transition: transform .15s;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .3);
}
.mg-switch.is-on .mg-switch-dot { transform: translateX(20px); }

.mg-check {
    display: flex; gap: 9px; align-items: flex-start; padding: 7px 0; cursor: pointer;
}
.mg-check input { margin: 2px 0 0; flex: 0 0 auto; }
.mg-check b { display: block; font-size: 12.5px; font-weight: 600; color: var(--mk-slate-800); }
.mg-check small { display: block; font-size: 11px; color: var(--mk-slate-400); line-height: 1.5; margin-top: 2px; }

.mg-rangenum { display: flex; gap: 8px; align-items: center; flex: 1 1 auto; min-width: 0; }
.mg-rangenum .mg-range { flex: 1 1 auto; min-width: 0; }
.mg-rangenum-box { flex: 0 0 58px; width: 58px; text-align: center; padding: 0 4px; }

.mg-masks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 10px; }
.mg-mask {
    border: 1.5px solid var(--mk-blue-200); border-radius: 8px; background: var(--mk-white); cursor: pointer;
    padding: 7px; display: flex; align-items: center; justify-content: center;
}
.mg-mask:hover { border-color: var(--mk-blue-300-2); }
.mg-mask.is-on { border-color: var(--mg-blue); box-shadow: 0 0 0 2px var(--mk-blue-200-2); }
.mg-mask-chip {
    width: 26px; height: 26px; display: block;
    background: linear-gradient(135deg, var(--mk-blue-400-5), var(--mk-blue-500));
}
/* "No mask" is a square with a line through it — the same red slash the reference
   uses, so the off state is recognisable rather than just an empty square. */
.mg-mask-chip.is-none {
    background: var(--mk-white); border: 1px solid var(--mk-blue-200);
    background-image: linear-gradient(to top right, transparent 46%, var(--mk-rose-500) 46%,
                      #ef4444 54%, transparent 54%);
}
.mg-cropbox {
    border: 1px solid var(--mk-blue-200); border-radius: 9px; padding: 10px 10px 8px;
    margin: 0 0 10px; background: var(--mk-blue-50);
}
.mg-imgcard.is-fav { border-color: var(--mk-orange-600); }
.mg-imgcard.is-fav::after {
    content: '\f004'; font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free';
    font-weight: 900; position: absolute; top: 4px; left: 5px; font-size: 10px;
    color: var(--mk-orange-600); text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}

/* --- layers panel ----------------------------------------------------- */
.mg-layerlist { display: flex; flex-direction: column; gap: 5px; }
.mg-layer {
    display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 9px;
    border: 1.5px solid var(--mk-blue-100-8); background: var(--mk-white); cursor: pointer; font-size: 12px;
}
.mg-layer:hover { border-color: var(--mk-blue-300-4); background: var(--mk-slate-50-13); }
.mg-layer.is-active { border-color: var(--mg-blue); background: var(--mk-blue-100-4); }
.mg-layer.is-dragging { opacity: .45; }
.mg-layer.is-dropbefore { border-top: 3px solid var(--mg-blue); }
.mg-layer.is-dropafter { border-bottom: 3px solid var(--mg-blue); }
.mg-layer-ico {
    width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center;
    justify-content: center; color: var(--mk-white); font-size: 12px; flex: 0 0 26px;
}
.mg-layer-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-layer-z { font-size: 10.5px; color: var(--mk-slate-400); font-weight: 700; }

/* --- shortcuts sheet -------------------------------------------------- */
.mg-sheet {
    position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 95000;
    display: flex; align-items: center; justify-content: center; padding: 24px;
}
.mg-sheet-inner {
    background: var(--mk-white); border-radius: 16px; max-width: 620px; width: 100%;
    max-height: 84vh; overflow-y: auto; padding: 22px 26px 26px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .3);
}
.mg-sheet-inner h3 { margin: 0 0 4px; font-size: 19px; font-weight: 800; }
.mg-sheet-inner p.mg-sub { margin: 0 0 18px; color: var(--mk-slate-600); font-size: 13px; }
.mg-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 22px; }
.mg-keyrow { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--mk-slate-800); }
.mg-keyrow kbd {
    background: var(--mk-blue-100-2); border: 1px solid var(--mk-blue-200-6); border-bottom-width: 2px;
    border-radius: 6px; padding: 3px 7px; font: 700 11px/1 system-ui, sans-serif;
    color: var(--mk-blue-950); white-space: nowrap;
}
.mg-keyrow span { flex: 1 1 auto; }

/* ===================== reader ========================================= */
.mg-reader {
    position: fixed; inset: 0; background: var(--mk-blue-950-3); color: var(--mk-blue-200);
    display: flex; flex-direction: column; font-family: system-ui, Battambang, sans-serif;
}
.mg-reader-top {
    display: flex; align-items: center; gap: 10px; padding: 9px 14px;
    background: rgba(15,23,42,.92); border-bottom: 1px solid var(--mk-blue-900); flex: 0 0 auto;
    position: relative; z-index: 5;
}
.mg-reader-top h1 {
    font-size: 15px; margin: 0; font-weight: 700; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; min-width: 0;
    /* Explicit, not inherited: these pages extend the app layout, whose <body> carries
       tw-text-gray-900 — which on this near-black bar rendered the title invisible. */
    color: var(--mk-blue-100-2);
}
.mg-reader, .mg-reader a, .mg-reader button { color: var(--mk-blue-200); }
.mg-reader a:hover { color: var(--mk-white); }
.mg-reader-stage {
    flex: 1 1 auto; min-height: 0; overflow: auto; display: flex;
    align-items: center; justify-content: center; padding: 18px;
    -webkit-overflow-scrolling: touch;
}
.mg-reader-spread { display: flex; gap: 18px; align-items: flex-start; }
.mg-reader-bottom {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 8px 14px; background: rgba(15,23,42,.92); border-top: 1px solid var(--mk-blue-900);
    flex: 0 0 auto;
}
.mg-reader-strip {
    display: flex; gap: 7px; overflow-x: auto; padding: 8px 12px; background: var(--mk-blue-950-3);
    border-top: 1px solid var(--mk-blue-900); flex: 0 0 auto;
}
.mg-reader-strip .mg-thumb {
    border: 2px solid transparent; border-radius: 4px; cursor: pointer; flex: 0 0 auto;
}
.mg-reader-strip .mg-thumb.is-active { border-color: var(--mk-cyan-500); }
.mg-nav {
    border: 0; background: var(--mk-blue-900); color: var(--mk-blue-200); width: 36px; height: 36px;
    border-radius: 50%; cursor: pointer; font-size: 15px; flex: 0 0 auto;
}
.mg-nav:hover:not(:disabled) { background: var(--mk-slate-800); }
.mg-nav:disabled { opacity: .3; cursor: not-allowed; }
.mg-reader-count { font-size: 13px; font-weight: 600; min-width: 76px; text-align: center; }
.mg-reader .mg-page { box-shadow: 0 18px 50px rgba(0,0,0,.55); }

/* --- the long-press sheet --------------------------------------------- */
.mg-sheet {
    position: fixed; inset: 0; z-index: 90; display: flex; align-items: center;
    justify-content: center; padding: 22px; background: rgba(2, 6, 23, .72);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.mg-sheet-card {
    width: min(340px, 100%); background: var(--mk-blue-950); border: 1px solid var(--mk-blue-900);
    border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 9px;
    box-shadow: 0 24px 60px rgba(2, 6, 23, .6);
}
.mg-sheet-img {
    width: 100%; max-height: 46vh; object-fit: contain; border-radius: 9px;
    background: var(--mk-blue-900); display: block;
}
.mg-sheet-btn {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 42px; padding: 0 14px; border: 1px solid var(--mk-slate-800); border-radius: 10px;
    background: var(--mk-blue-900); color: var(--mk-blue-200); font-size: 13px; font-weight: 600;
    cursor: pointer; text-decoration: none; font-family: inherit;
    /* A QR's target can be long; it must not push the sheet wide. */
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mg-sheet-btn:hover { background: var(--mk-slate-800); color: var(--mk-white); }
.mg-sheet-close { background: transparent; border-color: transparent; color: var(--mk-slate-400); }

/* --- flip reader: book-mode chrome ------------------------------------
   Reading as a book is the magazine and as little else as possible: no page strip,
   and a toolbar that puts itself away and leaves one control to fetch it back. */
.mg-reader.is-book .mg-reader-strip { display: none; }
/* A fitted book has nothing to scroll to, and a turning sheet briefly draws past the
   stage: with `auto` that flashed a scrollbar in and out on every page turn, and with
   `hidden` it sliced the corner off the page being turned. `visible` gives the sheet
   its full projection and cannot scroll — the reader is position:fixed and the body
   is overflow:hidden, so there is nowhere for a spill to go. The bars are lifted over
   it, so a sheet that reaches them passes behind. Zoomed past fit is the one case
   where the stage really does hold more than it can show. */
.mg-reader.is-book .mg-reader-stage { overflow: visible; }
.mg-reader.is-book.is-zoomed .mg-reader-stage { overflow: auto; }
.mg-reader-bottom { position: relative; z-index: 6; }
.mg-reader.is-book .mg-reader-top {
    /* Out of the flow, so hiding and showing the bar never resizes the book under
       it — the spread would otherwise jump a few percent on every toggle. */
    position: absolute; top: 0; left: 0; right: 0; z-index: 20;
    background: rgba(15, 23, 42, .94);
    transition: transform .2s ease, opacity .2s ease;
}
.mg-reader.is-book .mg-reader-top.is-hidden {
    transform: translateY(-102%); opacity: 0; pointer-events: none;
}
.mgf-collapse { display: none; }
.mg-reader.is-book .mgf-collapse { display: inline-flex; }
.mgf-peek {
    position: absolute; top: 12px; right: 14px; z-index: 25; display: none;
    gap: 6px; padding: 5px; border-radius: 999px;
    background: rgba(15, 23, 42, .74); border: 1px solid rgba(148, 163, 184, .22);
    -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
}
.mg-reader.is-book.chrome-off .mgf-peek { display: flex; }
.mgf-peek .mg-nav { width: 34px; height: 34px; background: transparent; }
.mgf-peek .mg-nav:hover:not(:disabled) { background: var(--mk-slate-800); }
.mg-nav.is-on { background: var(--mk-blue-500); color: var(--mk-white); }
.mg-nav.is-on:hover:not(:disabled) { background: var(--mk-blue-600); }

/* --- flip reader: the book ------------------------------------------- */
.mgf-book {
    position: relative; flex: 0 0 auto;
    /* Shallow enough that a turning leaf reads as paper rather than as a page
       flying at the camera. */
    perspective: 3200px; perspective-origin: 50% 50%;
    /* The leaf is dragged, so the browser must not claim the gesture as a scroll. */
    touch-action: none; user-select: none; -webkit-user-select: none;
    filter: drop-shadow(0 24px 60px rgba(0, 0, 0, .62));
}
.mgf-half { position: absolute; top: 0; height: 100%; width: 50%; overflow: hidden; }
.mgf-half-left { left: 0; }
.mgf-half-right { left: 50%; }
.mgf-book.is-single .mgf-half-right { left: 0; width: 100%; }
.mgf-surface {
    position: absolute; inset: 0; overflow: hidden; background: var(--mk-white);
    transition: filter .12s linear;
}
.mgf-surface.mgf-blank {
    /* The reverse of a sheet, and the inside of a shut cover. */
    background: linear-gradient(135deg, var(--mk-slate-100), var(--mk-slate-200-7));
}
.mgf-surface .mg-page { box-shadow: none; }
/* The gutter: paper curving down into the binding, darkest at the spine. */
.mgf-spine {
    position: absolute; top: 0; bottom: 0; left: 50%; width: 46px; margin-left: -23px;
    pointer-events: none; z-index: 6;
    background: linear-gradient(90deg,
        rgba(0,0,0,0) 0%, rgba(0,0,0,.16) 42%, rgba(0,0,0,.30) 50%,
        rgba(0,0,0,.16) 58%, rgba(0,0,0,0) 100%);
}
.mgf-leaf {
    position: absolute; top: 0; left: 50%; width: 50%; height: 100%;
    transform-style: preserve-3d; z-index: 8;
    /* The sheet in flight never takes a click: the pointer handler lives on the
       stage and decides from coordinates, and a link on a turning page is not a
       link anybody meant to press. */
    pointer-events: none;
}
.mgf-book.is-single .mgf-leaf { left: 0; width: 100%; }
.mgf-face { position: absolute; inset: 0; transform-style: preserve-3d; }
/* One vertical strip of the turning sheet. It is a window onto the page: the page
   sits inside at a negative offset so each strip shows its own band of it. Every
   strip is posed separately, which is how a flat page becomes a curved one. */
.mgf-slice {
    position: absolute; top: 0; left: 0; overflow: hidden; background: var(--mk-white);
    transform-origin: 0 50%; will-change: transform;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
/* Shading per strip, from the angle that strip ended up at. Without this the arc is
   geometrically there but invisible — paper reads as curved because it is lit
   unevenly, not because its outline moves. */
.mgf-shade {
    position: absolute; inset: 0; pointer-events: none;
    /* The gradient itself is written per strip, per frame, from the angles at its
       two edges — see poseFace(). */
}

@media (max-width: 860px) {
    .mg-reader-top { padding: 8px 10px; }
    .mg-reader-top h1 { font-size: 13px; }
    .mg-reader-stage { padding: 10px; }
    .mg-reader-strip { display: none; }
    .mg-reader-spread { gap: 8px; }
    .mgf-book { filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .55)); }
}
/* Base: hidden. The media query below turns it on, so it must come
   after this — same specificity means source order decides. */
.mg-props-toggle { display: none; }

@media (max-width: 1320px) {
    .mg-editor { grid-template-columns: 62px 224px 1fr 272px 50px; }
}
@media (max-width: 1120px) {
    /* The properties panel folds away first: it is the one panel that is only needed
       while something is selected, and it slides back in from the right rail. */
    .mg-editor {
        grid-template-columns: 62px 216px 1fr 50px;
        grid-template-areas: "top top top top" "rail left canvas rrail";
    }
    .mg-side-right {
        position: fixed; right: 54px; top: 56px; bottom: 0; width: 286px; z-index: 70;
        transform: translateX(calc(100% + 54px)); transition: transform .18s;
        box-shadow: -10px 0 30px rgba(15, 23, 42, .18);
    }
    .mg-side-right.is-open { transform: translateX(0); }
    .mg-props-toggle { display: inline-flex; }
}
@media (max-width: 880px) {
    /* The editor is a desktop/tablet tool. Below this it still WORKS — every control
       is reachable — but the panel stacks under the canvas instead of beside it, so
       the page itself stays as large as the screen allows. */
    .mg-editor {
        grid-template-columns: 58px 1fr 48px;
        grid-template-rows: 56px 1fr auto;
        grid-template-areas: "rail top top" "rail canvas rrail" "left left left";
    }
    .mg-side-left {
        border-right: 0; border-top: 1px solid var(--mg-line); max-height: 42vh;
    }
    .mg-rail { padding: 8px 0; }
    .mg-railbtn { width: 50px; font-size: 8.5px; }
    .mg-canvas-wrap { padding: 16px 10px 78px; }
    .mg-pagebar { bottom: auto; top: 66px; }
    .mg-facing { display: none; }
}
/* ===================== dashboard cards ================================ */
.mg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 16px; }
.mg-card {
    background: var(--mk-white); border: 1px solid var(--mk-slate-200); border-radius: 12px; overflow: hidden;
    display: flex; flex-direction: column; transition: box-shadow .15s, transform .15s;
}
.mg-card:hover { box-shadow: 0 10px 28px rgba(15,23,42,.12); transform: translateY(-2px); }
.mg-card-cover {
    position: relative; aspect-ratio: 3 / 4; background: var(--mk-blue-100-2); overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.mg-card-cover img { width: 100%; height: 100%; object-fit: cover; }
.mg-card-body { padding: 10px 12px; flex: 1 1 auto; }
.mg-card-body b { display: block; font-size: 14px; line-height: 1.35; margin-bottom: 3px; }
.mg-card-body small { color: var(--mk-slate-600); font-size: 11.5px; }
.mg-card-foot {
    display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--mk-blue-100-2);
    flex-wrap: wrap;
}
.mg-badge {
    position: absolute; top: 8px; left: 8px; font-size: 10px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .6px; padding: 3px 8px; border-radius: 999px;
    color: var(--mk-white); z-index: 2;
}
.mg-badge-draft { background: var(--mk-slate-600); }
.mg-badge-published { background: var(--mk-green-800-2); }
.mg-badge-archived { background: var(--mk-orange-700); }
.mg-pill {
    display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 7px;
    font-size: 11.5px; font-weight: 600; border: 1px solid var(--mk-blue-200); background: var(--mk-white);
    color: var(--mk-slate-800); cursor: pointer; text-decoration: none;
}
.mg-pill:hover { border-color: var(--mk-blue-500); color: var(--mk-blue-600); text-decoration: none; }
.mg-pill-danger:hover { border-color: var(--mk-rose-600); color: var(--mk-rose-700); }
@media (max-width: 520px) {
    .mg-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
    .mg-card-body b { font-size: 12.5px; }
}

/* ── AI tab: write an article, create a picture (magazine-editor.js panelAI) ── */
.mg-ai-note { font-size: 12px; line-height: 1.5; color: var(--mk-slate-600, #475569);
              background: var(--mk-blue-50, #eff6ff); border-radius: 10px; padding: 8px 10px; }
.mg-ai-note.is-warn { background: #fef3c7; color: #92400e; }
.mg-ai-field { display: flex; flex-direction: column; gap: 4px; margin: 0 0 10px;
               font-size: 12px; font-weight: 600; color: var(--mk-slate-600, #475569); flex: 1; }
.mg-ai-field .mg-input { width: 100%; box-sizing: border-box; font: inherit; font-weight: 400;
               font-size: 13px; padding: 7px 9px; border: 1px solid var(--mk-slate-300, #cbd5e1);
               border-radius: 8px; background: #fff; color: var(--mk-slate-900, #0f172a); resize: vertical; }
.mg-ai-field .mg-input:focus { outline: none; border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124, 58, 237, .15); }
.mg-ai-row { display: flex; gap: 8px; }
.mg-ai-state { font-size: 12px; color: #7c3aed; min-height: 16px; margin: 6px 2px 4px; line-height: 1.5; }