#memocard-app{font-family:system-ui,sans-serif;max-width:950px;margin:20px auto;color:#18283b}#memocard-app *{box-sizing:border-box}.mc-shell{border:1px solid #cbd5e1;border-radius:14px;padding:20px;background:#fff}.mc-toolbar,.mc-palette{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin:12px 0}.mc-toolbar label{display:flex;flex-direction:column;gap:5px;font-size:13px}.mc-toolbar input:not([type=checkbox]),.mc-toolbar select{padding:8px;border:1px solid #a9b8c8;border-radius:6px;max-width:210px}.mc-toolbar button,.mc-palette #mc-erase{border:0;background:#164e78;color:white;padding:10px 14px;border-radius:6px;cursor:pointer}.mc-toolbar button:disabled{opacity:.5}.mc-palette button[data-color]{width:28px;height:28px;border:1px solid #888;border-radius:4px;cursor:pointer}.mc-palette label{display:flex;align-items:center;gap:8px}.mc-hint{font-size:13px;color:#536578}.mc-stage{position:relative;overflow:hidden;background:repeating-linear-gradient(45deg,#edf2f7 0 10px,#f7f9fc 10px 20px);padding:50px 35px;min-height:280px;border-radius:10px;touch-action:none}#mc-paper{position:relative;background:white;border-top:4px solid #111;border-left:4px solid #111;box-shadow:0 5px 20px #0002;width:min(100%,650px);padding-right:12%;padding-bottom:3%;min-height:140px}#mc-grid{display:grid;width:100%;gap:0}#mc-grid .mc-cell{border:1px solid #888;aspect-ratio:1/1;padding:0;cursor:pointer;min-width:0}.mc-brand{position:absolute;right:0;top:5%;writing-mode:vertical-rl;font-size:12px;font-weight:bold}.mc-glass{position:absolute;top:50px;left:35px;z-index:3;background:rgba(200,225,242,.13);border:3px solid rgba(42,111,159,.65);border-radius:7px;box-shadow:4px 7px 17px #0003,inset 2px 2px 12px #fff9;cursor:grab;touch-action:none;user-select:none}.mc-glass:active{cursor:grabbing}.mc-glass-grid{display:grid;width:100%;height:100%;pointer-events:none}.mc-glass-grid>div{display:flex;align-items:center;justify-content:center;font-weight:800;font-size:clamp(10px,2vw,25px);color:#15263c;border:1px solid #5c819344}.mc-notice{padding:18px;background:#eef6ff;border-radius:8px}

/* Mat translucent 95 × 50 mm card; scale with the label grid */
.mc-glass{border-radius:clamp(10px,2vw,22px);border:2px solid rgba(125,155,175,.7);background:linear-gradient(125deg,rgba(255,255,255,.27),rgba(220,234,241,.10) 44%,rgba(255,255,255,.20));box-shadow:3px 7px 18px #0003,inset 1px 2px 8px #fff9;backdrop-filter:blur(.35px);-webkit-backdrop-filter:blur(.35px)}
.mc-glass-grid>div{font-size:clamp(10px,1.8vw,22px);overflow:hidden;line-height:1.05;text-align:center}
@media(max-width:600px){.mc-shell{padding:10px}.mc-stage{padding:22px 12px;min-height:240px;overflow:hidden}.mc-glass{top:22px;left:12px}.mc-toolbar label{flex:1 1 140px}.mc-toolbar input:not([type=checkbox]),.mc-toolbar select{width:100%;max-width:none}.mc-palette button[data-color]{width:38px;height:38px}.mc-glass-grid>div{font-size:clamp(8px,2.5vw,14px)}}

/* Version 0.3: transparent coordinate card, proportionally scaled on touch devices */
.mc-glass{background:linear-gradient(120deg,rgba(243,248,249,.26),rgba(226,235,240,.13) 55%,rgba(248,250,251,.21));border:0!important;border-radius:10%;box-shadow:0 3px 12px #0002;touch-action:none;overflow:hidden;cursor:grab}.mc-glass svg{width:100%;height:100%;display:block;pointer-events:none;user-select:none}.mc-glass:active{cursor:grabbing}

/* v0.3.1: vertically centered, more legible label brand and coordinate controls */
#mc-paper .mc-brand{top:50%;right:1.5%;transform:translateY(-50%);font-size:clamp(14px,2.1vw,20px);line-height:1;font-weight:800;white-space:nowrap;writing-mode:vertical-rl;text-align:center}
#memocard-app #mc-lock{min-width:135px}
@media(max-width:600px){#mc-paper .mc-brand{font-size:clamp(11px,3vw,16px)}}

/* v0.3.2: visual card selection, touch-friendly and responsive */
.mc-card-choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,205px),1fr));gap:12px;margin:12px 0 18px}.mc-card-choice{display:flex;flex-direction:column;gap:8px;align-items:stretch;background:#f6f9fc;border:2px solid #c7d4df;border-radius:12px;padding:10px;cursor:pointer;text-align:center;min-height:115px;color:#17344d}.mc-card-choice.is-selected{border-color:#0875ba;background:#e7f5ff;box-shadow:0 0 0 2px #0875ba22}.mc-card-choice:focus-visible{outline:3px solid #0875ba;outline-offset:2px}.mc-card-thumb{display:block;aspect-ratio:95/50;width:100%;max-width:240px;margin:auto}.mc-card-thumb svg{width:100%;height:100%;display:block}.mc-card-name{font-weight:700;font-size:14px;overflow-wrap:anywhere}@media(max-width:600px){.mc-card-choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.mc-card-choice{padding:6px;min-height:80px}.mc-card-name{font-size:12px}}

/* v0.3.4: show the saved label name directly below the open label */
.mc-stage{padding-bottom:76px}
#mc-paper .mc-open-label-name{position:absolute;top:calc(100% + 12px);left:0;width:100%;padding:5px 8px;text-align:center;font-size:clamp(13px,1.7vw,17px);font-weight:700;line-height:1.3;color:#18354d;overflow-wrap:anywhere;pointer-events:none;z-index:1}
@media(max-width:600px){.mc-stage{padding-bottom:66px}#mc-paper .mc-open-label-name{top:calc(100% + 10px);font-size:14px}}

/* v0.3.5 – visual polish only. Coordinate math and SVG grid pitch unchanged. */
#memocard-app{max-width:1050px}
#memocard-app .mc-shell{border-color:#d6e0e8;box-shadow:0 8px 28px rgba(20,49,70,.06)}
#memocard-app .mc-stage{background-color:#f0f5f8;background-image:linear-gradient(45deg,#e7eef4 25%,transparent 25%),linear-gradient(-45deg,#e7eef4 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e7eef4 75%),linear-gradient(-45deg,transparent 75%,#e7eef4 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0;min-height:300px;padding-top:44px;padding-bottom:90px}
#memocard-app #mc-paper{width:min(100%,590px);box-shadow:0 5px 20px rgba(24,48,68,.13);border-top-width:3px;border-left-width:3px}
#memocard-app #mc-paper .mc-open-label-name{top:calc(100% + 14px);width:max-content;max-width:100%;min-width:140px;left:50%;transform:translateX(-50%);padding:7px 15px;background:rgba(255,255,255,.94);border:1px solid #cbdce8;border-radius:999px;box-shadow:0 2px 6px #1232;font-size:15px}
#memocard-app .mc-card-choice{transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease}
#memocard-app .mc-card-choice:hover{border-color:#6da6cc}
#memocard-app .mc-toolbar button:focus-visible,#memocard-app .mc-palette button:focus-visible,#memocard-app .mc-cell:focus-visible{outline:3px solid #0c79ba;outline-offset:2px}
#memocard-app .mc-toolbar button{min-height:42px}
#memocard-app .mc-toolbar select,#memocard-app .mc-toolbar input{min-height:42px}
@media(max-width:600px){
 #memocard-app{margin:8px auto}
 #memocard-app .mc-shell{padding:12px;border-radius:12px}
 #memocard-app .mc-stage{padding:28px 12px 74px;min-height:220px}
 #memocard-app #mc-paper{width:min(100%,590px)}
 #memocard-app #mc-paper .mc-open-label-name{top:calc(100% + 9px);font-size:12px;min-width:0;padding:6px 11px}
 #memocard-app .mc-toolbar{gap:9px}
 #memocard-app .mc-toolbar label{min-width:0;flex:1 1 135px}
 #memocard-app .mc-toolbar button{flex:1 1 125px;min-height:44px}
 #memocard-app .mc-palette{gap:9px}
 #memocard-app .mc-palette button[data-color]{width:42px;height:42px}
 #memocard-app .mc-card-choice{min-height:95px}
}
@media(prefers-reduced-motion:reduce){#memocard-app .mc-card-choice{transition:none}}

/* v0.3.6 – smaller label, larger apparent card frame without changing coordinate pitch */
#memocard-app #mc-paper{width:min(100%,515px)}
#memocard-app .mc-glass{box-shadow:0 5px 18px rgba(0,0,0,.24),0 0 0 5px rgba(215,230,238,.14),inset 0 0 8px rgba(255,255,255,.12)}
#memocard-app .mc-card-actions{display:flex;justify-content:center;margin:-5px 0 18px}
#memocard-app #mc-remove-card{min-height:44px;padding:10px 25px;background:#fff;color:#213b4d;border:1px solid #a8bdcc;border-radius:9px;font-weight:700;cursor:pointer}
#memocard-app #mc-remove-card:hover:not(:disabled){background:#eaf4fa;border-color:#4383a8}
#memocard-app #mc-remove-card:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:600px){#memocard-app #mc-paper{width:min(100%,515px)}#memocard-app #mc-remove-card{width:100%;max-width:320px}}

/* v0.3.7: X overlays retain independent colors and scale with cells */
#mc-grid .mc-cell{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:manipulation}
#mc-grid .mc-x-mark{font-family:Arial,Helvetica,sans-serif;font-weight:800;font-size:clamp(12px,3.5vw,35px);line-height:1;pointer-events:none;user-select:none;text-shadow:0 0 1px #ffffff66}
.mc-mode-tools{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.mc-mode-tools button{border:1px solid #9aafbf;background:#f5f9fc;color:#173c5c;border-radius:8px;padding:10px 14px;min-height:44px;cursor:pointer}.mc-mode-tools button.is-active{background:#164e78;color:white;border-color:#164e78}
@media(max-width:600px){.mc-mode-tools button{flex:1 1 42%;font-size:14px}#mc-grid .mc-x-mark{font-size:clamp(10px,5vw,25px)}}

/* v0.3.8: corner-to-corner X; enhanced card presence without altering the 3.45 mm coordinate pitch */
#memocard-app #mc-grid .mc-cell{padding:0!important}
#memocard-app #mc-grid .mc-x-mark{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible;pointer-events:none;filter:drop-shadow(0 0 .35px #fff)}
#memocard-app .mc-glass{border:2px solid rgba(35,82,109,.78);border-radius:12px;background:rgba(206,226,235,.19);box-shadow:0 9px 28px rgba(10,36,55,.28),0 0 0 7px rgba(202,225,235,.20),inset 0 0 14px rgba(255,255,255,.42)}
#memocard-app .mc-glass svg{display:block;width:100%;height:100%}
@media(max-width:600px){#memocard-app .mc-glass{box-shadow:0 6px 18px rgba(10,36,55,.24),0 0 0 4px rgba(202,225,235,.18),inset 0 0 10px rgba(255,255,255,.38)}}


/* v0.3.9: MEMOCARD monochrome / brushed steel theme.
   Purely visual: coordinate SVG and all positioning logic are untouched. */
#memocard-app{color:#202326;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
#memocard-app .mc-shell{background:linear-gradient(150deg,#f7f8f9 0%,#d7dbde 48%,#f1f2f3 100%);border:1px solid #a4a9ae;border-top:3px solid #5d6267;border-radius:15px;box-shadow:0 12px 36px rgba(0,0,0,.16),inset 0 1px 0 #fff;padding:22px}
#memocard-app .mc-toolbar,#memocard-app .mc-palette,#memocard-app .mc-mode-tools{background:linear-gradient(125deg,#f7f8f9,#dfe2e5);border:1px solid #b8bec3;border-radius:12px;padding:12px}
#memocard-app .mc-toolbar label,#memocard-app .mc-palette label{color:#30353a;font-weight:600}
#memocard-app .mc-toolbar input:not([type=checkbox]),#memocard-app .mc-toolbar select{background:#fff;color:#181b1e;border:1px solid #939ba2;border-radius:7px}
#memocard-app .mc-toolbar button,#memocard-app .mc-palette #mc-erase,#memocard-app .mc-mode-tools button{background:linear-gradient(180deg,#62676c,#25292d);color:#fff;border:1px solid #34393e;border-radius:8px;box-shadow:inset 0 1px 0 #ffffff40,0 2px 4px #0002;font-weight:650}
#memocard-app .mc-mode-tools button.is-active{background:linear-gradient(180deg,#24272a,#08090a);border-color:#0c0e10;box-shadow:0 0 0 2px #858b91}
#memocard-app .mc-toolbar button:hover:not(:disabled),#memocard-app .mc-mode-tools button:hover:not(:disabled){filter:brightness(1.16)}
#memocard-app .mc-hint{color:#4e555b}
#memocard-app .mc-stage{background-color:#cbd0d4;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.10) 0px,rgba(255,255,255,.10) 1px,transparent 1px,transparent 4px),linear-gradient(135deg,#d8dcdf,#afb5ba 50%,#e3e5e7);border:1px solid #a3aab0;box-shadow:inset 0 3px 12px #0002;border-radius:12px}
#memocard-app #mc-paper{background:#fff;box-shadow:0 7px 20px #0003}
#memocard-app #mc-paper .mc-open-label-name{background:linear-gradient(180deg,#fff,#e9ecee);border:1px solid #9fa6ad;color:#24292e;box-shadow:0 2px 7px #0002}
#memocard-app .mc-card-choice{background:linear-gradient(155deg,#f8f9fa,#d8dcdf);border:2px solid #9da4aa;color:#22272b;box-shadow:0 2px 6px #0001}
#memocard-app .mc-card-choice:hover{border-color:#4b5156;background:#f1f3f4}
#memocard-app .mc-card-choice.is-selected{background:linear-gradient(145deg,#e7ebee,#bfc6cb);border-color:#202428;box-shadow:0 0 0 2px #60666d55,0 4px 9px #0002}
#memocard-app .mc-card-name{color:#25292d}
#memocard-app #mc-remove-card{background:linear-gradient(180deg,#fefefe,#cbd0d4);color:#1f2529;border:1px solid #7f888f;box-shadow:inset 0 1px 0 #fff,0 2px 5px #0002}
#memocard-app #mc-remove-card:hover:not(:disabled){background:linear-gradient(180deg,#fff,#b7bec4);border-color:#41484e}
#memocard-app .mc-glass{background:linear-gradient(120deg,rgba(250,251,252,.23),rgba(173,183,191,.17) 50%,rgba(255,255,255,.21));box-shadow:0 9px 28px #0004,0 0 0 5px #d2d6da44,inset 0 0 13px #fff6;border-color:#4b5258}
#memocard-app .mc-notice{background:#e8eaec;color:#2a3035;border:1px solid #b2b9bf}
#memocard-app .mc-toolbar button:focus-visible,#memocard-app .mc-mode-tools button:focus-visible,#memocard-app .mc-card-choice:focus-visible,#memocard-app .mc-cell:focus-visible{outline:3px solid #343a40;outline-offset:3px}
@media(max-width:600px){#memocard-app .mc-shell{padding:12px;border-radius:10px}#memocard-app .mc-toolbar,#memocard-app .mc-palette,#memocard-app .mc-mode-tools{padding:9px}#memocard-app .mc-stage{padding-left:12px;padding-right:12px}#memocard-app .mc-toolbar button,#memocard-app .mc-mode-tools button,#memocard-app #mc-remove-card{min-height:44px}}

/* v0.4.0 – tydeligere børstet stål, kun frit farvevalg */
#memocard-app .mc-stage{
  background-color:#aeb4b9;
  background-image:
    linear-gradient(105deg,rgba(255,255,255,.40) 0%,rgba(255,255,255,.07) 17%,rgba(35,43,49,.09) 45%,rgba(255,255,255,.30) 72%,rgba(43,49,55,.12) 100%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.18) 0px,rgba(255,255,255,.18) 1px,rgba(34,43,50,.09) 2px,rgba(255,255,255,.04) 3px,transparent 4px),
    linear-gradient(90deg,#8c949a,#d5d9dc 35%,#aab1b6 67%,#e0e3e5);
  border:2px solid #777f86;
  box-shadow:inset 0 3px 12px rgba(0,0,0,.24),inset 0 0 0 1px rgba(255,255,255,.52),0 4px 14px rgba(0,0,0,.12);
}
#memocard-app .mc-palette{justify-content:flex-start;align-items:center;gap:14px}
#memocard-app .mc-custom-color{display:flex;flex-direction:row;align-items:center;gap:12px;font-weight:700}
#memocard-app #mc-color{appearance:auto;width:64px;height:44px;padding:3px;border:1px solid #697178;border-radius:8px;background:#f6f7f8;cursor:pointer}
#memocard-app #mc-erase{min-height:44px}
@media(max-width:600px){#memocard-app .mc-stage{background-size:auto}#memocard-app .mc-custom-color{width:auto}#memocard-app #mc-color{width:72px;height:48px}}

/* v0.4.1 – Sluk kort ved siden af Gem/Slet label, også på mobil */
#memocard-app #mc-remove-card{min-height:44px;}
@media(max-width:600px){#memocard-app #mc-remove-card{width:auto;max-width:100%;}}

/* v0.4.2: photographed steel texture behind labels only */
#memocard-app .mc-stage{background-color:#9b9b9b;background-image:linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.10)),url("steel-texture.jpg");background-size:cover;background-position:center;background-repeat:no-repeat;}
#memocard-app .mc-card-timer{font-size:13px;font-weight:600;color:#42484d;min-height:1.3em;margin:6px 0 10px;}

/* v0.4.3: monochrome brushed steel, dark at top and bright at bottom */
#memocard-app .mc-stage {
  background-color: #777;
  background-image: url("steel-monochrome.png");
  background-position: center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* Memocard standalone login – v0.5.0 */
.mc-auth{max-width:1050px;margin:25px auto;background:#22262a;color:#f2f3f4;border:1px solid #51575d;border-radius:15px;overflow:hidden;box-shadow:0 15px 38px #0003;font-family:Arial,Helvetica,sans-serif}
.mc-auth-banner{height:clamp(130px,23vw,270px);background:#45484b url('login-banner.jpg') center center / cover no-repeat}
.mc-auth-inner{padding:clamp(18px,4vw,38px)}.mc-auth-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
.mc-auth section{background:linear-gradient(140deg,#41474c,#252a2e);border:1px solid #636b72;border-radius:12px;padding:24px;min-width:0}
.mc-auth h2{color:#fff;margin:0 0 18px;font-size:24px}.mc-auth p{color:#d4d8da}.mc-auth label{display:block;color:#f1f1f1;margin:14px 0;font-weight:600}
.mc-auth input{display:block;box-sizing:border-box;width:100%;min-height:46px;padding:10px 12px;border:1px solid #9da5ac;border-radius:7px;background:#f8f9fa;color:#151719;font-size:16px;margin-top:7px}
.mc-auth-button{display:inline-block;border:0;background:linear-gradient(#e6e8ea,#aeb6bd);color:#141719!important;border-radius:7px;padding:12px 22px;font-size:16px;font-weight:700;text-decoration:none;cursor:pointer;min-height:46px}
.mc-auth a{color:#e1e5e9}.mc-auth-note,.mc-auth-error{padding:12px 16px;border-radius:8px;background:#3e4b49;color:#fff!important}.mc-auth-error{background:#663333}.mc-auth-footer{text-align:center;font-size:12px;margin:26px 0 0}
@media(max-width:650px){.mc-auth{margin:10px auto}.mc-auth-columns{grid-template-columns:1fr;gap:15px}.mc-auth section{padding:18px}.mc-auth-banner{height:155px;background-position:center}}

/* v0.5.1: Show the entire login banner without cropping */
.mc-auth-banner{height:auto!important;aspect-ratio:2048 / 512;background-size:contain!important;background-position:center center!important;background-repeat:no-repeat!important;background-color:#303235!important}
@media(max-width:650px){.mc-auth-banner{height:auto!important;aspect-ratio:2048 / 512;min-height:0!important}}

/* Memocard v0.5.4 – logout alongside app heading */
#memocard-app .mc-app-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
#memocard-app .mc-app-header h2{margin:0}
#memocard-app .mc-logout-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border-radius:8px;background:linear-gradient(135deg,#30343a,#636970);color:#fff!important;text-decoration:none;font-weight:700;border:1px solid #171a1d;box-shadow:inset 0 1px 0 #9da2a6,0 3px 8px #0002}
#memocard-app .mc-logout-button:hover,#memocard-app .mc-logout-button:focus{background:#191c20;color:#fff!important}
@media(max-width:600px){#memocard-app .mc-app-header{gap:8px}#memocard-app .mc-app-header h2{font-size:1.35rem}}

/* v0.5.7: Hide the narrow light stripe baked into the banner image, everywhere the login banner is used. */
.mc-auth-banner{background-size:100% calc(100% + 6px)!important;background-position:center bottom!important;border-top:0!important;box-shadow:none!important}
.mc-auth{border-top:0!important}