:root{
  /* V70 · Single design system: iOS-inspired glass / flat modern */
  --app-bg:#f2f2f7;
  --surface:#ffffff;
  --surface-2:#f7f7fa;
  --glass:rgba(250,252,255,.82);
  --glass-border:rgba(255,255,255,.72);
  --line:rgba(60,60,67,.16);
  --text:#1c1c1e;
  --text-secondary:#5f6675;
  --muted:#7c8190;
  --blue:#007aff;
  --blue-hover:#006ee6;
  --red:#ff3b30;
  --green:#34c759;
  --orange:#ff9f0a;
  --accent:var(--blue);
  --accent-hover:var(--blue-hover);
  --accent-light:rgba(0,122,255,.12);
  --primary:var(--blue);
  --good:var(--green);
  --good-light:rgba(52,199,89,.12);
  --bad:var(--red);
  --bad-light:rgba(255,59,48,.12);
  --warn:var(--orange);
  --warn-light:rgba(255,159,10,.12);

  /* Compatibility aliases used by older component rules; all resolve here. */
  --bg:var(--app-bg);
  --bg-darker:#e5e5ea;
  --bg-lighter:#fafafc;
  --vbg:var(--app-bg);
  --panel:rgba(255,255,255,.82);
  --panel2:rgba(118,118,128,.08);
  --glass-bg:var(--glass);

  /* Spacing */
  --space-xs:4px;
  --space-sm:8px;
  --space-md:12px;
  --space-lg:16px;
  --space-xl:24px;
  --space-2xl:32px;
  --space-3xl:48px;

  /* Radius */
  --radius-sm:10px;
  --radius-md:13px;
  --radius-lg:16px;
  --radius-xl:22px;
  --radius-2xl:28px;
  --radius-pill:999px;

  /* Typography */
  --fs-xs:12px;
  --fs-sm:13px;
  --fs-md:14px;
  --fs-base:16px;
  --fs-lg:17px;
  --fs-xl:20px;
  --fs-2xl:22px;
  --fs-3xl:25px;
  --fs-display:28px;
  --fs-hero:32px;

  /* Symbol/emoji sizing is separate from text typography. */
  --icon-sm:18px;
  --icon-md:20px;
  --icon-lg:24px;
  --icon-xl:26px;
  --icon-2xl:30px;

  /* Shadows / focus */
  --shadow-sm:0 4px 14px rgba(60,60,67,.07);
  --shadow-md:0 8px 24px rgba(60,60,67,.09);
  --shadow-lg:0 14px 38px rgba(30,40,60,.12);
  --shadow-xl:0 24px 70px rgba(30,40,60,.18);
  --shadow-inset:inset 0 0 0 1px var(--line);
  --focus-ring:0 0 0 4px rgba(0,122,255,.18);

  /* Legacy V9 aliases, kept only to avoid component regressions. */
  --v9-separator:var(--line);
  --v9-secondary:var(--muted);
  --v9-tertiary:rgba(118,118,128,.12);
  --v9-text:var(--text);
}

[data-theme="dark"]{
  --app-bg:#000000;
  --surface:#1c1c1e;
  --surface-2:#242426;
  --glass:rgba(32,32,36,.84);
  --glass-border:rgba(255,255,255,.12);
  --line:rgba(235,235,245,.16);
  --text:#f5f5f7;
  --text-secondary:#d1d1d6;
  --muted:#a7a7ad;
  --blue:#0a84ff;
  --blue-hover:#409cff;
  --red:#ff453a;
  --green:#30d158;
  --orange:#ff9f0a;
  --accent-light:rgba(10,132,255,.16);
  --good-light:rgba(48,209,88,.15);
  --bad-light:rgba(255,69,58,.15);
  --warn-light:rgba(255,159,10,.15);
  --bg:var(--app-bg);
  --bg-darker:#111113;
  --bg-lighter:#242426;
  --vbg:var(--app-bg);
  --panel:rgba(28,28,30,.92);
  --panel2:rgba(118,118,128,.16);
  --glass-bg:var(--glass);
  --shadow-sm:0 5px 18px rgba(0,0,0,.24);
  --shadow-md:0 10px 30px rgba(0,0,0,.32);
  --shadow-lg:0 18px 48px rgba(0,0,0,.42);
  --shadow-xl:0 28px 80px rgba(0,0,0,.55);
  --focus-ring:0 0 0 4px rgba(10,132,255,.24);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
a{color:inherit}
.uiIcon{width:20px;height:20px;display:inline-block;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.uiIconSm{width:16px;height:16px}
.uiIconLg{width:22px;height:22px}
.tabIcon{display:grid;place-items:center;line-height:1}
.tabIcon .uiIcon{width:21px;height:21px}
.mobileMenuButton .uiIcon{width:22px;height:22px}
.iconOnlyLabel{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

.container{
  max-width:1280px;
  width:100%;
  margin:0 auto;
  padding:var(--space-xl);
  box-sizing:border-box;
}

/* Responsive Breakpoints */
@media (max-width: 1366px){
  .container{max-width:1200px; padding:var(--space-lg)}
}
@media (max-width: 1024px){
  .container{max-width:960px; padding:var(--space-lg)}
}
@media (max-width: 768px){
  .container{max-width:100%; padding:var(--space-md)}
}
@media (max-width: 480px){
  .container{padding:var(--space-sm)}
}
.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-lg);
  padding:var(--space-lg) var(--space-xl);
  border:none;
  border-radius:var(--radius-xl);
  background:var(--bg);
  box-shadow: var(--shadow-md);
  margin-bottom:var(--space-xl);
  transition: all 0.3s ease;
  width:100%;
  box-sizing:border-box;
}
@media (max-width: 768px){
  .header{
    flex-direction:row;
    align-items:center;
    padding:var(--space-sm);
  }
}
.brand{display:flex;align-items:center;gap:10px}
.logo{
  width:40px;
  height:40px;
  border-radius:var(--radius-md);
  background: var(--panel);
  border:1px solid var(--line);
  box-shadow: var(--shadow-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  cursor:pointer;
  transition: all 0.2s ease;
}
.logoIcon{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--accent);
}
.logoIcon svg{width:22px;height:22px;display:block}

/* Consistent icon sizing for header chips/buttons (avoids emoji-size differences) */
.chipIcon{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  color:var(--text-secondary);
}
.chipIcon svg{width:18px;height:18px;display:block}

.iconSvg{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.iconSvg svg{width:18px;height:18px;display:block}
.logo:active{
  box-shadow: var(--shadow-inset);
}
.brand h1{
  font-size:var(--fs-base);
  margin:0;
  letter-spacing:-.01em;
  font-weight:700;
  color:var(--text);
}
.brand p{
  margin:0;
  color:var(--muted);
  font-size:var(--fs-sm);
  font-weight:500;
}
.nav{
  display:flex;
  gap:var(--space-md);
  align-items:center;
  flex-wrap:wrap;
  justify-content:center;
}
@media (max-width: 768px){
  .nav{
    width:100%;
    justify-content:stretch;
  }
  /* On mobile, keep navigation buttons evenly sized, but do NOT force the user chip to become a big square */
  .nav .btnNav{flex:1;}
  .nav .btnIcon{flex:0 0 auto;}
  .nav .chip{flex:0 0 auto; white-space:nowrap; padding:6px 10px; font-size:var(--fs-xs); gap:8px; border-radius:var(--radius-md);}
  .nav .chipIcon{width:16px;height:16px;}
  .nav .chipIcon svg{width:16px;height:16px;}
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:var(--space-sm);
  padding:var(--space-sm) var(--space-md);
  border-radius:var(--radius-md);
  border:none;
  background:var(--bg);
  box-shadow: var(--shadow-sm);
  color:var(--text-secondary);
  font-size:var(--fs-sm);
  font-weight:600;
  text-decoration:none;
  transition: all 0.2s ease;
}
.chip:active{
  box-shadow: var(--shadow-inset);
}
.btn{
  appearance:none;
  border:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-sm);
  padding:var(--space-md) var(--space-xl);
  border-radius:var(--radius-lg);
  background:var(--bg);
  box-shadow: var(--shadow-md);
  color:var(--text);
  text-decoration:none;
  min-height:48px;
  font-weight:600;
  font-size:var(--fs-md);
  transition: all 0.2s ease;
}
.btn:hover{
  box-shadow: var(--shadow-lg);
}
.btn:active{
  box-shadow: var(--shadow-inset);
  transform: scale(0.98);
}
.btnNav{
  padding:8px 12px;
  border-radius:var(--radius-sm);
  font-size:var(--fs-sm);
}

/* Notification counter on nav buttons (e.g., pending approvals) */
.btnNavWithBadge{position:relative}
.notifBadge{
  position:absolute;
  top:-7px;
  right:-7px;
  min-width:18px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--bad);
  color:#fff;
  font-weight:700;
  font-size:var(--fs-xs);
  line-height:1;
  box-shadow:0 0 0 2px rgba(11,18,32,.9);
}
@media (max-width: 600px){
  .btnNav{padding:7px 9px;font-size:var(--fs-xs)}
}
.btnPrimary{
  background:linear-gradient(145deg, #6ba3ff, #4a8de8);
  color:#ffffff;
  font-weight:700;
  box-shadow: var(--shadow-md);
}
.btnPrimary:hover{
  box-shadow: var(--shadow-lg);
}
.btnPrimary:active{
  box-shadow: inset 6px 6px 12px rgba(74,141,232,.3), inset -6px -6px 12px rgba(107,163,255,.3);
}
.btnDanger{
  background:var(--bad);
  border-color:var(--bad);
  color:#ffffff;
  box-shadow: 0 4px 14px rgba(239,68,68,.3);
  font-weight:700;
}
.btnDanger:hover{
  background:#ff5c5c;
  border-color:#ff5c5c;
  box-shadow: 0 6px 20px rgba(239,68,68,.4);
}
.btnIcon{padding:8px 10px;min-width:42px;justify-content:center}
@media (max-width: 600px){.btnIcon{min-width:40px;padding:8px 10px}}

/* Ghost/secondary action button (used on auth screens). */
.btnGhost{
  background:transparent;
  border:1px solid rgba(120,130,150,.35);
  box-shadow:none;
}
.btnGhost:hover{
  box-shadow: var(--shadow-sm);
}
.btnGhost:active{
  box-shadow: var(--shadow-inset);
}

/* Auth (Login/Register) layouts: make forms harmonious on desktop + mobile. */
.authCard{max-width:900px;margin-left:auto;margin-right:auto;}
.authFormGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items:start;
}
.authFormGrid .field{min-width:0;}
.authFormGrid .span2{grid-column: 1 / -1;}
.authFormGrid .help{margin-top:6px;opacity:.9;max-width:70ch;}
.authActions{
  grid-column: 1 / -1;
  display:flex;
  gap: var(--space-md);
  justify-content:flex-end;
  align-items:center;
  margin-top: var(--space-sm);
}
@media (max-width: 900px){
  .authFormGrid{grid-template-columns: 1fr;}
  .authActions{justify-content:stretch;}
  .authActions .btn{flex:1;}
}

/* Admin: action buttons in the user table should be compact (not oversized). */
.adminActionRow .btn{
  min-height:36px;
  padding:8px 12px;
  border-radius:12px;
  font-size:var(--fs-sm);
  font-weight:700;
}
@media (max-width: 600px){
  .adminActionRow .btn{
    min-height:34px;
    padding:8px 10px;
    font-size:var(--fs-sm);
  }
}
/* Main Content Grid - Responsive layout */
.grid{
  display:grid;
  grid-template-columns: 1fr;  /* Single column by default */
  gap:var(--space-xl);
  margin-top:var(--space-xl);
  width:100%;
  max-width:900px;  /* Limit width for better readability */
  margin-left:auto;
  margin-right:auto;
}

/* For wider screens with 2+ cards, use 2 columns */
.grid.twoCol{
  grid-template-columns: 1fr 1fr;
  max-width:100%;
}

/* Responsive Grid Breakpoints */
@media (max-width: 1200px){
  .grid.twoCol{
    grid-template-columns: 1fr 1fr;
    gap:var(--space-lg);
  }
}
@media (max-width: 900px){
  .grid, .grid.twoCol{
    grid-template-columns: 1fr;
    gap:var(--space-lg);
    max-width:100%;
  }
}
@media (max-width: 600px){
  .grid, .grid.twoCol{
    gap:var(--space-md);
  }
}
.card{
  border:none;
  border-radius:var(--radius-xl);
  background:var(--bg);
  box-shadow: var(--shadow-lg);
  padding:var(--space-2xl);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
  overflow:hidden;
  width:100%;
  box-sizing:border-box;
}

/* Archive table needs horizontal room on mobile; don't clip overflow inside card */
.archiveCard{overflow:visible;}
.tableWrap{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}

@media (max-width: 720px){
  /* Make archive usable on phones */
  #archiveTable th, #archiveTable td{padding:10px 10px;}
  #archiveTable .filename{word-break:break-word;}

  /* Hide Batch column on mobile to avoid cutting off actions */
  #archiveTable th:nth-child(4),
  #archiveTable td:nth-child(4){display:none;}

  /* Keep printed date compact */
  #archiveTable th:nth-child(3),
  #archiveTable td:nth-child(3){white-space:nowrap;}

  /* Actions: wrap buttons nicely */
  #archiveTable td:nth-child(5){
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    justify-content:flex-end;
    align-items:center;
  }
  #archiveTable td:nth-child(5) .btn{
    padding:9px 12px;
    font-size:var(--fs-sm);
  }
  #archiveTable td:nth-child(5) .btnIcon{
    width:40px;
    height:40px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
}
.card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:0;
}
.card:hover{
  box-shadow: var(--shadow-xl);
  transform: translateY(-2px);
}
.card h2{
  margin:0 0 var(--space-lg) 0;
  font-size:var(--fs-xl);
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--text);
  line-height:1.3;
}
.small{
  color:var(--muted);
  font-size:var(--fs-sm);
  line-height:1.6;
  font-weight:500;
}
.row{
  display:flex;
  gap:var(--space-md);
  flex-wrap:wrap;
  align-items:center;
}
.field{
  display:flex;
  flex-direction:column;
  gap:var(--space-sm);
  min-width:160px;
  flex:1;
}

/* Settings inputs on dashboard: make them wider / more touch-friendly */
.settingsPanel {
  /* Desktop: always visible */
  display: block;
}

.settingsRow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

.settingsRow .field{flex:1 1 230px; min-width:200px}
.settingsRow select{width:100%}

.quickPresets{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.quickPresets .btn{padding:8px 12px; min-height:38px}

.settingsSummary{
  margin-top:10px;
  padding:10px 12px;
  border:1px solid var(--line);
  background:var(--panel2);
  border-radius:var(--radius-md);
  font-size:var(--fs-sm);
  color:var(--text);
  opacity:.95;
}

@media (max-width: 860px), (pointer: coarse) and (max-width: 1024px) {
  /* Mobile: hide desktop settings, show bottom bar instead */
  .settingsPanel {
    display: none;
  }
}

@media (max-width: 720px){
  .settingsRow .field{flex:1 1 48%; min-width:0}
}
label{
  font-size:var(--fs-sm);
  color:var(--text-secondary);
  font-weight:600;
  letter-spacing:-.01em;
}
input[type="text"],input[type="password"],input[type="number"],select{
  padding:var(--space-md) var(--space-lg);
  border-radius:var(--radius-lg);
  border:none;
  background:var(--bg);
  box-shadow: var(--shadow-inset);
  color:var(--text);
  outline:none;
  min-height:48px;
  transition: all 0.2s ease;
  font-size:var(--fs-md);
  font-weight:500;
}
input[type="text"]:focus,input[type="password"]:focus,input[type="number"]:focus,select:focus{
  box-shadow: var(--shadow-inset), 0 0 0 3px var(--accent-light);
}
input[type="file"]{color:var(--muted)}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top;font-size:var(--fs-sm)}
.badge{
  display:inline-flex;
  align-items:center;
  gap:var(--space-sm);
  padding:6px var(--space-md);
  border-radius:var(--radius-md);
  font-size:var(--fs-xs);
  border:none;
  background:var(--bg);
  box-shadow: var(--shadow-sm);
  color:var(--text-secondary);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.badge.good{
  color:var(--good);
  background:var(--good-light);
  box-shadow: var(--shadow-sm);
}
.badge.bad{
  color:var(--bad);
  background:var(--bad-light);
  box-shadow: var(--shadow-sm);
}
.badge.warn{
  color:var(--warn);
  background:var(--warn-light);
  box-shadow: var(--shadow-sm);
}
.toast{
  position:fixed;
  left:50%;
  bottom:calc(120px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  padding:var(--space-lg) var(--space-xl);
  border-radius:var(--radius-lg);
  border:1px solid var(--glass-border);
  background:var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color:var(--text);
  font-size:var(--fs-md);
  font-weight:600;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease, transform .3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-xl);
  z-index:5000;
}
.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(-8px);
}
.thumbGrid{display:grid;grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap:10px}
.thumb{
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px;background:var(--panel2);
}
.thumb img{width:100%;height:auto;border-radius:8px;display:block}
.thumb .meta{display:flex;justify-content:space-between;align-items:center;margin-top:6px}
hr{border:none;border-top:1px solid var(--line)}

.thumb.selected{outline:2px solid rgba(59,130,246,.8);box-shadow:0 0 0 3px rgba(59,130,246,.22);}


/* Drag & Drop Upload */
.dropzone{
  border:none;
  border-radius:var(--radius-xl);
  padding:var(--space-3xl);
  position:relative;
  background:var(--bg);
  box-shadow: var(--shadow-inset);
  text-align:center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow:hidden;
  width:100%;
  box-sizing:border-box;
}
.dropzone:hover{
  box-shadow: var(--shadow-inset), 0 0 0 3px var(--accent-light);
}
.dropzone .dropHint{pointer-events:none;}
.dropzone input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;}
.dropzone.dragover{
  background:var(--accent-light);
  box-shadow: var(--shadow-inset), 0 0 0 3px var(--accent);
  transform:scale(1.01);
}

/* --- Dashboard: bottom actions + sheet (mobile) -------------------------- */
.bottomBar{
  position:fixed;
  left:0;right:0;bottom:0;
  padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  gap:10px;
  /* Transparent wrapper to avoid a full-width color band. */
  background: transparent;
  border:0;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  z-index:200;
}
.bottomInfoRow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  width:100%;
  max-width:1080px;
  margin:0 auto;
  padding:12px 16px;
  border-radius:var(--radius-md);
  border:1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
/* On mobile the full settings text should be visible: wrap instead of truncating. */
.bottomSummary{
  flex:1;
  font-size:var(--fs-xs);
  color:var(--muted);
  line-height:1.25;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  word-break:break-word;
}
.bottomStar{min-width:54px;min-height:44px;border-radius:var(--radius-lg);font-size:var(--icon-sm);padding:10px 12px}
.bottomBtnRow{
  display:flex;
  gap:12px;
  width:100%;
  max-width:1080px;
  margin:0 auto;
  padding:12px 16px;
  border-radius:var(--radius-md);
  border:1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
.bottomBtn{flex:1;border-radius:18px;min-height:54px;font-size:var(--fs-base)}

.sheetOverlay{
  position:fixed;
  inset:0;
  /* Stronger dim + blur so the sheet content is readable and the background doesn't distract. */
  background:rgba(0,0,0,0.68);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index:300;
}
.sheet{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:400;
  max-height:82vh;
  transform:translateY(105%);
  transition:transform .24s ease;
  border:1px solid var(--line);
  border-bottom:none;
  border-radius:20px 20px 0 0;
  background:var(--panel);
  box-shadow: 0 -8px 32px rgba(0,0,0,.5);
  padding:10px 12px 16px;
}
.sheet.open{transform:translateY(0)}
.sheetHandle{width:44px;height:5px;border-radius:999px;background:rgba(255,255,255,.25);margin:4px auto 10px}
.sheetHeader{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 2px}
.sheetTitle{font-weight:800;font-size:var(--fs-md)}
.sheetClose{min-width:42px}
.sheetBody{overflow:auto;max-height:calc(82vh - 62px);padding:10px 2px 0}

/* Make moved dashboard settings readable inside the bottom sheet */
.sheet .settingsPanel{
  /* The dashboard hides .settingsPanel on mobile. When it is moved into the sheet,
     it must become visible again. */
  display:block !important;
  border:1px solid var(--line);
  background:var(--panel2);
  border-radius:var(--radius-md);
  padding:14px;
}

/* Options layout inside the bottom sheet (requested):
   Papier next to Kopien, and below Farbe next to Duplex. */
.sheet .settingsRow{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-areas:
    "printer printer"
    "paper copies"
    "color duplex";
  gap:12px;
  align-items:start;
}
.sheet .settingsRow .field{min-width:0;}
.sheet #printerField{grid-area:printer;}
.sheet #pagesizeField{grid-area:paper;}
.sheet #copiesField{grid-area:copies;}
.sheet #colorField{grid-area:color;}
.sheet #duplexField{grid-area:duplex;}

body.noScroll{overflow:hidden}

@media (max-width: 860px), (pointer: coarse) and (max-width: 1024px){
  .container{padding-bottom:132px}
}
@media (min-width: 861px) and (pointer: fine){
  .bottomBar,.sheetOverlay,.sheet{display:none !important}
}

.uploadProgress{margin-top:10px;padding:12px;border-radius:var(--radius-sm);background:var(--panel2);border:1px solid var(--line);}
.uploadProgressRow{display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-sm);opacity:.95;}
.uploadProgressBar{height:10px;border-radius:8px;background:var(--bg);overflow:hidden;margin-top:8px;}
.uploadProgressBar > div{height:10px;border-radius:8px;background:var(--accent);width:0%;transition:width .15s linear;}

/* Dashboard quick print */
.alert{padding:12px 14px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--panel2);margin:10px 0;font-weight:600}
.alert.good{border-color:rgba(34,197,94,.25);color:rgba(34,197,94,.95)}
.alert.bad{border-color:rgba(239,68,68,.25);color:rgba(239,68,68,.95)}

.quickPanel{border:1px solid var(--line);background:var(--panel2);border-radius:var(--radius-md);padding:16px;max-width:100%;overflow:hidden}
.quickFirstName{margin-left:6px;opacity:.9;display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
.quickDetails{margin-top:8px}
.quickSummary{
  list-style:none;
  cursor:pointer;
  color:var(--accent);
  font-weight:700;
  padding:8px 0;
}
.quickSummary::-webkit-details-marker{display:none}
.quickDetailsBody{max-height:240px;overflow-y:auto;overflow-x:hidden;padding-right:4px}
.fileList{list-style:none;padding:0;margin:10px 0;display:flex;flex-direction:column;gap:8px}
.fileList li{display:flex;align-items:center;gap:10px;justify-content:space-between;border:1px solid var(--line);background:var(--panel2);padding:12px;border-radius:var(--radius-sm);max-width:100%;overflow:hidden}
.fileMain{min-width:0;display:flex;flex-direction:column;gap:4px}
.fileName{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:420px}
.fileActions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width: 820px){
  .fileList li{flex-direction:column;align-items:flex-start}
  /* On phones: allow wrapping so a long filename never forces horizontal scrolling */
  .fileName{max-width:100%;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;word-break:break-word}
  .fileActions{width:100%;justify-content:flex-start}
}

/* Favorite star (dashboard) */
.favStar{
  width:64px;
  min-height:56px;
  padding:14px 0;
  font-size:var(--icon-lg);
  line-height:1;
}
.favStar.active{
  color:var(--warn);
  border-color:rgba(245,158,11,.35);
  background:rgba(245,158,11,.10);
}

/* -------------------- Free text block -------------------- */
.freeTextCard{
  margin-top: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel2);
}
.freeTextTitle{font-weight:700;margin-bottom:2px}
.freeTextTools{flex-wrap:wrap;gap:10px}
.freeTextTools .field{min-width:140px;flex:1}
.btnSmall{padding:10px 12px;min-width:44px;border-radius:var(--radius-md)}
.btnSmall.active{border-color:rgba(99,102,241,.55);background:rgba(99,102,241,.12)}
.freeTextInput{
  width: 100%;
  min-height: 260px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  font-size:var(--fs-md);
  resize: vertical;
}

/* ======================================================================
   Component normalization
   These rules are part of the single V70 glass/flat design system.
   ====================================================================== */


/* Header / navigation */
.header{
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.chip{
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: none;
}
.logo{box-shadow:none}

/* Cards */
.card{
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.card:hover{
  box-shadow: var(--shadow-lg);
  transform: none;
}

/* Buttons */
.btn{
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: none;
}
.btn:hover{box-shadow: var(--shadow-sm)}
.btn:active{transform: translateY(1px); box-shadow: none}
.btnPrimary{
  border: none;
  background: linear-gradient(135deg, rgba(91,156,255,1) 0%, rgba(74,141,232,1) 55%, rgba(72,187,120,0.95) 120%);
  box-shadow: 0 10px 26px rgba(59,130,246,0.25);
}
[data-theme="dark"] .btnPrimary{box-shadow: 0 14px 32px rgba(0,0,0,0.45)}
/* Explicit button variants keep primary/danger actions readable across links and buttons. */
.btn.btnPrimary,
a.btn.btnPrimary{
  border:none;
  color:#fff;
  background: linear-gradient(135deg, rgba(91,156,255,1) 0%, rgba(74,141,232,1) 55%, rgba(72,187,120,0.95) 120%);
  box-shadow: 0 10px 26px rgba(59,130,246,0.25);
}
[data-theme="dark"] .btn.btnPrimary,
[data-theme="dark"] a.btn.btnPrimary{box-shadow: 0 14px 32px rgba(0,0,0,0.45)}

.btn.btnDanger,
a.btn.btnDanger{
  border:none;
  color:#fff;
  background: var(--bad);
  box-shadow: 0 10px 22px rgba(245,101,101,0.20);
}
[data-theme="dark"] .btn.btnDanger,
[data-theme="dark"] a.btn.btnDanger{box-shadow: 0 14px 30px rgba(0,0,0,0.45)}

.btnDanger{box-shadow:none}
.btnNav{background: var(--surface); border: 1px solid var(--line)}
.btnNav.btnPrimary{
  border:none;
  color:#fff;
  background: linear-gradient(135deg, rgba(91,156,255,1) 0%, rgba(74,141,232,1) 55%, rgba(72,187,120,0.95) 120%);
}
.btnNav.btnDanger{border:none;color:#fff;background: var(--bad)}

/* Inputs */
input[type="text"],
input[type="password"],
input[type="number"],
select{
  background: var(--panel2);
  border: 1px solid var(--line);
  box-shadow: none;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
select:focus{
  box-shadow: var(--focus-ring);
}

/* Dropzone */
.dropzone{
  background: var(--surface);
  border: 2px dashed rgba(91,156,255,0.35);
  box-shadow: none;
}
[data-theme="dark"] .dropzone{border-color: rgba(91,156,255,0.28)}
.dropzone:hover{box-shadow: var(--focus-ring)}
.dropzone.dragover{
  background: var(--accent-light);
  border-color: rgba(91,156,255,0.70);
  box-shadow: var(--focus-ring);
  transform: none;
}

/* Lists (dashboard + quick print) */
.quickPanel,
.freeTextCard,
.uploadProgress,
.alert,
.thumb,
.fileList li{
  background: var(--panel2);
  border: 1px solid var(--line);
}

/* Tables (Archive / Admin etc.) */
.table{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.table th{
  background: linear-gradient(180deg, rgba(91,156,255,0.12), transparent);
  color: var(--text);
}
.table tr:hover td{background: rgba(91,156,255,0.08)}
[data-theme="dark"] .table tr:hover td{background: rgba(91,156,255,0.10)}

/* Archive filters */
.archive-filters input,
.archive-filters select{
  background: var(--panel2);
  border: 1px solid var(--line);
  box-shadow: none;
}

/* Bottom bar + sheet: make it fully opaque (fixes “see-through” issues) */
.bottomInfoRow,
.bottomBtnRow,
.sheet,
.sheet .settingsPanel{
  background: var(--surface);
  border: 1px solid var(--line);
}
.sheetOverlay{background: rgba(0,0,0,0.60)}


/* Collapsible container for free text */
.freeTextDetails{padding:0;}
.freeTextSummary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px;
  user-select:none;
}
.freeTextSummary::-webkit-details-marker{display:none;}
.freeTextSummary::after{
  content:'';
  width:8px;
  height:8px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  opacity:.7;
  transform:rotate(45deg);
  transition:transform .16s ease;
}
.freeTextDetails[open] .freeTextSummary::after{transform:rotate(225deg);}
.freeTextInner{padding:0 14px 14px 14px;}

/* Image preview */
.previewWrap{
  width:100%;
  border-radius:18px;
  padding:14px;
  background:rgba(118,118,128,.07);
  border:1px solid rgba(60,60,67,.12);
}
.paperPreviewStage{
  width:100%;
  min-height:300px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
  box-sizing:border-box;
  overflow:hidden;
}
.paperPreview{
  position:relative;
  flex:0 0 auto;
  margin:auto;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(60,60,67,.22);
  border-radius:4px;
  box-shadow:0 18px 45px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.12);
  transition:width .24s ease,height .24s ease;
}
.paperSheet{
  position:absolute;
  inset:0;
  box-sizing:border-box;
  display:flex;
  background:#fff;
}
.paperArea{
  width:100%;
  height:100%;
  box-sizing:border-box;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:padding .18s ease;
}
.imgPreview{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:0;
  display:block;
  transform-origin:center center;
  transition:transform .18s ease;
}
.paperFormatBadge{
  position:absolute;
  right:8px;
  bottom:8px;
  z-index:3;
  padding:5px 8px;
  border-radius:999px;
  background:rgba(28,28,30,.76);
  color:#fff;
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.01em;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  pointer-events:none;
}
.previewExplain{text-align:center}
@media (max-width:600px){
  .previewWrap{padding:8px}
  .paperPreviewStage{min-height:250px;padding:8px}
  .paperFormatBadge{font-size:var(--fs-xs);padding:4px 7px}
}

/* Mobile touch targets */
@media (max-width: 520px){
  input[type="text"],input[type="password"],input[type="number"],select{padding:14px 12px;font-size:var(--fs-base);border-radius:var(--radius-md)}
  .favStar{width:72px;min-height:64px;padding:18px 0;font-size:var(--icon-lg)}
}

/* Printer reachability indicator (next to selected printer) */
.printerDot{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:999px;
  margin-left:6px;
  vertical-align:middle;
  box-shadow:0 0 0 2px rgba(255,255,255,0.08) inset;
}
.printerDotOnline{ background:#2ecc71; }
.printerDotOffline{ background:#e74c3c; }
.printerDotUnknown{ background:rgba(255,255,255,0.35); }

.tonerInfo{
  margin-top:6px;
  font-size:var(--fs-xs);
  color:var(--muted);
  line-height:1.35;
  word-break: break-word;
}

.tonerList{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:6px 14px;
}
.tonerLine{display:flex;align-items:center;gap:8px;min-width:0;}
.tonerIcon{min-width:18px;}
.tonerText{display:inline-flex;align-items:baseline;gap:6px;min-width:0;}
.tonerLabel{white-space:nowrap;}
.tonerPct{font-variant-numeric: tabular-nums;opacity:.9;}
.tonerEmpty{opacity:.85;}

@media (max-width: 600px){
  .tonerInfo{font-size:var(--fs-sm)}
  .tonerLine{gap:10px}
}

.tonerWarn{
  color:#b5651d;
}

/* -------------------- Admin: Toner Abfrage -------------------- */
.tonerAdminStatus{
  margin-top:14px;
  padding:12px 14px;
  border-radius:16px;
  background:var(--surface-2);
  border:1px solid var(--line);
  color:var(--text);
  font-variant-numeric:tabular-nums;
}

.tonerAdminGrid{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

@media (max-width:720px){
  .tonerAdminGrid{grid-template-columns:1fr}
}

.tonerAdminItem{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:20px;
  padding:16px;
  box-shadow:0 8px 22px rgba(15,23,42,.05);
}

.tonerAdminHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.tonerAdminLeft{display:flex;align-items:center;gap:10px;min-width:0}
.tonerAdminIcon{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:rgba(0,122,255,.08);
  font-size:var(--fs-base);
}
.tonerAdminLabel{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}

.tonerAdminRight{display:flex;align-items:center;gap:10px}
.tonerAdminPct{font-weight:850;font-variant-numeric:tabular-nums;color:var(--text)}

.tonerResetBtn{min-width:40px;min-height:36px}

.tonerBar{
  margin-top:12px;
  height:8px;
  border-radius:999px;
  background:rgba(118,118,128,.12);
  overflow:hidden;
}

.tonerBarFill{
  height:100%;
  width:0;
  border-radius:999px;
  background:linear-gradient(90deg,#3d8bff,#4fc3d7);
}

.tonerAdminMeta{
  margin-top:12px;
  line-height:1.45;
  color:var(--text-secondary);
}

.tonerAdminMeta .small{color:var(--muted)}


/* PDF link import */
#pdfUrlInput.freeTextInput{
  min-height: 90px;
  font-size:var(--fs-md);
}
#pdfUrlResults{
  opacity: .95;
}


.field.disabled{opacity:.55}
.field.disabled input{pointer-events:auto}


/* number input: match dark controls + remove spinners */
input[type="number"]{appearance:textfield;-moz-appearance:textfield;}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}


/* =========================
   Archive: mobile card view
   ========================= */

.archiveCards{display:none;}

.archiveCardItem{
  border-radius:var(--radius-lg);
  padding:14px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(8,14,28,0.45);
  box-shadow: 0 12px 40px rgba(0,0,0,0.20);
}

.archiveCardTop, .acHeader{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.archiveCardCheck, .acCheck{display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:12px; border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.04);}
.archiveCardCheck input, .acCheck input{width:18px; height:18px;}

.archiveCardMeta, .acRight{display:flex; flex-direction:column; gap:2px; min-width:0; text-align:right;}
.acDate{font-size:var(--fs-sm); color:rgba(255,255,255,0.80)}
.acBatch{font-size:var(--fs-xs); color:rgba(255,255,255,0.60)}

.archiveCardFile, .acBody{margin-top:10px;}
.acUser{font-size:var(--fs-xs); color:rgba(255,255,255,0.70); margin-bottom:6px;}
.archiveCardFilename, .acFilename{font-weight:700; color:rgba(255,255,255,0.92); word-break:break-word;}

.archiveCardActions, .acActions{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px;}
.archiveCardActions .btn, .acActions .btn{padding:10px 12px; border-radius:var(--radius-md);}
.archiveCardActions .btnIcon, .acActions .btnIcon{padding:10px 12px;}

/* Light theme only — V74: do not leak these colors into dark mode. */
body:not([data-theme="dark"]) .archiveCardItem{
  background:rgba(255,255,255,0.85);
  border:1px solid rgba(0,0,0,0.10);
  box-shadow:0 12px 40px rgba(0,0,0,0.10);
}
body:not([data-theme="dark"]) .acDate{color:rgba(0,0,0,0.72)}
body:not([data-theme="dark"]) .acBatch{color:rgba(0,0,0,0.52)}
body:not([data-theme="dark"]) .acUser{color:rgba(0,0,0,0.55)}
body:not([data-theme="dark"]) .archiveCardFilename,
body:not([data-theme="dark"]) .acFilename{color:rgba(0,0,0,0.82)}
body:not([data-theme="dark"]) .archiveCardCheck,
body:not([data-theme="dark"]) .acCheck{border:1px solid rgba(0,0,0,0.10);background:rgba(0,0,0,0.04)}

@media (max-width: 720px){
  .tableWrap{display:none;}
  .archiveCards{display:flex; flex-direction:column; gap:12px;}

  /* Filters: avoid horizontal squeeze */
  .archive-filters{flex-direction:column; align-items:stretch;}
  .archive-filters > *{width:100%;}
}

/* ======================== V30 consolidated UI (token references normalized in V70) ======================== */
html,body{
  background:var(--vbg);
  color:var(--text);
  max-width:100%;
  overflow-x:hidden;
}
body::before,body::after{
  display:none;
  content:none;
}
.container{
  max-width:1180px;
  margin:auto;
  padding:16px 18px 120px;
}
.header{
  position:sticky;
  top:8px;
  z-index:70;
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:var(--radius-xl);
  background:var(--glass);
  backdrop-filter:blur(24px) saturate(150%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  box-shadow:0 12px 35px rgba(50,60,80,.11);
  margin-bottom:22px;
}
.brand{
  display:flex;
  align-items:center;
  gap:9px;
  text-decoration:none;
  color:var(--text);
}
.logo{
  width:38px;
  height:38px;
  border-radius:var(--radius-md);
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.55);
}
.logo svg{
  width:19px;
  height:19px;
}
.brandTitle{
  font-size:var(--fs-lg);
  margin:0;
}
.desktopNav{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:5px;
}
.btn,.chip{
  border:0;
  border-radius:var(--radius-md);
  min-height:42px;
  padding:0 13px;
  background:rgba(118,118,128,.1);
  color:var(--text);
  font-weight:650;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.btnPrimary,.navActive{
  background:var(--blue);
  color:#fff;
  box-shadow:0 7px 18px rgba(0,122,255,.2);
}
.btnDanger{
  background:var(--red);
  color:#fff;
}
.btnIcon{
  width:42px;
  padding:0;
}
.notifBadge{
  background:#ff3b30;
  color:white;
  border-radius:999px;
  font-size:var(--fs-xs);
  padding:2px 5px;
}
.mobileNavMenu,.mobileTabBar{
  display:none;
}
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  box-shadow:0 7px 26px rgba(60,60,67,.06);
  padding:22px;
}
.muted,.small,small{
  color:var(--muted);
}
.alert{
  padding:12px 14px;
  border-radius:var(--radius-md);
  margin:10px 0;
}
.alert.good{
  background:rgba(52,199,89,.12);
  color:#248a3d;
}
.alert.bad{
  background:rgba(255,59,48,.12);
  color:#d70015;
}
.field,.stackForm{
  display:flex;
  flex-direction:column;
  gap:7px;
}
.stackForm{
  gap:12px;
}
.stackForm label,.field label{
  font-weight:700;
  color:#687087;
  font-size:var(--fs-sm);
}
.stackForm input,.stackForm select,.stackForm textarea,.field input,.field select,.field textarea,select,input,textarea{
  min-height:46px;
  border:1px solid transparent;
  border-radius:var(--radius-md);
  background:#f2f2f7;
  color:var(--text);
  padding:10px 12px;
  font:inherit;
}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{
  background:#2c2c2e;
}
.authWrap{
  max-width:720px;
  margin:40px auto;
}
.authCard h2{
  font-size:var(--fs-display);
}
.authLinks{
  display:flex;
  justify-content:space-between;
  margin-top:18px;
}
.confirmOverlay{
  position:fixed;
  inset:0;
  z-index:200;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(7px);
  padding:20px;
}
.confirmDialog{
  width:min(440px,calc(100vw - 28px));
  background:var(--surface);
  border-radius:var(--radius-2xl);
  padding:24px;
  box-shadow:0 24px 70px rgba(0,0,0,.24);
  text-align:left;
}
.confirmDialog .btnPrimary{
  width:100%;
  margin-top:8px;
}
.versionBadge,.eyebrow{
  font-size:var(--fs-xs);
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--blue);
}
.printWorkspace{
  max-width:900px;
  margin:auto;
}
.printHero{
  padding:4px 3px 15px;
}
.printHeroKicker{
  font-size:var(--fs-xs);
  letter-spacing:.11em;
  font-weight:850;
  color:var(--blue);
}
.printHero h1{
  font-size:var(--fs-hero);
  letter-spacing:-.035em;
  margin:3px 0;
}
.printHero p{
  color:var(--muted);
  margin:0;
}
.uxStep{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  margin-bottom:14px;
  overflow:hidden;
  box-shadow:0 5px 20px rgba(60,60,67,.05);
}
.uxStepHead{
  display:grid;
  grid-template-columns:36px 1fr auto;
  gap:11px;
  align-items:center;
  padding:16px 18px 11px;
}
.uxStepNumber{
  width:34px;
  height:34px;
  border-radius:11px;
  display:grid;
  place-items:center;
  background:#e9e9ee;
  color:#777;
  font-weight:800;
}
.uxStepActive .uxStepNumber{
  background:var(--blue);
  color:white;
}
.uxStepHeading h2{
  margin:0;
  font-size:var(--fs-xl);
}
.uxStepHeading p{
  margin:2px 0 0;
  color:var(--muted);
  font-size:var(--fs-sm);
}
.uxStepState{
  font-size:var(--fs-xs);
  color:#248a3d;
  background:rgba(52,199,89,.12);
  padding:6px 9px;
  border-radius:999px;
}
.uxStepStateAuto{
  color:#0068d9;
  background:rgba(0,122,255,.1);
}
.uxStepBody{
  padding:0 18px 18px;
}
.compactSource{
  display:none;
}
.dropzone{
  min-height:160px;
  border:1.5px dashed #aeb9c9;
  border-radius:var(--radius-lg);
  background:#f8f8fa;
  display:grid;
  place-items:center;
  text-align:center;
  position:relative;
  padding:18px;
}
.dropUploadIcon{
  width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--blue);
  color:#fff;
  font-size:var(--icon-lg);
  margin:auto;
}
.dropTitle{
  font-size:var(--fs-xl);
  margin-top:8px;
}
.dropzone input[type=file]{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}
.secondaryToolsLabel{
  text-align:center;
  color:#9aa1b0;
  font-size:var(--fs-xs);
  letter-spacing:.14em;
  font-weight:800;
  margin:14px 0 4px;
}
.alternativeInput{
  border-top:1px solid var(--line);
}
.alternativeSummary{
  list-style:none;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 18px;
  gap:12px;
  align-items:center;
  padding:10px 2px;
  cursor:pointer;
}
.alternativeSummary::-webkit-details-marker{
  display:none;
}
.alternativeIcon{
  width:34px;
  height:34px;
  border-radius:var(--radius-sm);
  background:#e7f1ff;
  color:var(--blue);
  display:grid;
  place-items:center;
  font-weight:900;
}
.alternativeCopy{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.alternativeCopy small{
  margin-top:3px;
}
.alternativeChevron{
  justify-self:end;
}
.alternativeBody{
  padding:8px 46px 16px;
}
.exampleCode{
  font-family:monospace;
  background:#f2f2f7;
  padding:8px 10px;
  border-radius:var(--radius-sm);
  margin:8px 0;
  color:#667;
}
.freeTextTools,.settingsGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.inlineTools,.actionRow,.filesHeader,.userActions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.uxAutoSettings,.readySettings{
  margin:0 18px 16px;
  padding:14px 15px;
  background:#f5f5f7;
  border-radius:var(--radius-lg);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.uxAutoSettings strong,.readySettings strong{
  display:block;
  margin-top:4px;
}
.settingsPanel{
  margin:0 18px 18px;
}
.settingsDisclosure{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.settingsDisclosureSummary{
  padding:13px 14px;
  font-weight:800;
  cursor:pointer;
}
.settingsDisclosureBody{
  padding:14px;
}
.quickPresets{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.settingsGrid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.copyStepper{
  display:grid;
  grid-template-columns:48px 1fr 48px;
  gap:8px;
}
.saveDefaultRow{
  margin-top:14px;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.quickPanel{
  padding:0 18px 18px;
}
.filesHeader{
  justify-content:space-between;
  margin:12px 0;
}
.fileList{
  list-style:none;
  margin:0;
  padding:0;
}
.fileList li{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:14px 0;
  border-top:1px solid var(--line);
}
.fileName{
  font-weight:800;
}
.fileActions{
  display:flex;
  gap:7px;
  align-items:center;
}
.fileActions form{
  margin:0;
}
.mainPrintButton{
  width:100%;
  min-height:56px;
  font-size:var(--fs-lg);
}
.printStatus{
  margin:9px 0;
}
.printStatus.good{
  color:#248a3d;
}
.printStatus.bad{
  color:#d70015;
}
.hiddenSettingsFallback{
  display:none;
}
.bottomBar{
  display:none;
}
.sheetOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.46);
  z-index:120;
}
.sheet{
  position:fixed;
  z-index:130;
  left:0;
  right:0;
  bottom:0;
  max-height:82dvh;
  background:var(--surface);
  border-radius:28px 28px 0 0;
  transform:translateY(105%);
  transition:transform .22s ease;
  overflow:auto;
  padding-bottom:calc(18px + env(safe-area-inset-bottom));
}
.sheet.open{
  transform:translateY(0);
}
.sheetHandle{
  width:42px;
  height:5px;
  border-radius:99px;
  background:#d1d1d6;
  margin:9px auto;
}
.sheetHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 18px 12px;
}
.sheetBody{
  padding:0 10px 18px;
}
.noScroll{
  overflow:hidden;
}
.offlinePrinterIcon{
  width:52px;
  height:52px;
  border-radius:var(--radius-lg);
  background:rgba(255,59,48,.12);
  color:var(--red);
  display:grid;
  place-items:center;
  font-size:var(--fs-display);
  margin-bottom:12px;
}
.adminTabs{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.adminGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.span2{
  grid-column:1/-1;
}
.adminCards,.jobCards,.userGrid{
  display:grid;
  gap:10px;
}
.userCard,.jobCard,.manageUserCard{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:14px;
  background:var(--surface);
}
.userCard,.jobCard{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.userCard>div,.jobCard>div{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.userGrid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.manageUserCard{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.userCardTop{
  display:flex;
  justify-content:space-between;
  gap:10px;
}
.userCardTop>div{
  display:flex;
  flex-direction:column;
}
.statusPill{
  padding:5px 8px;
  border-radius:999px;
  font-size:var(--fs-xs);
  background:rgba(52,199,89,.12);
  color:#248a3d;
}
.statusPill.wait{
  background:rgba(255,159,10,.12);
  color:#c96d00;
}
.statusPill.off{
  background:rgba(255,59,48,.12);
  color:#d70015;
}
.dangerZone{
  border-color:rgba(255,59,48,.26);
}
.securityNote{
  background:rgba(255,159,10,.12);
  padding:12px;
  border-radius:var(--radius-md);
  margin:12px 0;
}
.backupHero{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  margin-bottom:14px;
}
.backupStats{
  display:flex;
  gap:8px;
}
.backupStats span{
  background:#f2f2f7;
  border-radius:var(--radius-md);
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  text-align:center;
}
.backupList{
  padding:0;
  list-style:none;
}
.backupList li{
  display:flex;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding:10px 0;
}
.checkRow,.toggleRow{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:9px;
}
.checkRow input,.toggleRow input{
  min-height:0;
  width:auto;
}
@media (max-width:900px){
  .container{
    padding:8px 10px 150px;
  }
  .header{
    position:relative;
    top:auto;
    margin-bottom:14px;
  }
  .desktopNav{
    display:none;
  }
  .mobileNavMenu{
    display:block;
    margin-left:auto;
    position:relative;
  }
  .mobileMenuButton{
    list-style:none;
    width:40px;
    height:40px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:rgba(118,118,128,.1);
    font-weight:900;
    cursor:pointer;
  }
  .mobileMenuButton::-webkit-details-marker{
    display:none;
  }
  .mobileMenuPopover{
    position:absolute;
    right:0;
    top:48px;
    width:230px;
    padding:8px;
    border-radius:20px;
    background:var(--glass);
    backdrop-filter:blur(24px);
    box-shadow:0 18px 50px rgba(0,0,0,.18);
    z-index:100;
  }
  .mobileMenuPopover a,.mobileMenuPopover button,.mobileMenuUser{
    display:flex;
    width:100%;
    min-height:44px;
    align-items:center;
    padding:0 12px;
    border:0;
    background:transparent;
    color:var(--text);
    text-decoration:none;
    border-radius:12px;
  }
  .mobileMenuUser{
    justify-content:space-between;
    border-bottom:1px solid var(--line);
  }
  .mobileMenuUser span{
    font-size:var(--fs-xs);
    color:var(--muted);
  }
  .dangerLink{
    color:var(--red);
  }
  .mobileTabBar{
    display:flex;
    position:fixed;
    z-index:80;
    left:50%;
    transform:translateX(-50%);
    bottom:calc(7px + env(safe-area-inset-bottom));
    width:min(calc(100vw - 16px),520px);
    height:62px;
    border-radius:var(--radius-xl);
    padding:5px 6px;
    background:var(--glass);
    backdrop-filter:blur(24px) saturate(150%);
    box-shadow:0 14px 45px rgba(30,40,60,.16);
    gap:4px;
  }
  .mobileTabBar a{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    border-radius:var(--radius-lg);
    text-decoration:none;
    color:var(--muted);
    font-size:var(--fs-xs);
    font-weight:700;
  }
  .mobileTabBar a.active{
    background:rgba(0,122,255,.13);
    color:var(--blue);
  }
  .tabIcon{
    font-size:var(--icon-sm);
  }
  .printHero h1{
    font-size:var(--fs-3xl);
  }
  .uxStepHead{
    grid-template-columns:30px 1fr;
    padding:13px 13px 9px;
  }
  .uxStepNumber{
    width:29px;
    height:29px;
    font-size:var(--fs-sm);
  }
  .uxStepState{
    display:none;
  }
  .uxStepHeading h2{
    font-size:var(--fs-lg);
  }
  .uxStepBody{
    padding:0 12px 12px;
  }
  .dropzone{
    min-height:120px;
  }
  .alternativeBody{
    padding:8px 2px 14px;
  }
  .alternativeSummary{
    grid-template-columns:34px minmax(0,1fr) 18px;
  }
  .freeTextTools,.settingsGrid,.adminGrid,.userGrid{
    grid-template-columns:1fr;
  }
  .uxAutoSettings,.readySettings{
    margin:0 12px 12px;
    align-items:flex-start;
  }
  .uxAutoSettings{
    flex-direction:column;
  }
  .uxAutoSettings .btn{
    width:100%;
  }
  .settingsPanel{
    margin:0 12px 12px;
  }
  .settingsDisclosureSummary{
    display:none;
  }
  .settingsDisclosure{
    border:0;
  }
  .settingsDisclosureBody{
    padding:0;
  }
  .quickPanel{
    padding:0 12px 12px;
  }
  .readySettings{
    margin-top:0;
  }
  .filesHeader{
    align-items:center;
  }
  .fileList li{
    flex-direction:column;
  }
  .fileActions{
    justify-content:flex-start;
  }
  .mainPrintButton{
    display:none;
  }
  .bottomBar{
    position:fixed;
    z-index:90;
    left:8px;
    right:8px;
    bottom:calc(76px + env(safe-area-inset-bottom));
    padding:8px;
    border-radius:var(--radius-xl);
    background:var(--glass);
    backdrop-filter:blur(24px);
    box-shadow:0 16px 44px rgba(30,40,60,.18);
  }
  .bottomSummary{
    padding:6px 8px;
    font-size:var(--fs-xs);
    color:var(--muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .bottomBtnRow{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
  }
  .bottomBtn{
    min-height:48px;
  }
  .adminTabs{
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:3px;
  }
  .adminTabs .btn{
    white-space:nowrap;
  }
  .span2{
    grid-column:auto;
  }
  .userCard,.jobCard{
    align-items:flex-start;
  }
  .backupHero{
    flex-direction:column;
    align-items:flex-start;
  }
  .backupStats{
    width:100%;
  }
  .backupStats span{
    flex:1;
  }
  .authWrap{
    margin:18px auto;
  }
  .card{
    padding:18px;
  }
  .confirmDialog{
    padding:20px;
  }
  .sheet .settingsPanel{
    margin:0;
  }
  .sheet .settingsDisclosure{
    display:block;
  }
  .sheet .settingsDisclosureBody{
    display:block;
  }
  .accountEmailDialog{
    max-height:85dvh;
    overflow:auto;
  }
}
.singlePrinterField select{
  display:none;
}
.singlePrinterField label::after{
  content:" · automatisch";
  font-weight:500;
  color:var(--muted);
}

/* V31 removed in V70: obsolete floating print dock. */

/* V32 – mobile Druckeinstellungen: eindeutige Felder, kein verrutschtes Druckerfeld */
.printerSelectHidden{display:none}
.fixedPrinterDisplay{
  min-height:46px;
  display:flex;
  align-items:center;
  width:100%;
  padding:0 14px;
  border-radius:var(--radius-md);
  background:#f2f2f7;
  color:var(--text);
  font-weight:700;
  border:1px solid transparent;
}
[data-theme="dark"] .fixedPrinterDisplay{background:#2c2c2e}
.mobileSettingsGrid .field{min-width:0;width:100%}
.mobileSettingsGrid .field > label{
  display:block;
  position:static;
  transform:none;
  margin:0 0 7px;
  padding:0;
  width:auto;
  color:var(--muted);
  font-size:var(--fs-sm);
  font-weight:750;
  line-height:1.25;
}
.mobileSettingsGrid select{width:100%;max-width:none}
.mobileSettingsGrid #printerField,
.mobileSettingsGrid #copiesField,
.mobileSettingsGrid #duplexField,
.mobileSettingsGrid #pagesizeField,
.mobileSettingsGrid #colorField{
  display:block;
  grid-column:auto;
  grid-row:auto;
  grid-area:auto;
  position:static;
}
.sheet .mobileSettingsGrid{
  display:grid;
  grid-template-columns:1fr;
  grid-template-areas:none;
  gap:18px;
  align-items:stretch;
}
.sheet .mobileSettingsGrid #printerField,
.sheet .mobileSettingsGrid #copiesField,
.sheet .mobileSettingsGrid #duplexField,
.sheet .mobileSettingsGrid #pagesizeField,
.sheet .mobileSettingsGrid #colorField{grid-area:auto}
.sheet .tonerInfo{margin-top:8px;font-size:var(--fs-xs);color:var(--muted)}
.sheet .copyStepper{width:100%;grid-template-columns:52px minmax(0,1fr) 52px}
@media(max-width:900px){
  .sheet .settingsDisclosureBody{padding:4px 8px 18px}
  .sheet .quickPresets{margin-bottom:18px}
  .sheet .mobileSettingsGrid{gap:17px}
}

/* V33 – mobile settings: no presets, two clear final actions */
.settingsActionsRow{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  gap:10px;
  margin-top:18px;
}
.settingsActionsRow .btn{
  width:100%;
  min-height:50px;
  white-space:normal;
  line-height:1.2;
}
.settingsActionHint{
  margin-top:9px;
  color:var(--muted);
  line-height:1.4;
}
@media(max-width:600px){
  .settingsActionsRow{grid-template-columns:1fr;gap:8px}
  .settingsActionsRow .btn{min-height:48px}
}

/* V34 – Version-3 onboarding for existing accounts without an e-mail address. */
.accountEmailOverlay{
  padding:14px;
  background:rgba(28,28,30,.40);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.accountEmailDialogV3{
  width:min(420px,calc(100vw - 24px));
  padding:28px 28px 20px;
  border-radius:28px;
  text-align:left;
  background:#f8f8fb;
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 26px 80px rgba(20,28,45,.22);
}
[data-theme="dark"] .accountEmailDialogV3{background:#1c1c1e;border-color:rgba(255,255,255,.12)}
.accountEmailDialogV3 .v3Badge{
  width:46px;height:46px;border-radius:15px;display:grid;place-items:center;
  background:#0a84ff;color:#fff;font-size:var(--fs-base);font-weight:800;
  box-shadow:0 8px 22px rgba(10,132,255,.24);margin-bottom:18px;
}
.accountEmailEyebrow{
  color:#007aff;font-size:var(--fs-xs);font-weight:850;letter-spacing:.11em;
  margin:0 0 8px;text-transform:uppercase;
}
.accountEmailDialogV3 h2{
  margin:0 0 8px;font-size:var(--fs-3xl);line-height:1.18;
  letter-spacing:-.025em;color:#4b5568;
}
[data-theme="dark"] .accountEmailDialogV3 h2{color:#f5f5f7}
.accountEmailLead{
  margin:0 0 18px;color:#9aa8bd;font-size:var(--fs-base);line-height:1.45;
}
.accountEmailInfoBox{
  padding:17px 16px;margin:0 0 19px;border-radius:var(--radius-lg);
  background:#eeeeF3;color:#536078;
}
[data-theme="dark"] .accountEmailInfoBox{background:#2c2c2e;color:#d1d1d6}
.accountEmailInfoBox strong{display:block;font-size:var(--fs-md);margin-bottom:6px}
.accountEmailInfoBox p{margin:0;color:#9aa8bd;font-size:var(--fs-sm);line-height:1.45}
.accountEmailForm{gap:9px}
.accountEmailForm label{font-size:var(--fs-sm);color:#68778f;margin-bottom:2px;font-weight:750}
.accountEmailForm input{
  width:100%;min-height:48px;border-radius:var(--radius-md);
  background:#f4f4f8;padding:0 14px;font-size:var(--fs-base);
}
[data-theme="dark"] .accountEmailForm input{background:#2c2c2e}
.accountEmailSave{
  width:100%;min-height:46px;border-radius:var(--radius-md);
  margin-top:2px;font-size:var(--fs-md);font-weight:750;
}
.accountEmailLater{
  border:0;background:transparent;color:#a2adbd;min-height:35px;width:100%;
  font:inherit;font-size:var(--fs-sm);cursor:pointer;padding:4px 8px;
}
.accountEmailLater:active{color:#6e7785}
.accountEmailPrivacy{
  margin:5px 4px 0;text-align:center;color:#a8b4c7;
  font-size:var(--fs-xs);line-height:1.4;
}
@media(max-width:520px){
  .accountEmailDialogV3{padding:24px 22px 18px;border-radius:26px}
  .accountEmailDialogV3 .v3Badge{width:44px;height:44px;margin-bottom:16px}
  .accountEmailDialogV3 h2{font-size:var(--fs-2xl)}
  .accountEmailLead{font-size:var(--fs-base)}
}

/* V35 – Mail settings: compact test-mail panel instead of a 50/50 giant card. */
.mailSettingsLayout{
  grid-template-columns:minmax(0,1fr) minmax(250px,320px);
  align-items:start;
  gap:16px;
}
.mailSettingsMain{min-width:0}
.testMailCompact{
  padding:18px;
  align-self:start;
  min-width:0;
}
.testMailCompact h2{
  margin:0 0 6px;
  font-size:var(--fs-xl);
  line-height:1.2;
}
.testMailCompact > p{
  margin:0 0 14px;
  font-size:var(--fs-sm);
  line-height:1.45;
}
.testMailCompact .stackForm{
  gap:8px;
}
.testMailCompact .stackForm label{
  font-size:var(--fs-xs);
}
.testMailCompact input{
  min-height:42px;
  padding:9px 11px;
  font-size:var(--fs-sm);
}
.testMailCompact .btn{
  min-height:42px;
  font-size:var(--fs-sm);
  padding:0 12px;
}
@media(max-width:900px){
  .mailSettingsLayout{grid-template-columns:1fr}
  .testMailCompact{width:100%;max-width:none}
}

/* V36 – mobile Schrittstatus: Status-Chips in den drei Schritten sichtbar halten. */
@media(max-width:900px){
  .uxStepHead{
    grid-template-columns:30px minmax(0,1fr) auto;
  }
  .uxStepState{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    justify-self:end;
    white-space:nowrap;
    font-size:var(--fs-xs);
    padding:5px 7px;
  }
}

/* V37 – Archiv: kompakt, lesbar, keine Batch-Interna in der UI */
.archive-filters{display:grid;grid-template-columns:minmax(220px,1fr) 180px 180px auto;gap:10px;margin:12px 0 16px;align-items:center}
.archive-filters input,.archive-filters select{width:100%;min-width:0}
.archiveResetBtn{white-space:nowrap}
.bulk-actions{align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px;padding:10px 12px;border-radius:var(--radius-md);background:rgba(0,122,255,.07)}
.archiveTableClean{table-layout:fixed;width:100%}
.archiveTableClean .colSelect{width:42px}.archiveTableClean .colFile{width:auto}.archiveTableClean .colDate{width:190px}.archiveTableClean .colActions{width:220px}
.archiveTableClean th,.archiveTableClean td{vertical-align:middle;padding:12px 10px}
.archiveFileCell{display:flex;flex-direction:column;gap:4px;min-width:0}
.archiveFileCell .filename{font-weight:700;overflow-wrap:anywhere}
.archiveUser,.acUser{font-size:var(--fs-xs);color:var(--muted)}
.archiveDate,.acDate{font-size:var(--fs-sm);color:var(--muted);white-space:nowrap}
.archiveActionsClean{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.archiveActionsClean .btn{min-height:40px;padding:0 13px;border-radius:12px;white-space:nowrap}
.archivePdfBtn{font-weight:700}
.archiveNoResults{text-align:center;padding:32px;color:var(--muted)}
.archiveNoResults .btn{margin-top:12px}
.pagination{margin-top:20px;display:flex;justify-content:center;align-items:center;gap:12px}
.archiveMobileTop{display:flex;align-items:center;justify-content:space-between;gap:12px}
@media (max-width:900px){
  .archive-filters{grid-template-columns:1fr 1fr}.archive-filters input{grid-column:1/-1}.archiveResetBtn{width:100%}
  .archiveCardItem{padding:14px}
  .archiveMobileTop{margin-bottom:10px}
  .acBody{margin-top:0}.acFilename{font-size:var(--fs-base);font-weight:750;color:var(--text)}
  .archiveActionsClean{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .archiveActionsClean .btn{width:100%;justify-content:center}
}
@media (max-width:520px){.archive-filters{grid-template-columns:1fr}.archive-filters input{grid-column:auto}.archive-filters select,.archiveResetBtn{width:100%}}


/* V38: Jobstatus verständlich darstellen; Fehler bleiben sichtbar, done nur 12h. */
.jobCardMain{display:flex;flex-direction:column;gap:5px;min-width:0}
.jobChipFailed{background:rgba(255,59,48,.12);color:#d70015}
.jobChipDone{background:rgba(52,199,89,.12);color:#248a3d}
.jobErrorBox{margin-top:7px;padding:10px 12px;border-radius:12px;background:rgba(255,59,48,.08);border:1px solid rgba(255,59,48,.16);color:#b42318;display:flex;flex-direction:column;gap:3px;max-width:720px}
.jobErrorBox b{font-size:var(--fs-xs)}
.jobErrorBox span{font-size:var(--fs-sm);line-height:1.4;overflow-wrap:anywhere}
.jobRetentionHint{color:var(--muted);font-size:var(--fs-xs)}
[data-theme="dark"] .jobChipFailed{color:#ff6961;background:rgba(255,69,58,.15)}
[data-theme="dark"] .jobChipDone{color:#55d879;background:rgba(48,209,88,.14)}
[data-theme="dark"] .jobErrorBox{background:rgba(255,69,58,.12);border-color:rgba(255,69,58,.20);color:#ff8a84}

/* V39: Schritt 2 ist eine bewusste Entscheidung; Schritt 3 erscheint erst danach. */
#printStep3[hidden]{display:none!important}
.step2ChoiceCard{align-items:flex-end;gap:16px}
.step2Actions{display:flex;gap:10px;flex:0 0 auto;align-items:center}
.step2Actions .btn{white-space:nowrap}
@media(max-width:900px){
  .step2ChoiceCard{display:block}
  .step2Actions{display:grid;grid-template-columns:1fr;margin-top:14px;gap:9px}
  .step2Actions .btn{width:100%;min-height:50px}
}

/* V40: compact admin user cards and explicit settings -> step 3 flow. */
.manageUserCard{
  padding:11px;
  gap:9px;
  border-radius:var(--radius-md);
}
.userCardTop{align-items:flex-start}
.userCardTop b{font-size:var(--fs-base);line-height:1.2}
.userCardTop small{font-size:var(--fs-xs);margin-top:2px}
.statusPill{padding:4px 7px;font-size:var(--fs-xs)}
.manageUserCard .stackForm.compact{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:5px 7px;
  align-items:center;
  margin:0;
}
.manageUserCard .stackForm.compact label{
  grid-column:1/-1;
  margin:0;
  font-size:var(--fs-xs);
  line-height:1.1;
}
.manageUserCard .stackForm.compact input,
.manageUserCard .stackForm.compact select{
  min-height:38px;
  height:38px;
  padding:7px 10px;
  font-size:var(--fs-sm);
  border-radius:var(--radius-sm);
}
.manageUserCard .stackForm.compact .btn{
  min-height:38px;
  height:38px;
  padding:0 10px;
  border-radius:var(--radius-sm);
  font-size:var(--fs-xs);
  white-space:nowrap;
}
.userActions{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:1px;
}
.userActions form{margin:0}
.userActions .btn{
  min-height:34px;
  height:34px;
  padding:0 9px;
  border-radius:var(--radius-sm);
  font-size:var(--fs-xs);
  white-space:nowrap;
}

@media(min-width:1180px){
  .userGrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
  .manageUserCard{padding:10px;gap:8px}
  .manageUserCard .stackForm.compact{grid-template-columns:minmax(0,1fr) auto}
  .manageUserCard .stackForm.compact input,
  .manageUserCard .stackForm.compact select{min-width:0;width:100%}
  .userActions .btn{font-size:var(--fs-xs);padding:0 8px}
}
@media(max-width:420px){
  .manageUserCard .stackForm.compact{grid-template-columns:1fr}
  .manageUserCard .stackForm.compact label,
  .manageUserCard .stackForm.compact input,
  .manageUserCard .stackForm.compact select,
  .manageUserCard .stackForm.compact .btn{grid-column:1}
  .manageUserCard .stackForm.compact .btn{width:100%}
}

/* V41: saved drafts / prepare now, print later */
.draftNavLink,.draftTabLink{position:relative}
.draftCountBadge{
  position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  display:grid;place-items:center;background:#ff3b30;color:#fff;font-size:var(--fs-xs);font-weight:800;
  border:2px solid #f2f2f7;box-shadow:0 2px 7px rgba(255,59,48,.24);line-height:1
}
.mobileDraftBadge{top:2px;right:18%}
.draftModeBanner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 14px;padding:14px 16px;
  border:1px solid rgba(0,122,255,.16);border-radius:var(--radius-lg);background:rgba(0,122,255,.07)
}
.draftModeBanner div{display:flex;flex-direction:column;gap:3px}.draftModeBanner b{color:#006bd6}.draftModeBanner span{color:var(--muted);font-size:var(--fs-sm)}
.draftsPage{max-width:980px;margin:0 auto;padding-bottom:30px}.draftsHero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:20px;padding:6px 2px}
.draftsHero h1{font-size:var(--fs-hero);letter-spacing:-.035em;margin:5px 0}.draftsHero p{margin:0;color:var(--muted);max-width:680px;line-height:1.45}.draftNewBtn{flex:0 0 auto}
.emptyDraftsCard{background:#fff;border:1px solid rgba(60,60,67,.16);border-radius:var(--radius-xl);padding:40px 24px;text-align:center}.emptyDraftIcon{width:48px;height:48px;border-radius:15px;background:#e8f2ff;color:#007aff;display:grid;place-items:center;margin:0 auto 14px;font-size:var(--icon-lg)}.emptyDraftsCard h2{margin:0 0 8px}.emptyDraftsCard p{max-width:560px;margin:0 auto 18px;color:var(--muted)}
.savedDraftGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.savedDraftCard{background:#fff;border:1px solid rgba(60,60,67,.16);border-radius:20px;padding:18px;min-width:0}.savedDraftTop{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:11px;align-items:center}.savedDraftIcon{width:42px;height:42px;border-radius:var(--radius-md);background:#e8f2ff;color:#007aff;display:grid;place-items:center;font-size:var(--fs-xl)}.savedDraftTitle{min-width:0}.savedDraftTitle h2{font-size:var(--fs-lg);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.savedDraftTitle span{font-size:var(--fs-xs);color:var(--muted)}.savedChip{font-size:var(--fs-xs);font-weight:750;color:#248a3d;background:#e8f7ed;border-radius:999px;padding:6px 9px}.savedDraftFiles{margin:12px 0 0;padding:10px 12px;border-radius:12px;background:#f7f7f9;display:flex;flex-direction:column;gap:4px;font-size:var(--fs-xs);color:var(--muted)}
.savedDraftSettings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:14px 0}.savedDraftSettings span{display:flex;flex-direction:column;gap:2px;padding:9px 10px;border-radius:12px;background:#f7f7f9;font-size:var(--fs-sm);min-width:0;overflow:hidden;text-overflow:ellipsis}.savedDraftSettings b{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.savedDraftActions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.savedDraftActions form:first-child{flex:1}.savedDraftActions form:first-child .btn{width:100%}
[data-theme="dark"] .emptyDraftsCard,[data-theme="dark"] .savedDraftCard{background:#1c1c1e;border-color:rgba(84,84,88,.55)}[data-theme="dark"] .savedDraftFiles,[data-theme="dark"] .savedDraftSettings span{background:#2c2c2e}[data-theme="dark"] .draftCountBadge{border-color:#000}
@media(max-width:760px){.draftsHero{align-items:stretch;flex-direction:column;gap:14px}.draftsHero h1{font-size:var(--fs-display)}.draftNewBtn{width:100%}.savedDraftGrid{grid-template-columns:1fr}.savedDraftCard{padding:15px}.savedDraftSettings{grid-template-columns:repeat(2,minmax(0,1fr))}.savedDraftActions{display:grid;grid-template-columns:1fr 1fr}.savedDraftActions form:first-child{grid-column:1/-1}.savedDraftActions .btn{width:100%}.draftModeBanner{align-items:stretch;flex-direction:column}.mobileDraftBadge{top:1px;right:20%}}

/* V42: pending approval badge belongs to Admin; registration confirmation polish. */
.adminNavLink,.mobileAdminNav{position:relative}
.adminNavLink .notifBadge{top:-7px;right:-7px;z-index:3}
.mobileTabBar .mobileAdminNav{position:relative}
.mobileAdminBadge{position:absolute;top:2px;right:18%;min-width:17px;height:17px;padding:0 5px;border:2px solid var(--surface);box-shadow:none}
.registrationSuccessDialog{text-align:center;max-width:420px}
.registrationSuccessIcon{width:58px;height:58px;border-radius:50%;margin:0 auto 15px;display:grid;place-items:center;background:#0a84ff;color:#fff;font-size:var(--icon-2xl);font-weight:800;box-shadow:0 9px 24px rgba(10,132,255,.24)}
.registrationSuccessDialog h2{margin:0 0 9px;font-size:var(--fs-2xl)}
.registrationSuccessDialog p{margin:0 auto 9px;max-width:340px;line-height:1.45;color:var(--text)}
.registrationSuccessInfo{color:var(--muted);font-size:var(--fs-md)}
.registrationSuccessDialog .btnPrimary{margin-top:15px}
@media(max-width:900px){.mobileAdminBadge{right:20%;top:1px}.registrationSuccessDialog{width:min(420px,calc(100vw - 28px))}}

/* V47 – image print preflight */
.dpiInfo{margin-top:10px;padding:10px 12px;border-radius:12px;background:rgba(118,118,128,.08);font-size:var(--fs-sm);display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.dpiInfo span{color:var(--muted)}
.dpiWarning{background:rgba(255,149,0,.12);border:1px solid rgba(255,149,0,.20)}
.dpiWarning strong{color:#b56500}
.dpiGood{background:rgba(52,199,89,.10);border:1px solid rgba(52,199,89,.18)}
.dpiGood strong{color:#248a3d}
.lowDpiBadge{width:46px;height:46px;border-radius:var(--radius-md);display:grid;place-items:center;margin:0 auto 10px;background:rgba(255,149,0,.14);color:#b56500;font-size:var(--icon-xl);font-weight:900}
.confirmActions{display:flex;gap:9px;margin-top:18px}.confirmActions .btn{flex:1}


/* V49: three-stage print-resolution feedback. */
.dpiInfo.dpiCaution{background:#fff8df;border-color:#f1cf61;color:#725400}
.dpiInfo.dpiCaution strong{color:#8a6400}
[data-theme="dark"] .dpiInfo.dpiCaution{background:rgba(255,204,0,.12);border-color:rgba(255,204,0,.32);color:#ffd85a}
.dpiMediumOverlay .lowDpiBadge{background:#ffcc00;color:#3a2b00;box-shadow:none}
.dpiMediumOverlay .btnPrimary{background:#ffcc00;color:#2b2100;box-shadow:none}

/* V50: Bildlayout-Felder sauber und einheitlich ausrichten. */
.imageLayoutControls{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  align-items:end;
}
.imageLayoutControls .field{
  min-width:0;
  margin:0;
}
.imageLayoutControls .field > label{
  display:block;
  min-height:20px;
  margin:0 0 7px;
  line-height:20px;
}
.imageLayoutControls select{
  width:100%;
  height:48px;
  min-height:48px;
  margin:0;
}
@media(max-width:720px){
  .imageLayoutControls{grid-template-columns:1fr;gap:11px}
}

/* V52: step 2 can go back to files or discard the current print job. */
.step1CurrentFiles{margin-top:12px;border:1px solid var(--v9-separator,rgba(60,60,67,.18));border-radius:15px;overflow:hidden;background:rgba(118,118,128,.045)}
.step1CurrentFilesHead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px;border-bottom:1px solid var(--v9-separator,rgba(60,60,67,.14));font-size:var(--fs-xs);font-weight:750;color:var(--v9-secondary,#6e6e73)}
.step1CurrentFilesHead small{font-weight:600;color:var(--v9-tertiary,#8e8e93)}
.step1FileRow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px 9px 12px}
.step1FileRow+.step1FileRow{border-top:1px solid var(--v9-separator,rgba(60,60,67,.12))}
.step1FileName{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-sm);font-weight:650;color:var(--v9-text,#1c1c1e)}
.step1RemoveFile{min-height:32px;padding:0 10px;font-size:var(--fs-xs);color:#ff3b30;background:rgba(255,59,48,.08)}
.step2ChoiceCard{position:relative}
.step2Actions{flex-wrap:wrap}
.step2DiscardForm{margin:8px 2px 0;text-align:right}
.step2DiscardLink{appearance:none;border:0;background:transparent;color:#ff3b30;font:inherit;font-size:var(--fs-xs);font-weight:650;padding:7px 4px;cursor:pointer}
.step2DiscardLink:hover{text-decoration:underline}
@media(max-width:900px){
  .step2Actions{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:7px}
  .step2Actions .btn{width:100%;min-width:0;padding-left:8px;padding-right:8px;font-size:var(--fs-sm)}
  .step2Actions #btnUseStandard{grid-column:1/-1}
  .step2DiscardForm{text-align:center;margin-top:6px}
  .step1CurrentFiles{margin-top:10px}
  .step1FileName{font-size:var(--fs-sm)}
}
@media(max-width:420px){
  .step2Actions{grid-template-columns:1fr}
  .step2Actions #btnUseStandard{grid-column:auto}
}

/* V54: interactive image positioning – WYSIWYG pan + pinch zoom. */
.paperArea{position:relative;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.paperArea:active{cursor:grabbing}
.imgPreview{
  position:absolute;
  max-width:none;
  max-height:none;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
  transition:width .08s linear,height .08s linear,left .08s linear,top .08s linear;
}
.imagePositionTools{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid rgba(60,60,67,.12)}
.imagePositionHint{max-width:620px;color:var(--v9-secondary,#6e6e73)}
#resetImagePosition{flex:0 0 auto}
@media(max-width:720px){
  .imagePositionTools{align-items:stretch;flex-direction:column;gap:8px}
  #resetImagePosition{width:100%}
}

/* V55: optional professional print controls stay behind a secondary disclosure. */
.advancedPrintOptions{margin-top:10px;border:1px solid rgba(60,60,67,.12);border-radius:var(--radius-lg);background:rgba(255,255,255,.45);overflow:hidden}
.advancedPrintOptions>summary{cursor:pointer;list-style:none;padding:13px 15px;font-weight:700;color:var(--text)}
.advancedPrintOptions>summary::-webkit-details-marker{display:none}
.advancedPrintOptions>summary::before{content:'›';display:inline-block;margin-right:8px;transition:transform .15s ease}
.advancedPrintOptions[open]>summary::before{transform:rotate(90deg)}
.advancedSettingsGrid{padding:0 15px 15px}
@media(max-width:900px){.advancedPrintOptions{border-radius:var(--radius-md)}.advancedSettingsGrid{grid-template-columns:1fr}}

/* V63: reopenable source step, stronger printer status, native app dialogs. */
.sourceStepToggleHead{cursor:pointer;user-select:none;-webkit-user-select:none}
.sourceStepToggleHead:focus-visible{outline:3px solid rgba(0,122,255,.28);outline-offset:-3px}
.uxStepNumberToggle{transition:transform .18s ease,background .18s ease,color .18s ease}
.sourceStepHeadTail{display:flex;align-items:center;gap:9px;justify-self:end}
.sourceStepChevron{display:grid;place-items:center;width:30px;height:30px;border-radius:var(--radius-sm);background:rgba(118,118,128,.09);color:var(--muted);font-size:var(--fs-lg);font-weight:850;transition:transform .18s ease,background .18s ease}
.sourceStepExpanded .sourceStepChevron{background:rgba(0,122,255,.10);color:var(--blue)}
.sourceStepExpanded .compactSource{display:block}
.sourceStepExpanded .uxStepNumberToggle{background:rgba(0,122,255,.12);color:var(--blue)}
.sourceUploadActions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px;align-items:center;padding:4px 0 2px;border-radius:var(--radius-lg);transition:background .15s ease}
.sourceUploadActions.dragover{background:rgba(0,122,255,.07);outline:2px dashed rgba(0,122,255,.35);outline-offset:5px}
.sourceActionBtn{width:100%;min-height:46px}
.sourceHiddenFileInput{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.sourceUploadProgress{grid-column:1/-1;margin-top:4px}
.step1CurrentFiles{transition:box-shadow .2s ease,border-color .2s ease}
.step1FilesAttention{border-color:rgba(0,122,255,.38);box-shadow:0 0 0 4px rgba(0,122,255,.09)}

.printerReadyStatus{display:flex;align-items:center;min-height:34px;margin-top:8px;padding:7px 10px;border-radius:11px;font-size:var(--fs-xs);font-weight:750;line-height:1.25}
.printerReadyStatusOnline{background:rgba(52,199,89,.11);color:#248a3d}
.printerReadyStatusOffline{background:rgba(255,59,48,.10);color:#d70015}
.printerReadyStatusUnknown{background:rgba(118,118,128,.08);color:var(--muted)}
.tonerInfo{margin-top:7px;padding:0 2px;font-size:var(--fs-xs);opacity:.82}
.tonerInfo[hidden]{display:none!important}
.tonerLineLow{font-weight:800;color:#d96b00}
.tonerWarn{opacity:1;font-weight:700;color:#b85f00}

.appDialogOverlay{position:fixed;inset:0;z-index:500;display:grid;place-items:center;padding:20px;background:rgba(18,18,20,.42);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transition:opacity .12s ease}
.appDialogOverlay.open{opacity:1}
.appDialogOverlay.closing{opacity:0}
.appDialog{width:min(430px,calc(100vw - 28px));padding:24px;border:1px solid rgba(255,255,255,.72);border-radius:25px;background:var(--surface);box-shadow:0 28px 80px rgba(0,0,0,.26);transform:translateY(8px) scale(.985);transition:transform .15s ease}
.appDialogOverlay.open .appDialog{transform:translateY(0) scale(1)}
.appDialogHandle{display:none}
.appDialogIcon{width:42px;height:42px;border-radius:var(--radius-md);display:grid;place-items:center;margin-bottom:15px;background:rgba(0,122,255,.11);color:var(--blue);font-weight:850;font-size:var(--icon-md)}
.appDialogIcon.danger{background:rgba(255,59,48,.11);color:var(--red)}
.appDialog h2{margin:0 0 7px;font-size:var(--fs-2xl);letter-spacing:-.02em}
.appDialog p{margin:0 0 20px;color:var(--muted);line-height:1.48;white-space:pre-line}
.appDialogActions{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.appDialogActions .btn{min-height:48px;width:100%}
.appDialogActions .appDialogConfirm:only-child{grid-column:1/-1}

@media(max-width:900px){
  .sourceStepHeadTail .uxStepState{display:none}
  .sourceStepHeadTail{gap:0}
  .sourceStepChevron{width:28px;height:28px}
  .sourceUploadActions{grid-template-columns:1fr 1fr}
  .sourceActionBtn{font-size:var(--fs-sm);padding-left:8px;padding-right:8px}
  .mainPrintButton{display:inline-flex;margin-top:8px}
  .container{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  .appDialogOverlay{place-items:end center;padding:0}
  .appDialog{width:100%;max-width:none;border-radius:28px 28px 0 0;padding:11px 18px calc(18px + env(safe-area-inset-bottom));border-bottom:0;transform:translateY(100%)}
  .appDialogOverlay.open .appDialog{transform:translateY(0)}
  .appDialogHandle{display:block;width:42px;height:5px;border-radius:999px;background:#d1d1d6;margin:0 auto 18px}
  .appDialogIcon{margin-bottom:12px}
}
@media(max-width:420px){
  .sourceUploadActions{grid-template-columns:1fr}
  .appDialogActions{grid-template-columns:1fr}
}
.step2SelectionSummary{min-width:0;flex:1}
.printerReadySummary{display:inline-flex;align-items:center;margin-top:9px;padding:5px 9px;border-radius:999px;font-size:var(--fs-xs);font-weight:800;line-height:1.2}
.printerReadySummary.printerReadyStatusOnline{background:rgba(52,199,89,.11);color:#248a3d}
.printerReadySummary.printerReadyStatusOffline{background:rgba(255,59,48,.10);color:#d70015}
.printerReadySummary.printerReadyStatusUnknown{background:rgba(118,118,128,.08);color:var(--muted)}
.tonerWarningSummary{margin-top:7px;padding:7px 9px;border-radius:var(--radius-sm);background:rgba(255,149,0,.12);color:#a65a00;font-size:var(--fs-xs);font-weight:800;line-height:1.3}
.tonerWarningSummary[hidden]{display:none!important}


/* V64: Admin as status dashboard; destructive maintenance separated. */
.adminDashboardHero{margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.adminDashboardHero h1{margin:.22rem 0 .35rem;font-size:var(--fs-display);letter-spacing:-.025em}
.adminStatusGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.adminStatusCard{min-height:210px;display:flex;flex-direction:column;gap:14px}
.adminStatusHead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.adminStatusHead>div{display:flex;align-items:center;gap:9px}.adminStatusHead h2{margin:0;font-size:var(--fs-xl)}
.adminStatusIcon{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:rgba(0,122,255,.10);font-size:var(--fs-lg)}
.adminPrinterList{display:grid;gap:9px}.adminPrinterRow{display:grid;grid-template-columns:10px minmax(0,1fr);gap:10px;align-items:center;padding:10px 11px;border-radius:var(--radius-md);background:rgba(118,118,128,.055)}
.adminPrinterRow>div{display:flex;flex-direction:column;min-width:0}.adminPrinterRow small{color:var(--muted);margin-top:2px}
.adminStateDot{width:10px;height:10px;border-radius:50%;background:#ff3b30;box-shadow:0 0 0 4px rgba(255,59,48,.10)}.adminStateDot.ok{background:#34c759;box-shadow:0 0 0 4px rgba(52,199,89,.11)}
.adminBigStatus{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;padding:14px;border-radius:15px;background:rgba(0,122,255,.065)}.adminBigStatus b{font-size:var(--fs-display)}.adminBigStatus span{color:var(--muted);font-weight:700}.adminBigStatus i{font-style:normal;color:var(--muted)}
.adminMiniList,.adminProblemList{display:grid;gap:7px}.adminMiniList>div{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:7px 0;border-top:1px solid var(--line)}.adminMiniList>div>span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.adminMiniList small{color:var(--muted)}
.adminMetric{display:flex;align-items:baseline;gap:9px;padding:15px;border-radius:15px;background:rgba(118,118,128,.06)}.adminMetric b{font-size:var(--fs-hero)}.adminMetric span{font-weight:750;color:var(--muted)}.adminMetric.needsAttention{background:rgba(255,149,0,.10);color:#b86400}.adminMetric.problem{background:rgba(255,59,48,.09);color:#c8241d}.adminMetric.needsAttention span,.adminMetric.problem span{color:inherit}
.adminProblemList>div{display:flex;flex-direction:column;padding:8px 0;border-top:1px solid var(--line)}.adminProblemList small{color:var(--muted);margin-top:2px;line-height:1.35}
.adminAllGood{margin:0;padding:10px 12px;border-radius:12px;background:rgba(52,199,89,.08);color:#248a3d;font-weight:750}
.adminUserTopGrid{margin-bottom:14px}.adminCountBadge{min-width:32px;height:32px;padding:0 9px;border-radius:999px;display:grid;place-items:center;background:rgba(118,118,128,.09);font-weight:850}.adminCountBadge.attention{background:rgba(255,59,48,.11);color:#d70015}
.systemHero{margin-bottom:14px}.systemStats{display:flex;gap:9px;margin:14px 0}.systemStats span{flex:1;display:flex;flex-direction:column;gap:2px;padding:12px;border-radius:var(--radius-md);background:rgba(118,118,128,.06);color:var(--muted)}.systemStats b{font-size:var(--fs-2xl);color:var(--text)}.dangerEyebrow{color:var(--red)}
@media(max-width:900px){.adminStatusGrid{grid-template-columns:1fr}.adminDashboardHero h1{font-size:var(--fs-3xl)}.adminStatusCard{min-height:0}.adminMiniList>div{grid-template-columns:auto minmax(0,1fr)}.adminMiniList small{grid-column:2}.adminUserTopGrid{grid-template-columns:1fr}.systemStats{flex-direction:column}}


/* V65: keep the mobile admin section navigation deliberately slim.
   The V64 dashboard added more sections, but the tab strip must not grow vertically. */
@media (max-width:900px){
  .adminTabs{
    gap:4px;
    margin:0 0 10px;
    padding:0 0 2px;
    overflow-x:auto;
    overflow-y:hidden;
    flex-wrap:nowrap;
    align-items:center;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .adminTabs::-webkit-scrollbar{display:none}
  .adminTabs .btn{
    flex:0 0 auto;
    min-height:28px;
    height:28px;
    padding:0 9px;
    border-radius:9px;
    font-size:var(--fs-xs);
    line-height:1;
    white-space:nowrap;
    box-shadow:none;
  }
  .adminTabs .btn.navActive{
    box-shadow:0 3px 9px rgba(0,122,255,.16);
  }
}

/* V66 · printer maintenance actions directly in admin system status */
.adminPrinterRowWithActions{align-items:start}
.adminPrinterBody{display:grid;gap:9px;min-width:0}
.adminPrinterSummary{display:flex;flex-direction:column;min-width:0}
.adminPrinterActions{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.adminPrinterActions form{margin:0}
.adminPrinterActions .btn{min-height:32px;padding:6px 10px;font-size:var(--fs-xs);white-space:nowrap}
@media(max-width:620px){
  .adminPrinterRowWithActions{padding:10px}
  .adminPrinterActions{display:grid;grid-template-columns:1fr 1fr;gap:7px}
  .adminPrinterActions .btn{width:100%;min-height:34px;padding:6px 8px;font-size:var(--fs-xs)}
}

/* V67: compact mobile app header.
   Legacy mobile CSS still forced .header into a vertical column below 768 px,
   making the brand and menu occupy two rows. Keep it as one compact row. */
@media (max-width:900px){
  .header{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    min-height:50px;
    padding:6px 8px;
    border-radius:18px;
    margin-bottom:12px;
  }
  .header .brand{
    flex:0 1 auto;
    min-width:0;
    gap:8px;
    align-items:center;
  }
  .header .logo{
    width:34px;
    height:34px;
    min-width:34px;
    border-radius:11px;
  }
  .header .logo svg{
    width:18px;
    height:18px;
  }
  .header .brandTitle{
    font-size:var(--fs-base);
    line-height:1.1;
    white-space:nowrap;
  }
  .header .mobileNavMenu{
    margin-left:auto;
    flex:0 0 auto;
  }
  .header .mobileMenuButton{
    width:36px;
    height:36px;
    min-width:36px;
    border-radius:12px;
    font-size:var(--fs-base);
    line-height:1;
  }
  .header .mobileMenuPopover{top:42px}
}


/* V68: the extra floating mobile print dock was redundant with Step 3 and is retired. */
#dashBottomBar{display:none}
@media(max-width:900px){
  .mainPrintButton{display:inline-flex}
  body.stickyPrintActive .container{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
}


/* ======================================================================
   V74 · DARK MODE ONLY
   Match the darker reference screenshots without touching the light theme.
   ====================================================================== */
body[data-theme="dark"]{
  --app-bg:#000000;
  --surface:#1c1c1e;
  --surface-2:#232326;
  --glass:rgba(28,28,30,.96);
  --glass-border:rgba(255,255,255,.10);
  --line:rgba(255,255,255,.11);
  --panel:rgba(28,28,30,.96);
  --panel2:rgba(118,118,128,.14);
  --glass-bg:var(--glass);
}

/* Header: dark glass, only a quiet grey separator — no bright white frame. */
body[data-theme="dark"] .header{
  background:rgba(28,28,30,.96);
  border-color:rgba(255,255,255,.10);
  box-shadow:0 10px 28px rgba(0,0,0,.34);
}
body[data-theme="dark"] .header .logo{
  background:#2c2c2e;
  border-color:rgba(255,255,255,.11);
  box-shadow:none;
}
body[data-theme="dark"] .desktopNav .btn:not(.btnPrimary):not(.btnDanger):not(.navActive),
body[data-theme="dark"] .desktopNav .chip{
  background:#242426;
  border-color:rgba(255,255,255,.06);
  box-shadow:none;
}

/* Main cards/steps: same calm charcoal surface as the reference. */
body[data-theme="dark"] .card,
body[data-theme="dark"] .uxStep,
body[data-theme="dark"] .emptyDraftsCard,
body[data-theme="dark"] .savedDraftCard{
  background:#1c1c1e;
  border-color:rgba(255,255,255,.10);
  box-shadow:0 7px 24px rgba(0,0,0,.22);
}
body[data-theme="dark"] .card:hover,
body[data-theme="dark"] .uxStep:hover{
  box-shadow:0 7px 24px rgba(0,0,0,.22);
}

/* Upload area: dark inner field instead of the light/white block from the light theme. */
body[data-theme="dark"] .dropzone{
  background:#202124;
  border-color:rgba(174,185,201,.68);
  box-shadow:none;
}
body[data-theme="dark"] .dropzone:hover{
  border-color:rgba(10,132,255,.72);
  box-shadow:0 0 0 3px rgba(10,132,255,.14);
}
body[data-theme="dark"] .dropTitle{color:#f5f5f7}
body[data-theme="dark"] .secondaryToolsLabel{color:#9da3ae}
body[data-theme="dark"] .alternativeIcon{
  background:rgba(10,132,255,.14);
  color:#0a84ff;
}
body[data-theme="dark"] .exampleCode{
  background:#2c2c2e;
  color:#d1d1d6;
}

/* Forms: deep blue/charcoal controls like the reference archive screen. */
body[data-theme="dark"] input,
body[data-theme="dark"] select,
body[data-theme="dark"] textarea,
body[data-theme="dark"] .fixedPrinterDisplay{
  background:#141a24;
  color:#f5f5f7;
  border-color:rgba(255,255,255,.12);
  box-shadow:none;
}
body[data-theme="dark"] input::placeholder,
body[data-theme="dark"] textarea::placeholder{color:#8e95a2}

/* Archive: navy table surface/header from the wanted screenshots. */
body[data-theme="dark"] .archiveCard .table{
  background:#111827;
  border-color:rgba(255,255,255,.09);
  box-shadow:none;
}
body[data-theme="dark"] .archiveCard .table th{
  background:#17243a;
  color:#f5f5f7;
}
body[data-theme="dark"] .archiveCard .table td{
  background:#111827;
  border-color:rgba(255,255,255,.09);
}
body[data-theme="dark"] .archiveCard .table tr:hover td{background:#152036}
body[data-theme="dark"] .archive-filters input,
body[data-theme="dark"] .archive-filters select{
  background:#121a29;
  border-color:rgba(255,255,255,.12);
}
body[data-theme="dark"] .archiveCardItem{
  background:#181b22;
  border-color:rgba(255,255,255,.09);
  box-shadow:0 9px 26px rgba(0,0,0,.25);
}
body[data-theme="dark"] .acDate{color:rgba(245,245,247,.78)}
body[data-theme="dark"] .acBatch{color:rgba(245,245,247,.56)}
body[data-theme="dark"] .acUser{color:rgba(245,245,247,.62)}
body[data-theme="dark"] .archiveCardFilename,
body[data-theme="dark"] .acFilename{color:#f5f5f7}
body[data-theme="dark"] .archiveCardCheck,
body[data-theme="dark"] .acCheck{
  border-color:rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
}

/* Drafts / secondary panels. */
body[data-theme="dark"] .savedDraftFiles,
body[data-theme="dark"] .savedDraftSettings span,
body[data-theme="dark"] .quickPanel,
body[data-theme="dark"] .freeTextCard,
body[data-theme="dark"] .uploadProgress,
body[data-theme="dark"] .thumb,
body[data-theme="dark"] .fileList li,
body[data-theme="dark"] .readySettings,
body[data-theme="dark"] .summaryCard,
body[data-theme="dark"] .step1CurrentFiles{
  background:#242426;
  border-color:rgba(255,255,255,.09);
}
body[data-theme="dark"] .advancedPrintOptions{
  background:rgba(44,44,46,.72);
  border-color:rgba(255,255,255,.09);
}

/* Dialogs/sheets: also avoid the old hard-coded white border. */
body[data-theme="dark"] .appDialog,
body[data-theme="dark"] .confirmDialog,
body[data-theme="dark"] .sheet{
  background:#1c1c1e;
  border-color:rgba(255,255,255,.10);
}

/* Mobile fixed navigation keeps the same dark language. */
body[data-theme="dark"] .mobileTabBar{
  background:rgba(28,28,30,.96);
  border-color:rgba(255,255,255,.09);
  box-shadow:0 -8px 28px rgba(0,0,0,.32);
}


/* V75: tidy admin jobs actions desktop + mobile */
.jobCard{align-items:flex-start}
.jobCardActions{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:10px;flex:0 0 auto;min-width:150px}
.jobCardActions.singleAction{justify-content:flex-start}
.jobCardActions form{margin:0}
.jobCardActions .btn{min-height:40px;padding:0 16px;border-radius:14px;font-size:var(--fs-sm);font-weight:800;box-shadow:none}
.jobActionHint{max-width:180px;text-align:right;line-height:1.35}
.btnSm{min-height:40px;padding:0 16px;border-radius:14px;font-size:var(--fs-sm)}
@media(max-width:820px){
  .jobCard{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
  .jobCardActions{width:100%;min-width:0;flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:8px}
  .jobCardActions.singleAction{justify-content:flex-start}
  .jobCardActions .btn,.btnSm{min-height:38px;padding:0 14px;border-radius:13px;font-size:var(--fs-xs)}
  .jobActionHint{max-width:none;width:100%;text-align:left;order:3}
}
@media(max-width:520px){
  .jobCard{padding:12px}
  .jobCardMain b{font-size:var(--fs-lg);line-height:1.25;overflow-wrap:anywhere}
  .jobCardMain small{font-size:var(--fs-sm)}
  .jobCardActions{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
  .jobCardActions.singleAction{grid-template-columns:1fr}
  .jobCardActions form,.jobCardActions .btn{width:100%}
  .jobCardActions .btn,.btnSm{min-height:40px;justify-content:center}
  .jobActionHint{grid-column:1/-1}
}


/* V76: admin jobs actions aligned + backup dark mode fix */
.jobCard{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:16px}
.jobCardMain{min-width:0}
.jobCardActions{display:flex !important;flex-direction:column;align-items:flex-end;justify-content:flex-start;gap:8px;min-width:136px;align-self:start;margin-top:0}
.jobCardActions.singleAction{justify-content:flex-start}
.jobCardActions form{display:block;width:auto;margin:0}
.jobCardActions .btn,.jobCardActions .btnSm{display:inline-flex;align-items:center;justify-content:center;min-width:136px;min-height:38px;padding:0 14px;border-radius:13px;font-size:var(--fs-xs);line-height:1.15;white-space:nowrap}
.jobActionHint{display:none}
@media(max-width:820px){
  .jobCard{grid-template-columns:minmax(0,1fr) auto;gap:12px}
  .jobCardActions{width:auto !important;min-width:122px;align-items:flex-end;justify-content:flex-start;gap:8px;flex-wrap:nowrap}
  .jobCardActions .btn,.jobCardActions .btnSm{min-width:122px;min-height:36px;padding:0 12px;font-size:12px}
}
@media(max-width:520px){
  .jobCard{grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:14px}
  .jobCardMain b{font-size:var(--fs-base);line-height:1.28;overflow-wrap:anywhere}
  .jobCardMain small{font-size:var(--fs-sm)}
  .jobCardActions{display:flex !important;flex-direction:column !important;align-items:flex-end !important;justify-content:flex-start !important;min-width:114px;width:auto !important;gap:8px}
  .jobCardActions.singleAction{display:flex !important}
  .jobCardActions form{width:auto !important}
  .jobCardActions .btn,.jobCardActions .btnSm{width:114px !important;min-width:114px;max-width:114px;min-height:34px;padding:0 10px;border-radius:12px;font-size:11px;white-space:normal;text-align:center}
  .jobChip{min-width:0}
}

body[data-theme="dark"] .backupStats span{
  background:#1f2530;
  color:#f5f5f7;
  border:1px solid rgba(255,255,255,.08);
}
body[data-theme="dark"] .securityNote{
  background:rgba(255,159,10,.14);
  color:#f5f5f7;
  border:1px solid rgba(255,159,10,.18);
}
body[data-theme="dark"] .dangerZone{
  background:#171b22;
  border-color:rgba(255,69,58,.22);
}
body[data-theme="dark"] .backupHero,
body[data-theme="dark"] .adminGrid .card{
  box-shadow:0 12px 30px rgba(0,0,0,.30);
}
body[data-theme="dark"] .backupHero h2,
body[data-theme="dark"] .adminGrid h2,
body[data-theme="dark"] .adminGrid h3,
body[data-theme="dark"] .stackForm label,
body[data-theme="dark"] .checkRow{color:#f5f5f7}
body[data-theme="dark"] .backupList li{
  background:#1f2530;
  border:1px solid rgba(255,255,255,.08);
}


/* V77: dark-mode readability for draft preparation cards */
body[data-theme="dark"] .draftModeBanner{
  background:linear-gradient(180deg,rgba(0,122,255,.10),rgba(10,18,30,.78));
  border-color:rgba(0,122,255,.26);
  box-shadow:0 12px 28px rgba(0,0,0,.26);
}
body[data-theme="dark"] .draftModeBanner b{color:#3f97ff}
body[data-theme="dark"] .draftModeBanner span{color:#c7c7cc}

body[data-theme="dark"] .step1CurrentFiles,
body[data-theme="dark"] .step2SelectionSummary,
body[data-theme="dark"] .settingsSummary{
  background:#242426 !important;
  border-color:rgba(255,255,255,.10) !important;
  box-shadow:none;
}
body[data-theme="dark"] .step1CurrentFilesHead,
body[data-theme="dark"] .step1CurrentFilesHead small,
body[data-theme="dark"] .step1FileName,
body[data-theme="dark"] .step2SelectionSummary .eyebrow,
body[data-theme="dark"] .step2SelectionSummary strong,
body[data-theme="dark"] .settingsSummary{
  color:#f5f5f7 !important;
}
body[data-theme="dark"] .step1FileRow,
body[data-theme="dark"] .step1CurrentFilesHead{
  border-color:rgba(255,255,255,.08) !important;
}
body[data-theme="dark"] .step1RemoveFile{
  background:rgba(255,69,58,.14);
  color:#ff8a84;
}
body[data-theme="dark"] .sourceStepChevron{
  background:rgba(255,255,255,.08);
  color:#d1d1d6;
}
body[data-theme="dark"] .sourceStepExpanded .sourceStepChevron{
  background:rgba(0,122,255,.18);
  color:#5ca9ff;
}
body[data-theme="dark"] .sourceStepActions .btn:not(.btnPrimary),
body[data-theme="dark"] #btnSourceManageFiles{
  background:#2a2a2e;
  color:#f5f5f7;
  border-color:rgba(255,255,255,.08);
}
body[data-theme="dark"] .sourceStepActions .btn:not(.btnPrimary):hover,
body[data-theme="dark"] #btnSourceManageFiles:hover{
  background:#323238;
}
body[data-theme="dark"] .sourceEmptyText,
body[data-theme="dark"] .stepSub,
body[data-theme="dark"] .uxStepHeading p{color:#c7c7cc}


/* V78: free text spacing + keep alternative inputs visible when step 1 reopens */
#btnAddTextToBatch{margin-top:14px}
.freeTextTools{margin-bottom:10px}
.inlineTools{margin:10px 0 12px}
.alternativeBody .field textarea{min-height:120px}
.sourceStepExpanded .alternativeInput{display:block}


/* V79 hotfix: force dark surfaces and readable backup/step2 cards */
body[data-theme="dark"] .uxAutoSettings,
body[data-theme="dark"] .step2ChoiceCard,
body[data-theme="dark"] .step2SelectionSummary,
body[data-theme="dark"] .settingsPanel,
body[data-theme="dark"] .readySettings,
body[data-theme="dark"] .summaryCard,
body[data-theme="dark"] .step1CurrentFiles,
body[data-theme="dark"] .quickPanel,
body[data-theme="dark"] .fileList li,
body[data-theme="dark"] .uploadProgress,
body[data-theme="dark"] .thumb,
body[data-theme="dark"] .freeTextCard,
body[data-theme="dark"] .draftModeBanner,
body[data-theme="dark"] .savedDraftCard,
body[data-theme="dark"] .emptyDraftsCard,
body[data-theme="dark"] .savedDraftFiles,
body[data-theme="dark"] .savedDraftSettings span{
  background:#1f2024 !important;
  color:#f5f5f7 !important;
  border-color:rgba(255,255,255,.10) !important;
  box-shadow:none !important;
}
body[data-theme="dark"] .step2SelectionSummary strong,
body[data-theme="dark"] .step2SelectionSummary .eyebrow,
body[data-theme="dark"] .savedDraftTitle h2,
body[data-theme="dark"] .emptyDraftsCard h2,
body[data-theme="dark"] .emptyDraftsCard p,
body[data-theme="dark"] .savedDraftTitle span,
body[data-theme="dark"] .savedDraftFiles,
body[data-theme="dark"] .fileName,
body[data-theme="dark"] .fileMeta,
body[data-theme="dark"] .quickSettingsSummary,
body[data-theme="dark"] .step1FileName,
body[data-theme="dark"] .step1FilesTitle,
body[data-theme="dark"] .step1FilesCount,
body[data-theme="dark"] .step2DiscardLink{
  color:#f5f5f7 !important;
}
body[data-theme="dark"] .step2DiscardLink{ color:#ff6b61 !important; }
body[data-theme="dark"] .backupHero,
body[data-theme="dark"] .adminGrid .card,
body[data-theme="dark"] .dangerZone{
  background:#1b1d22 !important;
  color:#f5f5f7 !important;
  border-color:rgba(255,255,255,.10) !important;
}
body[data-theme="dark"] .backupStats{
  display:flex !important;
  gap:10px !important;
}
body[data-theme="dark"] .backupStats span{
  background:#23262d !important;
  color:#f5f5f7 !important;
  border:1px solid rgba(255,255,255,.09) !important;
  min-width:68px;
}
body[data-theme="dark"] .backupStats span b{color:#ffffff !important}
body[data-theme="dark"] .securityNote{
  background:rgba(255,159,10,.14) !important;
  color:#f5f5f7 !important;
  border:1px solid rgba(255,159,10,.24) !important;
}
body[data-theme="dark"] .backupList li{
  background:#23262d !important;
  color:#f5f5f7 !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:12px;
  padding:10px 12px;
  margin-top:8px;
}
body[data-theme="dark"] .backupList li small{color:rgba(245,245,247,.72) !important}
body[data-theme="dark"] .btn:not(.btnPrimary):not(.btnDanger){
  background:#2a2d33;
  color:#f5f5f7;
  border-color:rgba(255,255,255,.10);
}
body[data-theme="dark"] .btn[disabled],
body[data-theme="dark"] .btn:disabled{
  background:#34363c !important;
  color:rgba(245,245,247,.40) !important;
  border-color:rgba(255,255,255,.06) !important;
  opacity:1 !important;
}


/* V80 targeted final override */
body[data-theme="dark"] .uxAutoSettings.step2ChoiceCard{
  background:#1b1d22 !important;
  border:1px solid rgba(255,255,255,.08) !important;
}
body[data-theme="dark"] .uxAutoSettings.step2ChoiceCard .step2SelectionSummary{
  background:#23262d !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:18px !important;
  padding:14px 16px !important;
  min-height:118px;
}
body[data-theme="dark"] .uxAutoSettings.step2ChoiceCard .step2Actions,
body[data-theme="dark"] .uxAutoSettings.step2ChoiceCard .step2DiscardForm{
  position:relative;
  z-index:2;
}
body[data-theme="dark"] .uxAutoSettings.step2ChoiceCard .step2SelectionSummary .eyebrow,
body[data-theme="dark"] .uxAutoSettings.step2ChoiceCard .step2SelectionSummary strong{
  color:#f5f5f7 !important;
}
body[data-theme="dark"] .uxAutoSettings.step2ChoiceCard #printerReadySummary.printerReadyStatusUnknown{
  background:rgba(118,118,128,.14) !important;
  color:#d1d1d6 !important;
}
body[data-theme="dark"] .backupHero{
  background:#1b1d22 !important;
  border:1px solid rgba(255,255,255,.08) !important;
}
body[data-theme="dark"] .backupHero .muted,
body[data-theme="dark"] .adminGrid .card p,
body[data-theme="dark"] .adminGrid .card label,
body[data-theme="dark"] .adminGrid .card small,
body[data-theme="dark"] .backupHero p{
  color:#c7c7cc !important;
}
body[data-theme="dark"] .backupHero .backupStats span{
  background:#23262d !important;
  color:#f5f5f7 !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:none !important;
}
body[data-theme="dark"] .backupHero .backupStats span b{
  color:#ffffff !important;
}
body[data-theme="dark"] .adminGrid .card,
body[data-theme="dark"] .adminGrid .dangerZone{
  background:#1b1d22 !important;
  border:1px solid rgba(255,255,255,.08) !important;
  color:#f5f5f7 !important;
}
body[data-theme="dark"] .adminGrid .card input[type="file"],
body[data-theme="dark"] .adminGrid .card input[type="text"],
body[data-theme="dark"] .adminGrid .card select{
  background:#23262d !important;
  color:#f5f5f7 !important;
  border-color:rgba(255,255,255,.10) !important;
}


/* V84 – premium app-inspired UI refresh (inspired, not copied) */
:root{
  --premium-blue-1:#3d8bff;
  --premium-blue-2:#6a8dff;
  --premium-cyan:#4fc3d7;
  --premium-card-grad:linear-gradient(135deg, rgba(61,139,255,.16) 0%, rgba(79,195,215,.08) 55%, rgba(255,255,255,.02) 100%);
  --premium-dark-grad:linear-gradient(135deg, rgba(46,88,184,.38) 0%, rgba(47,128,237,.22) 50%, rgba(76,175,200,.14) 100%);
  --premium-shadow:0 18px 40px rgba(15,23,42,.10);
}

.header{
  border-radius:24px;
  padding:10px 12px;
  box-shadow:0 10px 26px rgba(16,24,40,.08);
}
.desktopNav .btn,.desktopNav .chip{
  min-height:40px;
  padding:0 15px;
  border-radius:16px;
  background:rgba(118,118,128,.10);
}
.logo{
  border-radius:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
}

.printWorkspace{max-width:960px}
.printHero{
  position:relative;
  padding:14px 18px 18px;
  margin:2px 0 16px;
  border-radius:28px;
  background:var(--premium-card-grad);
  border:1px solid rgba(61,139,255,.12);
  box-shadow:var(--premium-shadow);
  overflow:hidden;
}
.printHero::after{
  content:"";
  position:absolute;
  right:-42px; top:-42px;
  width:180px; height:180px;
  background:radial-gradient(circle, rgba(61,139,255,.20) 0%, rgba(61,139,255,0) 70%);
  pointer-events:none;
}
.printHeroKicker{margin-bottom:6px}
.printHero h1{margin:0 0 4px;font-size:clamp(28px,4vw,38px);line-height:1.04}
.printHero p{font-size:var(--fs-md);max-width:700px;line-height:1.45}

.uxStep{
  border-radius:28px;
  box-shadow:0 12px 28px rgba(15,23,42,.06);
}
.uxStepHead{padding:18px 20px 12px;gap:13px}
.uxStepNumber{
  width:38px;height:38px;border-radius:14px;
  background:linear-gradient(180deg,#eff4fb,#e6ebf3);
  color:#546072;
}
.uxStepActive .uxStepNumber{
  background:linear-gradient(135deg,var(--premium-blue-1),var(--premium-cyan));
  box-shadow:0 10px 22px rgba(61,139,255,.24);
}
.uxStepHeading h2{font-size:clamp(24px,3.1vw,30px);line-height:1.08}
.uxStepHeading p{font-size:var(--fs-base)}
.uxStepState,.uxStepStateAuto{padding:7px 12px;font-weight:750}
.uxStepBody{padding:0 20px 20px}

.dropzone{
  min-height:190px;
  border:1.5px dashed rgba(61,139,255,.30);
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(247,249,253,.92));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}
.dropUploadIcon{
  width:54px;height:54px;
  background:linear-gradient(135deg,var(--premium-blue-2),var(--premium-cyan));
  box-shadow:0 12px 22px rgba(61,139,255,.25);
}
.dropTitle{font-size:var(--fs-2xl);font-weight:800}
.dropHint .small{font-size:var(--fs-md)}

.sourceUploadActions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.sourceActionBtn{min-height:48px;border-radius:18px;font-weight:800}
.sourceActionBtn.btnPrimary{background:linear-gradient(135deg,var(--premium-blue-2),var(--premium-cyan));box-shadow:0 12px 22px rgba(61,139,255,.22)}

.step1CurrentFiles{border:1px solid var(--line);border-radius:20px;padding:14px 14px 8px;background:linear-gradient(180deg, rgba(118,118,128,.04), rgba(118,118,128,.02));margin-top:8px}
.step1CurrentFilesHead{display:flex;justify-content:space-between;gap:8px;margin-bottom:10px;font-weight:700;color:var(--muted)}
.step1FileRow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-top:1px solid var(--line)}
.step1FileRow:first-of-type{border-top:0}
.step1FileName{font-weight:700}
.step1RemoveFile{border-radius:14px;padding:0 14px;min-height:36px}

.secondaryToolsLabel{margin:18px 0 8px}
.alternativeInput{border-top:1px solid var(--line)}
.alternativeSummary{padding:14px 2px}
.alternativeIcon{
  width:42px;height:42px;border-radius:14px;
  background:linear-gradient(180deg,rgba(61,139,255,.16),rgba(61,139,255,.09));
}
.alternativeCopy b{font-size:var(--fs-lg)}
.alternativeCopy small{font-size:var(--fs-sm)}
.alternativeBody{padding:10px 50px 18px}

.freeTextTools,.settingsGrid{gap:14px}
.inlineTools .btn,.actionRow .btn{border-radius:16px}
#freeTextForm textarea{min-height:170px;resize:vertical;border-radius:18px}

.uxAutoSettings,.readySettings{
  padding:16px 18px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,246,250,.95));
  border:1px solid rgba(61,139,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}
.uxAutoSettings strong,.readySettings strong{font-size:var(--fs-xl);line-height:1.28}
.eyebrow{display:block;margin-bottom:6px}

.settingsDisclosure{border-radius:20px}
.settingsDisclosureSummary{padding:15px 16px;font-size:var(--fs-lg)}
.settingsDisclosureBody{padding:16px}
.advancedPrintOptions summary{font-weight:750}
.settingsActionsRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.settingsActionsRow .btn{min-height:48px;border-radius:18px;padding:0 16px;font-weight:800}
.settingsActionsRow .btnPrimary{background:linear-gradient(135deg,var(--premium-blue-2),var(--premium-cyan));box-shadow:0 12px 22px rgba(61,139,255,.22)}

.quickPanel{
  border-radius:26px;
  padding:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,249,252,.96));
  box-shadow:var(--premium-shadow);
}
.filesHeader{margin:16px 0 12px}
.fileList li{padding:14px;border-radius:18px}
.fileName{font-size:var(--fs-lg);font-weight:750}
.mainPrintButton{
  min-height:58px;border-radius:20px;width:100%;font-size:var(--fs-lg);font-weight:850;
  background:linear-gradient(135deg,var(--premium-blue-1),var(--premium-cyan));
  box-shadow:0 14px 24px rgba(61,139,255,.24);
}

.card{
  border-radius:26px;
  box-shadow:0 14px 28px rgba(15,23,42,.06);
}
.draftsHero,.archiveHero,.adminHero{margin-bottom:16px}
.tableShell, .archiveTableWrap{border-radius:24px;overflow:hidden}

/* dark theme variant, closer to the polished app inspiration */
body[data-theme="dark"] .header{
  background:linear-gradient(180deg, rgba(24,26,31,.88), rgba(25,27,33,.82));
  border-color:rgba(255,255,255,.10);
  box-shadow:0 14px 34px rgba(0,0,0,.30);
}
body[data-theme="dark"] .desktopNav .btn,
body[data-theme="dark"] .desktopNav .chip{
  background:rgba(255,255,255,.05);
  color:#f3f6fb;
}
body[data-theme="dark"] .printHero{
  background:var(--premium-dark-grad);
  border-color:rgba(86,135,255,.22);
  box-shadow:0 18px 40px rgba(0,0,0,.34);
}
body[data-theme="dark"] .printHero p{color:#c9d0db}
body[data-theme="dark"] .uxStep,
body[data-theme="dark"] .card{
  background:linear-gradient(180deg, #17191f 0%, #14161b 100%);
  border-color:rgba(255,255,255,.08);
  box-shadow:0 18px 34px rgba(0,0,0,.30);
}
body[data-theme="dark"] .uxStepNumber{
  background:rgba(255,255,255,.06);
  color:#d1d7e4;
}
body[data-theme="dark"] .dropzone{
  background:linear-gradient(180deg, #161a23, #131821);
  border-color:rgba(95,144,255,.34);
}
body[data-theme="dark"] .step1CurrentFiles,
body[data-theme="dark"] .quickPanel,
body[data-theme="dark"] .uxAutoSettings,
body[data-theme="dark"] .readySettings,
body[data-theme="dark"] .settingsDisclosure{
  background:linear-gradient(180deg, #1a1e27 0%, #161a22 100%);
  border-color:rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 14px 26px rgba(0,0,0,.22);
}
body[data-theme="dark"] .alternativeIcon{
  background:linear-gradient(180deg, rgba(61,139,255,.24), rgba(61,139,255,.12));
}
body[data-theme="dark"] .stackForm input,
body[data-theme="dark"] .stackForm select,
body[data-theme="dark"] .stackForm textarea,
body[data-theme="dark"] .field input,
body[data-theme="dark"] .field select,
body[data-theme="dark"] .field textarea,
body[data-theme="dark"] select,
body[data-theme="dark"] input,
body[data-theme="dark"] textarea{
  background:#0f1a2e;
  border:1px solid rgba(79,124,196,.26);
  color:#f5f7fb;
}
body[data-theme="dark"] .quickPanel .btn:not(.btnPrimary):not(.btnDanger),
body[data-theme="dark"] .settingsActionsRow .btn:not(.btnPrimary):not(.btnDanger),
body[data-theme="dark"] .sourceActionBtn:not(.btnPrimary),
body[data-theme="dark"] .btn{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.06);
  color:#f5f7fb;
}
body[data-theme="dark"] .btnPrimary,
body[data-theme="dark"] .navActive,
body[data-theme="dark"] .mainPrintButton,
body[data-theme="dark"] .settingsActionsRow .btnPrimary,
body[data-theme="dark"] .sourceActionBtn.btnPrimary{
  background:linear-gradient(135deg, #4a8cff, #4dbbc7);
  color:#fff;
}

@media (max-width: 900px){
  .printWorkspace{max-width:none}
  .printHero{padding:14px 16px 16px;border-radius:24px}
  .uxStep{border-radius:24px}
  .sourceUploadActions{grid-template-columns:1fr}
  .uxAutoSettings,.readySettings{flex-direction:column;align-items:flex-start}
}
@media (max-width: 640px){
  .printHero h1{font-size:28px}
  .uxStepHeading h2{font-size:23px}
  .dropzone{min-height:170px}
  .dropTitle{font-size:22px}
  .alternativeBody{padding:10px 0 16px 0}
  .mainPrintButton{min-height:54px}
}


/* V85: fix step 2 layout, light theme readability, theme icon, and admin status consistency */
.step2ChoiceCard{
  display:grid;
  grid-template-columns:1fr;
  align-items:stretch;
  gap:14px;
}
.step2SelectionSummary{
  width:100%;
  min-width:0;
  padding:16px 18px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(247,248,251,.88));
  border:1px solid rgba(61,139,255,.10);
}
.step2SelectionSummary strong{
  display:block;
  color:var(--text);
}
.step2Actions{
  width:100%;
  flex-wrap:wrap;
  justify-content:flex-start;
}
.step2DiscardForm{
  width:100%;
  display:flex;
  justify-content:flex-end;
}
.step2DiscardLink{white-space:nowrap}
@media(min-width:901px){
  .step2Actions{display:flex;gap:10px}
  .step2Actions .btn{width:auto}
}
@media(max-width:900px){
  .step2ChoiceCard{gap:12px}
  .step2SelectionSummary{padding:14px 15px}
  .step2Actions{grid-template-columns:1fr 1fr}
  .step2Actions #btnUseStandard,
  .step2Actions #btnSaveDraft{grid-column:1/-1}
  .step2DiscardForm{justify-content:flex-start}
}
body:not([data-theme="dark"]) .step2SelectionSummary,
body:not([data-theme="dark"]) .adminPrinterRow,
body:not([data-theme="dark"]) .adminPrinterRowWithActions,
body:not([data-theme="dark"]) .backupStats span{
  color:var(--text);
}
body:not([data-theme="dark"]) .step2SelectionSummary .eyebrow,
body:not([data-theme="dark"]) .step2SelectionSummary strong,
body:not([data-theme="dark"]) .adminPrinterSummary b,
body:not([data-theme="dark"]) .adminPrinterSummary small,
body:not([data-theme="dark"]) .backupStats span,
body:not([data-theme="dark"]) .backupStats span b{
  color:inherit !important;
}
body:not([data-theme="dark"]) .printerReadySummary.printerReadyStatusUnknown{
  color:#5f6673;
}


/* V86 · polished light admin + toner cards */
body:not([data-theme="dark"]) .adminDashboardHero{
  background:linear-gradient(135deg,rgba(61,139,255,.10),rgba(79,195,215,.05) 55%,#fff);
  border-color:rgba(61,139,255,.12);
  box-shadow:0 14px 32px rgba(15,23,42,.07);
}
body:not([data-theme="dark"]) .adminStatusCard{
  background:#fff;
  border-color:rgba(60,60,67,.10);
  box-shadow:0 12px 28px rgba(15,23,42,.06);
}
body:not([data-theme="dark"]) .adminStatusHead{
  padding-bottom:4px;
}
body:not([data-theme="dark"]) .adminStatusIcon{
  background:linear-gradient(180deg,#edf5ff,#e5f0ff);
  color:#1479e8;
  border:1px solid rgba(61,139,255,.10);
}
body:not([data-theme="dark"]) .adminPrinterRow{
  background:linear-gradient(180deg,#f7f9fc,#f3f6fa);
  border:1px solid rgba(60,60,67,.07);
  border-radius:16px;
  padding:12px;
}
body:not([data-theme="dark"]) .adminPrinterSummary b{
  color:#1c1c1e !important;
  font-weight:800;
}
body:not([data-theme="dark"]) .adminPrinterSummary small{
  color:#747b88 !important;
  margin-top:3px;
}
body:not([data-theme="dark"]) .adminPrinterActions{
  gap:8px;
}
body:not([data-theme="dark"]) .adminPrinterActions .btn{
  min-height:34px;
  padding:0 11px;
  border-radius:12px;
  background:#eef1f5;
  color:#24262b;
  box-shadow:none;
}
body:not([data-theme="dark"]) .adminPrinterActions .btnDanger{
  background:#ff453a;
  color:#fff;
}
body:not([data-theme="dark"]) .adminBigStatus{
  background:linear-gradient(135deg,rgba(61,139,255,.10),rgba(79,195,215,.07));
  border:1px solid rgba(61,139,255,.08);
  border-radius:18px;
}
body:not([data-theme="dark"]) .adminMetric{
  background:#f5f7fa;
  border:1px solid rgba(60,60,67,.06);
  border-radius:18px;
}
body:not([data-theme="dark"]) .adminAllGood{
  background:#eefaf1;
  border:1px solid rgba(52,199,89,.11);
}
body:not([data-theme="dark"]) .tonerAdminStatus{
  background:#f5f7fb;
  border-color:rgba(60,60,67,.10);
  color:#1c1c1e;
}
body:not([data-theme="dark"]) .tonerAdminItem{
  background:linear-gradient(180deg,#fff,#fafbfc);
  border-color:rgba(60,60,67,.10);
}
body:not([data-theme="dark"]) .tonerAdminMeta{
  color:#4f5663;
}
body:not([data-theme="dark"]) .tonerAdminMeta .small{
  color:#777f8d;
}
body:not([data-theme="dark"]) .tonerResetBtn{
  background:#eef2f7;
  color:#29313d;
  border:1px solid rgba(60,60,67,.06);
  box-shadow:none;
}
body:not([data-theme="dark"]) .adminTabs .btn{
  background:#f1f3f6;
  color:#272a30;
}
body:not([data-theme="dark"]) .adminTabs .btn.navActive{
  background:linear-gradient(135deg,#3d8bff,#4fc3d7);
  color:#fff;
}
body[data-theme="dark"] .tonerAdminStatus,
body[data-theme="dark"] .tonerAdminItem{
  background:linear-gradient(180deg,#1c2028,#181c23);
  border-color:rgba(255,255,255,.08);
  color:#f5f7fb;
}
body[data-theme="dark"] .tonerAdminLabel,
body[data-theme="dark"] .tonerAdminPct{color:#f5f7fb}
body[data-theme="dark"] .tonerAdminMeta{color:#d2d7df}
body[data-theme="dark"] .tonerAdminMeta .small{color:#aeb5c0}
body[data-theme="dark"] .tonerBar{background:rgba(255,255,255,.09)}
body[data-theme="dark"] .tonerAdminIcon{background:rgba(61,139,255,.15)}


/* V88 · active desktop navigation stays readable in the light theme */
body:not([data-theme="dark"]) .desktopNav .btn.navActive{
  background:linear-gradient(135deg,#3d8bff,#4fc3d7);
  color:#ffffff;
  border-color:transparent;
  box-shadow:0 8px 20px rgba(61,139,255,.20);
}
body:not([data-theme="dark"]) .desktopNav .btn.navActive:hover{
  background:linear-gradient(135deg,#3182f6,#44b6c4);
  color:#ffffff;
}
body:not([data-theme="dark"]) .desktopNav .btn:not(.navActive){
  color:#24262b;
}


/* V89 · Telegram printing entry */
.telegramAlternativeIcon{
  background:linear-gradient(180deg,rgba(36,161,222,.16),rgba(36,161,222,.09));
  color:#229ed9;
}
.telegramAlternativeIcon .uiIcon{fill:currentColor;stroke:currentColor}
.telegramAlternativeBody{padding-top:10px}
.telegramInfoCard{
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  gap:14px;
  align-items:start;
  padding:16px;
  border-radius:18px;
  background:linear-gradient(135deg,rgba(36,161,222,.10),rgba(61,139,255,.05));
  border:1px solid rgba(36,161,222,.14);
}
.telegramInfoIcon{
  width:48px;
  height:48px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#2aabee,#229ed9);
  color:#fff;
  box-shadow:0 10px 22px rgba(34,158,217,.22);
}
.telegramInfoIcon .uiIcon{width:24px;height:24px;fill:currentColor;stroke:currentColor}
.telegramInfoCard b{font-size:var(--fs-lg);color:var(--text)}
.telegramInfoCard p{margin:5px 0 0;color:var(--muted);line-height:1.5}
.telegramActionRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.telegramActionRow .btn{min-height:44px;border-radius:15px;padding:0 15px;font-weight:800}
.telegramRequestBtn{background:rgba(36,161,222,.10);color:#137eaf;border:1px solid rgba(36,161,222,.14)}
.telegramOpenBtn{background:linear-gradient(135deg,#2aabee,#229ed9);box-shadow:0 10px 22px rgba(34,158,217,.20)}
.telegramBtnDisabled{opacity:.48;pointer-events:none;box-shadow:none}
.telegramSetupHint{margin:9px 2px 0;color:var(--muted)}
body[data-theme="dark"] .telegramAlternativeIcon{background:rgba(36,161,222,.16);color:#5cc8f4}
body[data-theme="dark"] .telegramInfoCard{
  background:linear-gradient(135deg,rgba(36,161,222,.12),rgba(61,139,255,.07));
  border-color:rgba(92,200,244,.14);
}
body[data-theme="dark"] .telegramRequestBtn{background:rgba(36,161,222,.13);color:#7dd2f5;border-color:rgba(92,200,244,.16)}
@media(max-width:640px){
  .telegramInfoCard{grid-template-columns:40px minmax(0,1fr);padding:14px;gap:11px}
  .telegramInfoIcon{width:40px;height:40px;border-radius:13px}
  .telegramInfoIcon .uiIcon{width:21px;height:21px}
  .telegramActionRow{display:grid;grid-template-columns:1fr;gap:8px}
  .telegramActionRow .btn{width:100%;min-height:46px}
}

/* V92 · temporary event/wedding access */
.approvalUserCard{
  display:grid;
  grid-template-columns:minmax(170px,.8fr) minmax(360px,1.5fr);
  align-items:start;
  gap:16px;
}
.approvalUserIdentity{display:flex;flex-direction:column;gap:5px;min-width:0}
.approvalUserIdentity>.chip{align-self:flex-start;margin-top:3px}
.approvalAccessForm{
  display:grid;
  grid-template-columns:minmax(170px,1fr) minmax(150px,.8fr) auto;
  gap:10px;
  align-items:end;
}
.approvalAccessForm .field{gap:5px}
.approvalAccessForm .field label{font-size:var(--fs-xs);font-weight:800;color:var(--muted)}
.approvalAccessForm select{min-height:40px;height:40px}
.approvalSubmit{min-height:40px;height:40px;white-space:nowrap}
.temporaryDaysField small{grid-column:1/-1;line-height:1.25;color:var(--muted)}
.temporaryUserCard{border-color:rgba(255,159,10,.25)}
.statusPill.temporary{background:rgba(255,159,10,.12);color:#a65a00}
.temporaryAccessInfo{
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  gap:8px;
  align-items:start;
  padding:10px 11px;
  border-radius:13px;
  background:rgba(255,159,10,.09);
  border:1px solid rgba(255,159,10,.14);
}
.temporaryAccessInfo>span{font-size:var(--fs-lg)}
.temporaryAccessInfo>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.temporaryAccessInfo b{font-size:var(--fs-sm);color:var(--text)}
.temporaryAccessInfo small{font-size:var(--fs-xs);color:var(--muted);line-height:1.35}
body[data-theme="dark"] .statusPill.temporary{background:rgba(255,159,10,.16);color:#ffbd4a}
body[data-theme="dark"] .temporaryAccessInfo{background:rgba(255,159,10,.11);border-color:rgba(255,159,10,.20)}
@media(max-width:900px){
  .approvalUserCard{grid-template-columns:1fr}
  .approvalAccessForm{grid-template-columns:1fr 1fr}
  .approvalSubmit{grid-column:1/-1;width:100%}
}
@media(max-width:560px){
  .approvalAccessForm{grid-template-columns:1fr}
  .approvalSubmit{grid-column:auto}
}


/* V96 · compact Telegram feature note + reliably scrollable onboarding */
.accountEmailOverlay{
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.accountEmailDialogV3{
  max-height:calc(100dvh - 28px);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
.accountTelegramUpdateBox{
  display:flex;
  align-items:center;
  gap:9px;
  margin:10px 0 12px;
  padding:9px 11px;
  border-radius:13px;
  background:rgba(36,161,222,.07);
  border:1px solid rgba(36,161,222,.12);
}
.accountTelegramUpdateIcon{
  width:30px;
  height:30px;
  flex:0 0 30px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:linear-gradient(135deg,#2aabee,#229ed9);
  color:#fff;
  box-shadow:none;
}
.accountTelegramUpdateIcon .uiIcon{
  width:16px;
  height:16px;
  fill:currentColor;
  stroke:currentColor;
}
.accountTelegramUpdateCopy{min-width:0}
.accountTelegramUpdateBox strong{
  display:block;
  color:var(--text);
  font-size:var(--fs-sm);
  margin:0 0 2px;
  line-height:1.25;
}
.accountTelegramUpdateBox p{
  margin:0;
  color:var(--muted);
  font-size:var(--fs-xs);
  line-height:1.3;
}
body[data-theme="dark"] .accountTelegramUpdateBox{
  background:rgba(36,161,222,.09);
  border-color:rgba(92,200,244,.12);
}
body[data-theme="dark"] .accountTelegramUpdateBox strong{color:#f5f7fb}
body[data-theme="dark"] .accountTelegramUpdateBox p{color:#aeb8c6}

/* Short viewports: anchor the dialog near the top so its own scroll area remains usable. */
@media(max-height:720px){
  .accountEmailOverlay{place-items:start center;padding:10px 14px}
  .accountEmailDialogV3{max-height:calc(100dvh - 20px);padding-top:20px}
  .accountEmailDialogV3 .v3Badge{width:38px;height:38px;margin-bottom:12px}
  .accountEmailLead{margin-bottom:12px}
  .accountEmailInfoBox{padding:13px 14px;margin-bottom:14px}
}
@media(max-width:520px){
  .accountEmailDialogV3{max-height:calc(100dvh - 20px)}
  .accountTelegramUpdateBox{padding:8px 10px;gap:8px}
  .accountTelegramUpdateIcon{width:28px;height:28px;flex-basis:28px;border-radius:9px}
  .accountTelegramUpdateIcon .uiIcon{width:15px;height:15px}
}

/* V95 · stripped-down onboarding for temporary event/wedding accounts */
.temporaryWelcomeOverlay{
  padding:14px;
  background:rgba(28,28,30,.40);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.temporaryWelcomeDialog{
  width:min(420px,calc(100vw - 24px));
  padding:28px;
  border-radius:28px;
  text-align:left;
  background:#f8f8fb;
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 26px 80px rgba(20,28,45,.22);
}
body[data-theme="dark"] .temporaryWelcomeDialog{
  background:#1c1c1e;
  border-color:rgba(255,255,255,.12);
}
.temporaryWelcomeIcon{
  width:48px;height:48px;border-radius:16px;display:grid;place-items:center;
  margin-bottom:17px;background:linear-gradient(135deg,#ff9f0a,#ffcc00);color:#fff;
  font-size:var(--icon-lg);box-shadow:0 9px 22px rgba(255,159,10,.25);
}
.temporaryWelcomeEyebrow{
  color:#c77700;font-size:var(--fs-xs);font-weight:850;letter-spacing:.11em;
  margin-bottom:8px;text-transform:uppercase;
}
body[data-theme="dark"] .temporaryWelcomeEyebrow{color:#ffbd4a}
.temporaryWelcomeDialog h2{
  margin:0 0 8px;font-size:var(--fs-3xl);line-height:1.18;letter-spacing:-.025em;color:var(--text);
}
.temporaryWelcomeLead{
  margin:0 0 17px;color:var(--muted);font-size:var(--fs-base);line-height:1.45;
}
.temporaryRemainingCard{
  padding:17px;margin-bottom:13px;border-radius:18px;
  background:linear-gradient(135deg,rgba(255,159,10,.14),rgba(255,204,0,.08));
  border:1px solid rgba(255,159,10,.20);display:flex;flex-direction:column;gap:3px;
}
.temporaryRemainingCard span{font-size:var(--fs-sm);font-weight:800;color:#9b6100}
.temporaryRemainingCard strong{font-size:var(--fs-display);line-height:1.15;color:var(--text)}
.temporaryRemainingCard small{font-size:var(--fs-sm);color:var(--muted)}
body[data-theme="dark"] .temporaryRemainingCard{background:rgba(255,159,10,.10);border-color:rgba(255,159,10,.22)}
body[data-theme="dark"] .temporaryRemainingCard span{color:#ffbd4a}
.temporaryPrinterOnly{
  display:flex;gap:11px;align-items:center;padding:13px 14px;margin-bottom:15px;
  border-radius:16px;background:var(--surface-2);border:1px solid var(--line);
}
.temporaryPrinterOnly>.uiIcon{width:22px;height:22px;color:var(--blue);flex:0 0 auto}
.temporaryPrinterOnly>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.temporaryPrinterOnly b{font-size:var(--fs-md);color:var(--text)}
.temporaryPrinterOnly small{font-size:var(--fs-xs);color:var(--muted);line-height:1.35}
.temporaryWelcomeNote{margin:0 0 16px;color:var(--muted);font-size:var(--fs-sm);line-height:1.45}
.temporaryWelcomeOk{width:100%;min-height:48px;border-radius:15px;font-weight:800}
@media(max-width:520px){
  .temporaryWelcomeDialog{padding:24px 22px 20px;border-radius:26px}
  .temporaryWelcomeDialog h2{font-size:var(--fs-2xl)}
  .temporaryRemainingCard strong{font-size:var(--fs-2xl)}
}


/* V97 · clean approval workflow */
.adminUserTopGrid .approvalSection{
  grid-column:1/-1;
}
.approvalCards{
  display:grid;
  gap:14px;
}
.approvalUserCard{
  display:grid;
  grid-template-columns:minmax(210px,.7fr) minmax(0,1.7fr);
  gap:20px;
  align-items:start;
  padding:16px;
  border-radius:20px;
}
.approvalUserIdentity{
  padding:4px 0;
}
.approvalUserIdentity>b{
  font-size:var(--fs-lg);
}
.approvalUserIdentity>small{
  color:var(--muted);
  overflow-wrap:anywhere;
}
.approvalAccessForm{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  min-width:0;
}
.approvalSettingsGrid{
  display:grid;
  grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) minmax(130px,.65fr);
  gap:12px;
  align-items:start;
}
.approvalSettingsGrid .field{
  min-width:0;
  gap:6px;
}
.approvalSettingsGrid select{
  width:100%;
  min-height:44px;
  height:44px;
}
.approvalSettingsGrid .field small{
  display:block;
  min-height:0;
  color:var(--muted);
  line-height:1.3;
}
.temporaryDaysField[hidden],
.temporaryApprovalNotice[hidden]{
  display:none !important;
}
.approvalRoleSelect:disabled{
  opacity:1;
  cursor:not-allowed;
  background:rgba(118,118,128,.10);
}
.temporaryApprovalNotice{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,159,10,.09);
  border:1px solid rgba(255,159,10,.15);
  color:var(--text);
}
.temporaryApprovalNotice b{white-space:nowrap}
.temporaryApprovalNotice span{color:var(--muted);line-height:1.35}
.approvalSubmit{
  width:100%;
  min-height:46px;
  height:auto;
  border-radius:16px;
  font-size:var(--fs-base);
  font-weight:850;
}
body[data-theme="dark"] .temporaryApprovalNotice{
  background:rgba(255,159,10,.12);
  border-color:rgba(255,159,10,.20);
}
body[data-theme="dark"] .approvalRoleSelect:disabled{
  background:rgba(255,255,255,.06);
  color:#d1d1d6;
}
@media(max-width:900px){
  .approvalUserCard{
    grid-template-columns:1fr;
    gap:14px;
  }
  .approvalSettingsGrid{
    grid-template-columns:1fr 1fr;
  }
  .temporaryDaysField{
    grid-column:1/-1;
  }
}
@media(max-width:620px){
  .approvalUserCard{padding:14px}
  .approvalSettingsGrid{grid-template-columns:1fr}
  .temporaryDaysField{grid-column:auto}
  .temporaryApprovalNotice{flex-direction:column;gap:3px}
}


/* V98: temporary access request on registration */
#temporaryRegistrationHint{
  margin-top:-4px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(0,122,255,.07);
  color:var(--text-secondary);
  line-height:1.4;
}
body[data-theme="dark"] #temporaryRegistrationHint{
  background:rgba(10,132,255,.12);
  color:#c7c7cc;
}


/* Druckanimation: funktionale Basis; visuelle V3-Anpassungen liegen in redesign.css. */
.printMotionOverlay[hidden]{display:none!important}
.printMotionOverlay{
  position:fixed;
  inset:0;
  z-index:430;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(19,24,34,.36);
  -webkit-backdrop-filter:blur(12px) saturate(1.05);
  backdrop-filter:blur(12px) saturate(1.05);
  opacity:0;
  transition:opacity .18s ease;
}
.printMotionOverlay.is-open{opacity:1}
.printMotionCard{
  position:relative;
  width:min(430px,100%);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.76);
  border-radius:30px;
  background:rgba(250,252,255,.94);
  box-shadow:0 28px 80px rgba(25,34,50,.24),inset 0 1px 0 rgba(255,255,255,.95);
  padding:26px 24px 22px;
  transform:translateY(16px) scale(.985);
  transition:transform .24s cubic-bezier(.2,.8,.2,1),background .2s ease;
}
.printMotionOverlay.is-open .printMotionCard{transform:translateY(0) scale(1)}
.printMotionClose{
  position:absolute;
  top:14px;
  right:14px;
  z-index:3;
  width:38px;
  height:38px;
  border:1px solid rgba(60,60,67,.12);
  border-radius:14px;
  background:rgba(255,255,255,.82);
  color:#1c1c1e;
  font:500 28px/34px -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  cursor:pointer;
  box-shadow:0 5px 16px rgba(30,40,60,.08);
}
.printMotionWorking{
  position:relative;
  display:grid;
  place-items:center;
  height:246px;
  margin:0 -8px 18px;
  overflow:hidden;
  border-radius:22px;
}
.printMotionPrinter{
  position:relative;
  width:220px;
  height:176px;
  filter:drop-shadow(0 20px 22px rgba(48,67,95,.16));
  transform:translateY(-6px);
}
.printMotionBackPaper{
  position:absolute;
  left:67px;
  top:0;
  width:92px;
  height:76px;
  border:1px solid rgba(104,143,194,.24);
  border-radius:8px 8px 3px 3px;
  background:linear-gradient(180deg,#fff 0%,#f3f8ff 100%);
  box-shadow:0 5px 14px rgba(50,90,140,.08);
}
.printMotionPrinterTop{
  position:absolute;
  left:35px;
  top:48px;
  width:154px;
  height:54px;
  border-radius:24px 24px 13px 13px;
  background:linear-gradient(180deg,#fbfdff,#e9eff7);
  border:1px solid rgba(120,145,175,.22);
  box-shadow:inset 0 1px 1px #fff;
}
.printMotionPrinterBody{
  position:absolute;
  left:24px;
  top:75px;
  width:176px;
  height:82px;
  border-radius:22px 22px 26px 26px;
  background:linear-gradient(180deg,#f9fbfe 0%,#e2eaf4 100%);
  border:1px solid rgba(100,128,162,.20);
  box-shadow:inset 0 2px 2px #fff,0 8px 20px rgba(61,84,115,.10);
}
.printMotionPower{
  position:absolute;
  right:20px;
  top:18px;
  width:14px;
  height:14px;
  border-radius:50%;
  border:2px solid #3289ff;
  box-shadow:0 0 0 5px rgba(50,137,255,.08),0 0 18px rgba(50,137,255,.36);
}
.printMotionSlot{
  position:absolute;
  left:38px;
  bottom:13px;
  width:100px;
  height:28px;
  border-radius:7px 7px 12px 12px;
  background:linear-gradient(180deg,#303d52 0%,#182231 100%);
  box-shadow:inset 0 3px 8px rgba(0,0,0,.28);
}
.printMotionOutput{
  position:absolute;
  z-index:2;
  left:74px;
  top:121px;
  width:92px;
  height:88px;
  border-radius:4px 4px 10px 10px;
  border:1px solid rgba(75,132,204,.20);
  background:linear-gradient(180deg,#f8fbff 0%,#dcecff 100%);
  box-shadow:0 12px 24px rgba(41,102,179,.16);
  transform-origin:50% 0;
  animation:printPaperOut 1.45s cubic-bezier(.2,.72,.2,1) infinite;
}
.printMotionOutput::before{
  content:'';
  display:block;
  width:32px;
  height:24px;
  margin:17px 0 10px 17px;
  border-radius:50%;
  background:linear-gradient(135deg,rgba(56,137,255,.22),rgba(56,137,255,.06));
}
.printMotionOutput span{
  display:block;
  height:5px;
  margin:0 17px 6px;
  border-radius:999px;
  background:rgba(45,127,239,.25);
}
.printMotionOutput span:nth-child(2){width:47px}
.printMotionOutput span:nth-child(3){width:57px}
.printMotionOutput span:nth-child(4){width:39px}
.printMotionTray{
  position:absolute;
  left:55px;
  bottom:0;
  width:125px;
  height:12px;
  border-radius:50%;
  background:rgba(86,120,160,.12);
  filter:blur(2px);
}
.printMotionPulse{
  position:absolute;
  left:50%;
  top:50%;
  width:196px;
  height:196px;
  border-radius:50%;
  border:1px solid rgba(0,122,255,.16);
  transform:translate(-50%,-52%);
  animation:printPulse 1.8s ease-out infinite;
  pointer-events:none;
}
.printMotionSuccess{
  display:none;
  place-items:center;
  height:220px;
}
.printMotionCheck{
  display:grid;
  place-items:center;
  width:112px;
  height:112px;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(180deg,#4bd56c,#2fbd50);
  box-shadow:0 18px 42px rgba(52,199,89,.28),inset 0 1px 0 rgba(255,255,255,.45);
  font-size:54px;
  font-weight:700;
  animation:printSuccessPop .5s cubic-bezier(.2,.9,.25,1.25) both;
}
.printMotionCard.is-success .printMotionWorking{display:none}
.printMotionCard.is-success .printMotionSuccess{display:grid}
.printMotionCopy{text-align:center;margin-top:0}
.printMotionEyebrow{font-size:11px;font-weight:900;letter-spacing:.13em;color:#007aff;margin-bottom:5px}
.printMotionCopy h2{margin:0;font-size:22px;line-height:1.2;color:#1c1c1e}
.printMotionCopy p{margin:8px auto 0;max-width:340px;color:#6d7481;font-size:14px;line-height:1.45}
.printMotionSteps{
  margin-top:20px;
  padding:6px 14px;
  border:1px solid rgba(60,60,67,.10);
  border-radius:18px;
  background:rgba(255,255,255,.66);
}
.printMotionStep{
  display:grid;
  grid-template-columns:22px 1fr;
  gap:10px;
  align-items:center;
  min-height:43px;
  color:#8b909a;
  font-size:13px;
  font-weight:700;
  border-top:1px solid rgba(60,60,67,.08);
}
.printMotionStep:first-child{border-top:0}
.printMotionStep i{
  display:block;
  width:10px;
  height:10px;
  justify-self:center;
  border-radius:50%;
  background:#c7c7cc;
  box-shadow:0 0 0 0 rgba(0,122,255,0);
}
.printMotionStep.is-active{color:#1c1c1e}
.printMotionStep.is-active i{
  background:#007aff;
  animation:printStatusDot 1s ease-in-out infinite;
}
.printMotionStep.is-done{color:#2d7d42}
.printMotionStep.is-done i{background:#34c759;box-shadow:none}
.printMotionCard.is-success .printMotionSteps{opacity:.78}
@keyframes printPaperOut{
  0%{transform:translateY(-38px) scaleY(.78);opacity:.45}
  38%{opacity:1}
  72%{transform:translateY(0) scaleY(1)}
  100%{transform:translateY(2px) scaleY(1);opacity:.25}
}
@keyframes printPulse{
  0%{transform:translate(-50%,-52%) scale(.72);opacity:.6}
  75%,100%{transform:translate(-50%,-52%) scale(1.16);opacity:0}
}
@keyframes printStatusDot{
  0%,100%{box-shadow:0 0 0 0 rgba(0,122,255,.22)}
  50%{box-shadow:0 0 0 7px rgba(0,122,255,0)}
}
@keyframes printSuccessPop{
  from{transform:scale(.58);opacity:0}
  to{transform:scale(1);opacity:1}
}
body[data-theme="dark"] .printMotionCard{
  background:rgba(28,28,30,.95);
  border-color:rgba(255,255,255,.13);
  box-shadow:0 28px 80px rgba(0,0,0,.56),inset 0 1px 0 rgba(255,255,255,.08);
}
body[data-theme="dark"] .printMotionClose{background:rgba(58,58,60,.86);border-color:rgba(255,255,255,.10);color:#fff}
body[data-theme="dark"] .printMotionCopy h2,body[data-theme="dark"] .printMotionStep.is-active{color:#f5f5f7}
body[data-theme="dark"] .printMotionCopy p{color:#b5b5bc}
body[data-theme="dark"] .printMotionSteps{background:rgba(58,58,60,.48);border-color:rgba(255,255,255,.08)}
body[data-theme="dark"] .printMotionStep{border-color:rgba(255,255,255,.08)}
@media(max-width:600px){
  .printMotionOverlay{align-items:end;padding:10px}
  .printMotionCard{
    width:100%;
    max-height:calc(100dvh - 20px);
    overflow-y:auto;
    overscroll-behavior:contain;
    border-radius:28px;
    padding:20px 18px calc(18px + env(safe-area-inset-bottom));
  }
  /* Mobile Feinabstimmung: Grafik/Text enger, aber das Papier bleibt im Animationsbereich. */
  .printMotionWorking{height:210px;margin:0 -4px 9px}
  .printMotionSuccess{height:194px}
  .printMotionPrinter{transform:translateY(-12px) scale(.86)}
  .printMotionCopy{position:relative;z-index:2}
  .printMotionCopy h2{font-size:21px}
  .printMotionCopy p{margin-top:7px}
  .printMotionSteps{margin-top:14px;padding:3px 12px}
  .printMotionStep{min-height:39px;gap:9px}
}
@media(max-width:380px){
  .printMotionCard{padding-top:18px}
  .printMotionWorking{height:198px;margin-bottom:7px}
  .printMotionPrinter{transform:translateY(-13px) scale(.82)}
  .printMotionSteps{margin-top:12px;padding:2px 10px}
  .printMotionStep{min-height:37px;font-size:12.5px}
}
@media(prefers-reduced-motion:reduce){
  .printMotionOverlay,.printMotionCard{transition:none}
  .printMotionOutput,.printMotionPulse,.printMotionStep.is-active i,.printMotionCheck{animation:none!important}
}