/* ── Reset & Base ─────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
body{height:100vh;overflow:hidden;font-family:'Segoe UI',system-ui,sans-serif;background:#f0f4f8;display:flex;color:#1e293b}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#f0f4f8}::-webkit-scrollbar-thumb{background:#c8d0dc;border-radius:3px}

/* ── Animations ──────────────────────────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.fade-up{animation:fadeUp .4s ease forwards}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
#sidebar{
  width:248px;flex-shrink:0;
  background:linear-gradient(160deg,#0d2347 0%,#1e3d73 58%,#1a5c4a 100%);
  display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;
  transition:width .25s ease;
  box-shadow:3px 0 20px rgba(13,35,71,.28);
  position:relative;z-index:10;
}
body.sidebar-collapsed #sidebar{width:0;overflow:hidden}

#sidebar-brand{
  padding:18px 16px 14px;border-bottom:1px solid rgba(0,0,0,.08);
  cursor:pointer;flex-shrink:0;display:flex;flex-direction:column;align-items:center;
  background:rgba(255,255,255,.92);text-align:center;
}
#sidebar-logo{height:96px;object-fit:contain;mix-blend-mode:multiply;max-width:200px}
#sidebar-tagline{font-size:9.5px;font-weight:700;color:#3a6b8a;letter-spacing:.08em;text-transform:uppercase;margin-top:6px;text-align:center}

#sidebar-nav{flex:1;padding:6px 0 10px;overflow-y:auto;overflow-x:hidden}

.nav-sec{padding:2px 0 4px}
.nav-sec-label{padding:9px 16px 4px;font-size:9.5px;font-weight:700;color:rgba(255,255,255,.32);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.nav-item{
  width:100%;background:none;border:none;padding:7px 14px;
  display:flex;align-items:center;gap:9px;cursor:pointer;
  color:rgba(255,255,255,.7);font-size:12.5px;font-family:inherit;text-align:left;
  transition:background .15s,color .15s;border-left:3px solid transparent;white-space:nowrap;
}
.nav-item:hover{background:rgba(255,255,255,.1);color:#fff;border-left-color:rgba(122,220,176,.55)}
.nav-soon{opacity:.55;cursor:default}
.nav-logo{height:15px;width:15px;object-fit:contain;flex-shrink:0;filter:brightness(0) invert(1);opacity:.8}
.nav-ic-fb{width:16px;height:16px;border-radius:4px;font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nav-lbl{flex:1;overflow:hidden;text-overflow:ellipsis}
.nav-extra{font-size:10px;flex-shrink:0}
.soon-dot{color:#7ddcb0;font-size:8px}

/* ── Sidebar User Switcher ───────────────────────────────────────────────── */
#sidebar-user-switcher{padding:8px 12px 4px;border-top:1px solid rgba(255,255,255,.1);flex-shrink:0}
.sw-label{font-size:9px;font-weight:700;color:rgba(255,255,255,.3);letter-spacing:.1em;text-transform:uppercase;padding:0 2px 5px}
.sw-user-btn{
  width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:9px;color:rgba(255,255,255,.65);padding:7px 10px;margin-bottom:5px;
  font-size:12.5px;font-family:inherit;text-align:left;display:flex;align-items:center;
  gap:8px;cursor:pointer;transition:all .15s;
}
.sw-user-btn:hover{background:rgba(255,255,255,.13);color:#fff;border-color:rgba(255,255,255,.25)}
.sw-active{background:rgba(255,255,255,.15) !important;border-color:rgba(122,220,176,.5) !important;color:#fff !important}
.sw-av{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;
  background:rgba(255,255,255,.18);
  font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;
}
.sw-active .sw-av{background:linear-gradient(135deg,rgba(30,61,115,.8),rgba(58,140,104,.8))}
.sw-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sw-check{font-size:11px;color:#7ddcb0;flex-shrink:0}

#sidebar-bottom{padding:10px 12px 14px;border-top:1px solid rgba(255,255,255,.1);flex-shrink:0}
.sidebar-btn{
  width:100%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  border-radius:9px;color:rgba(255,255,255,.75);padding:8px 13px;font-size:12.5px;
  cursor:pointer;font-family:inherit;text-align:left;display:flex;align-items:center;
  gap:8px;transition:background .15s;
}
.sidebar-btn:hover{background:rgba(255,255,255,.14);color:#fff}
#sidebar-org-label{font-size:10px;color:rgba(255,255,255,.3);padding:9px 2px 2px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── Main Wrapper ─────────────────────────────────────────────────────────── */
#main-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}

/* ── Header ──────────────────────────────────────────────────────────────── */
#suite-header{
  background:#fff;flex-shrink:0;display:flex;align-items:center;
  padding:0 22px;gap:12px;height:58px;
  border-bottom:3px solid #1e3d73;
  box-shadow:0 2px 16px rgba(30,61,115,.1);position:relative;z-index:5;
}
#menu-btn{
  background:none;border:none;cursor:pointer;width:34px;height:34px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;color:#4b5a6e;flex-shrink:0;transition:background .15s;
}
#menu-btn:hover{background:#f0f4f8}
/* ── Login Wrap + Panel ──────────────────────────────────────────────────── */
#login-wrap{position:relative;flex-shrink:0}
#login-btn{
  background:linear-gradient(135deg,#1e3d73,#2a6b50);color:#fff;border:none;
  border-radius:22px;padding:7px 16px 7px 12px;font-size:12.5px;font-weight:700;
  cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:7px;
  white-space:nowrap;transition:opacity .15s;
}
#login-btn:hover{opacity:.88}
#login-panel{
  position:absolute;top:calc(100% + 8px);left:0;
  width:268px;background:#fff;border-radius:16px;
  box-shadow:0 8px 40px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.1);
  z-index:200;overflow:hidden;
}
.lp-profile{display:flex;align-items:center;gap:11px;padding:16px 18px 14px}
.lp-av{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#1e3d73,#3a8c68);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;
}
.lp-name{font-size:13.5px;font-weight:800;color:#1e293b}
.lp-org{font-size:11px;color:#9ba8bb;margin-top:1px;line-height:1.4}
.lp-sep{height:1px;background:#f0f4f8;margin:0}
.lp-block{padding:12px 18px}
.lp-label{font-size:10px;font-weight:700;color:#9ba8bb;letter-spacing:.08em;text-transform:uppercase;margin-bottom:7px}
.lp-tier-row{display:flex;align-items:center;gap:9px}
.lp-extras{font-size:11.5px;color:#6b7a8d;font-weight:600}
.lp-nav-btn{
  width:100%;background:none;border:1.5px solid #dde3ec;border-radius:9px;
  padding:8px 12px;font-size:12.5px;font-weight:700;color:#1e3d73;
  cursor:pointer;font-family:inherit;text-align:left;transition:all .15s;
}
.lp-nav-btn:hover{background:#f4f7fb;border-color:#1e3d73}
.lp-footer-block{padding:10px 18px 14px;background:#f8fafc}
.lp-login-main{
  width:100%;background:#1e3d73;color:#fff;border:none;border-radius:9px;
  padding:9px 14px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit;
  transition:background .15s;
}
.lp-login-main:hover{background:#2a4f8f}
.lp-hint{font-size:10px;color:#b0bbc9;text-align:center;margin-top:7px}
/* ── Header Institut Logo ────────────────────────────────────────────────── */
#header-institut{height:46px;object-fit:contain;mix-blend-mode:multiply;opacity:.65}
#breadcrumb{flex:1;display:flex;align-items:center;gap:7px;font-size:14px;min-width:0}
#bc-sep{color:#9ba8bb;font-size:15px}
#bc-page{font-weight:700;color:#3a8c68;white-space:nowrap}
#header-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
#user-chip{display:flex;align-items:center;gap:8px;background:#f4f7fb;border-radius:20px;padding:5px 12px 5px 5px}
#user-av{
  width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,#1e3d73,#3a8c68);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:800;flex-shrink:0;
}
#user-nm{font-size:12.5px;font-weight:600;color:#4b5a6e;white-space:nowrap}

/* ── Main Content ─────────────────────────────────────────────────────────── */
#main-content{flex:1;overflow-y:auto;padding:24px 28px}

/* ── Dashboard ───────────────────────────────────────────────────────────── */
.dash-top{margin-bottom:20px}
.dash-greeting-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.dash-title{font-size:clamp(18px,2vw,24px);font-weight:800;color:#1e3d73;margin-bottom:3px}
.dash-sub{font-size:12.5px;color:#6b7a8d;line-height:1.5}

.tier-chip{display:inline-flex;align-items:center;padding:4px 13px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.04em;flex-shrink:0}
.tier-base        {background:#dbe6f9;color:#1e3d73}
.tier-pro         {background:#dce8f8;color:#2d5a9e}
.tier-complete    {background:#d1f0e4;color:#1e6b3a}
.tier-complete_plus{background:#fde8d0;color:#b45309}

/* ── Module Grid (Flip Cards) ─────────────────────────────────────────────── */
.mod-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:12px;
}

/* Flip container */
.mod-card{
  perspective:900px;cursor:pointer;
  height:240px;
}
.mod-card-inner{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.4,0,.2,1);
}
.mod-card:hover .mod-card-inner,
.mod-card.flipped .mod-card-inner{
  transform:rotateY(180deg);
}

/* Front face */
.mc-front{
  position:absolute;inset:0;border-radius:18px;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:#fff;border:2px solid #eef1f5;
  padding:14px 14px 12px;
  display:flex;flex-direction:column;
  transition:border-color .2s,box-shadow .2s;
}
.mod-card:hover .mc-front{
  border-color:var(--tc,#1e3d73);
  box-shadow:0 8px 28px rgba(30,61,115,.12);
}

/* Back face */
.mc-back{
  position:absolute;inset:0;border-radius:18px;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transform:rotateY(180deg);
  background:linear-gradient(135deg,#0d2347 0%,#1e3d73 55%,#1a5c4a 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:14px;color:#fff;gap:8px;
}

/* Status badge (booked / locked) */
.mc-status-badge{
  position:absolute;top:9px;right:9px;
  width:20px;height:20px;border-radius:50%;
  font-size:10px;display:flex;align-items:center;justify-content:center;font-weight:800;
}
.mc-booked{background:#d1f0e4;color:#1e6b3a}
.mc-locked{background:#f0f0f0;color:#9ba8bb;font-size:9px}

/* Front content */
.mc-logo-wrap{height:58px;display:flex;align-items:center;margin-bottom:8px}
.mc-logo-f{height:52px;object-fit:contain;mix-blend-mode:multiply}
.mc-logo-fb{height:52px;width:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800}
.mc-name{font-size:12.5px;font-weight:800;color:#1e3d73;margin-bottom:3px;line-height:1.2}
.mc-sub{font-size:10.5px;color:#6b7a8d;line-height:1.5;flex:1;overflow:hidden}
.mc-tier-chip{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700;margin-top:6px;align-self:flex-start}

/* Back content */
.mc-logo-b-pill{
  background:#fff;border-radius:14px;
  padding:7px 18px;display:flex;align-items:center;justify-content:center;
  width:calc(100% - 4px);
  box-shadow:0 4px 18px rgba(0,0,0,.32),0 1px 4px rgba(0,0,0,.18);
}
.mc-logo-b{height:38px;object-fit:contain}
.mc-back-name-fb{font-size:12px;font-weight:800;color:rgba(255,255,255,.75);letter-spacing:.05em}
.mc-back-sub{font-size:11px;color:rgba(255,255,255,.6);line-height:1.5;max-height:40px;overflow:hidden}
.mc-back-pill{
  font-size:11px;font-weight:700;padding:3px 11px;border-radius:20px;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);color:#fff;
}
.mc-not-booked{background:rgba(255,160,0,.2);border-color:rgba(255,160,0,.4);color:#ffd080}
.mc-included{background:rgba(122,220,176,.18);border-color:rgba(122,220,176,.4);color:#7ddcb0}
.mc-back-price{font-size:12px;font-weight:700;color:rgba(255,255,255,.55)}
.mc-open-btn{
  font-size:13px;font-weight:800;color:#7ddcb0;letter-spacing:.02em;
  border:1.5px solid rgba(122,220,176,.5);border-radius:10px;
  padding:7px 18px;background:transparent;cursor:pointer;font-family:inherit;
  transition:background .15s;
}
.mc-open-btn:hover{background:rgba(122,220,176,.15)}

/* ── Pricing Section (Dashboard-Übersicht, kompakt) ─────────────────────── */
.pricing-section{margin-top:40px;padding-top:14px;border-top:1px solid #e2e8f0}
.pricing-section-hdr{margin-bottom:8px;display:flex;align-items:baseline;gap:10px}
.pricing-title{font-size:12px;font-weight:700;color:#8a96a8}
.pricing-hint{font-size:10.5px;color:#b8c2cc}
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.pricing-card{
  background:#fafbfc;border-radius:10px;border:1px solid #eef1f5;
  padding:8px 10px;position:relative;
  transition:border-color .2s;
}
.pricing-card:hover{border-color:#c8d4ea}
.pricing-current{border-color:#3a8c68 !important;background:#f4fbf8 !important}
.pc-cur-badge{
  position:absolute;top:-7px;left:8px;
  background:#3a8c68;color:#fff;font-size:8.5px;font-weight:800;
  padding:1px 7px;border-radius:20px;letter-spacing:.04em;
}
.pricing-card .tier-chip{margin-bottom:5px;display:inline-flex;padding:2px 9px;font-size:10px}
.pc-users{font-size:9.5px;font-weight:700;color:#3a8c68;margin-bottom:4px}
.pc-modules{list-style:none;margin-bottom:5px}
.pc-modules li{font-size:10px;color:#8a96a8;padding:0;line-height:1.5}
.pc-modules li::before{content:'· ';color:#d0d8e4}
.pc-price{font-size:11.5px;font-weight:800;color:#6b7a8d}
.pc-per{font-size:9.5px;font-weight:600;color:#9ba8bb;margin-left:2px}

/* ── Pricing Full Page ───────────────────────────────────────────────────── */
.pricing-full-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:32px;
}
.pf-card{
  background:#fff;border-radius:16px;border:2px solid #eef1f5;
  padding:20px 18px;position:relative;display:flex;flex-direction:column;gap:6px;
  transition:border-color .2s,box-shadow .2s;
}
.pf-card:hover{border-color:#c8d4ea;box-shadow:0 4px 18px rgba(30,61,115,.08)}
.pf-current{border-color:#3a8c68 !important;box-shadow:0 4px 18px rgba(58,140,104,.15) !important}
.pf-cur-badge{
  position:absolute;top:-10px;left:14px;
  background:#3a8c68;color:#fff;font-size:9.5px;font-weight:800;
  padding:2px 10px;border-radius:20px;letter-spacing:.04em;
}
.pf-card .tier-chip{display:inline-flex;margin-bottom:4px}
.pf-users{font-size:11px;font-weight:700;color:#3a8c68;margin-bottom:2px}
.pf-modules{list-style:none;flex:1}
.pf-modules li{font-size:12px;color:#6b7a8d;padding:2px 0;line-height:1.55}
.pf-modules li::before{content:'· ';color:#c8d4ea}
.pf-price{font-size:16px;font-weight:800;color:#1e3d73;margin-top:8px}
.pf-per{font-size:11px;font-weight:600;color:#9ba8bb;margin-left:2px}
.pf-contact-btn{
  width:100%;background:none;border:1.5px solid #1e3d73;border-radius:9px;
  padding:8px;font-size:12.5px;font-weight:700;color:#1e3d73;cursor:pointer;
  font-family:inherit;transition:all .15s;margin-top:6px;
}
.pf-contact-btn:hover{background:#f4f7fb}

/* Addons */
.pa-section{border-top:2px solid #eef1f5;padding-top:20px}
.pa-title{font-size:15px;font-weight:800;color:#1e3d73;margin-bottom:3px}
.pa-sub{font-size:12.5px;color:#6b7a8d;margin-bottom:14px}
.pa-grid{display:flex;flex-direction:column;gap:10px}
.pa-card{
  background:#fff;border-radius:14px;border:1.5px solid #eef1f5;
  padding:14px 18px;display:flex;align-items:center;gap:14px;
}
.pa-logo-pill{background:#fff;border-radius:10px;border:1px solid #eef1f5;padding:5px 12px;flex-shrink:0}
.pa-logo{height:32px;object-fit:contain}
.pa-info{flex:1}
.pa-name{font-size:13px;font-weight:800;color:#1e3d73}
.pa-modsub{font-size:11.5px;color:#6b7a8d;margin-top:1px}
.pa-price{font-size:13px;font-weight:800;color:#1e3d73;white-space:nowrap}

/* ── Vault ───────────────────────────────────────────────────────────────── */
.vault-empty{text-align:center;padding:60px 20px;background:#fff;border-radius:18px;border:2px dashed #dde3ec}
.ve-title{font-weight:800;color:#1e3d73;font-size:16px;margin-bottom:8px}
.ve-sub{font-size:13.5px;color:#6b7a8d;line-height:1.6;max-width:380px;margin:0 auto}
.vault-list{display:flex;flex-direction:column;gap:12px}
.vault-card{background:#fff;border-radius:14px;border:1.5px solid #eef1f5;padding:16px 18px;transition:box-shadow .2s,border-color .2s}
.vault-card:hover{border-color:#c8d4ea;box-shadow:0 4px 16px rgba(30,61,115,.08)}
.vc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}
.vc-mod{font-size:11.5px;font-weight:700;color:#1e3d73}
.vc-date{font-size:11px;color:#9ba8bb}
.vc-title{font-size:13.5px;font-weight:700;color:#1e293b;margin-bottom:6px}
.vc-summary{font-size:12px;color:#6b7a8d;line-height:1.6;margin-bottom:10px;max-height:56px;overflow:hidden}
.vc-btns{display:flex;gap:8px;margin-top:10px}
.vc-btn{background:none;border:1.5px solid #dde3ec;border-radius:8px;padding:5px 13px;font-size:12px;cursor:pointer;font-family:inherit;color:#4b5a6e;transition:all .15s}
.vc-btn:hover{border-color:#1e3d73;color:#1e3d73;background:#f4f7fb}
.vc-del:hover{border-color:#c0392b !important;color:#c0392b !important;background:#fdf0ef !important}

/* ── User Picker ─────────────────────────────────────────────────────────── */
.up-user-btn{
  width:100%;background:#f8fafc;border:1.5px solid #dde3ec;border-radius:13px;
  padding:14px 16px;margin-bottom:10px;display:flex;align-items:center;gap:14px;
  cursor:pointer;font-family:inherit;text-align:left;transition:all .15s;
}
.up-user-btn:hover{border-color:#1e3d73;background:#f0f4fb;box-shadow:0 2px 12px rgba(30,61,115,.1)}
.up-av{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#1e3d73,#3a8c68);
  color:#fff;font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center;
}
.up-info{flex:1;min-width:0}
.up-name{font-size:14px;font-weight:700;color:#1e293b}
.up-role{font-size:11.5px;color:#9ba8bb;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up-arrow{color:#c8d0dc;flex-shrink:0;transition:color .15s}
.up-user-btn:hover .up-arrow{color:#1e3d73}

/* ── Modals ──────────────────────────────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(10,20,45,.78);display:flex;align-items:center;justify-content:center;z-index:9999;backdrop-filter:blur(8px)}
.modal-box{background:#fff;border-radius:20px;padding:34px 30px;width:90%;max-width:480px;box-shadow:0 28px 80px rgba(0,0,0,.3);animation:fadeUp .25s ease;position:relative}
.modal-box.wide{max-width:660px}
.modal-close-btn{position:absolute;top:14px;right:16px;background:none;border:none;cursor:pointer;color:#9ba8bb;font-size:22px;line-height:1;padding:4px;transition:color .15s}
.modal-close-btn:hover{color:#1e3d73}
.modal-kicker{font-size:10.5px;font-weight:700;color:#9ba8bb;letter-spacing:.1em;text-transform:uppercase;margin-bottom:7px}
.modal-title{font-size:20px;font-weight:800;color:#1e3d73;margin-bottom:12px}
.modal-body{font-size:13.5px;color:#4b5a6e;line-height:1.7;margin-bottom:22px}
.modal-error{font-size:12px;color:#c0392b;margin-bottom:10px;display:none}
.inp-label{font-size:12.5px;font-weight:700;color:#4b5a6e;margin-bottom:5px;display:block}
.text-inp{width:100%;padding:11px 14px;border:1.5px solid #dde3ec;border-radius:10px;font-size:13.5px;font-family:inherit;color:#1a2740;background:#f8fafc;outline:none;transition:border-color .15s}
.text-inp:focus{border-color:#3a8c68}
.btn-navy{padding:12px 24px;border-radius:11px;border:none;background:#1e3d73;color:#fff;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;transition:background .15s}
.btn-navy:hover{background:#2a4f8f}
.btn-primary{padding:12px 24px;border-radius:11px;border:none;background:#3a8c68;color:#fff;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:8px;transition:all .15s;box-shadow:0 4px 14px rgba(58,140,104,.3)}
.btn-primary:hover{background:#2d7055;transform:translateY(-1px)}
.btn-ghost{padding:11px 22px;border-radius:11px;border:1.5px solid #dde3ec;background:#fff;color:#6b7a8d;font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:10px;transition:all .15s}
.btn-ghost:hover{border-color:#1e3d73;color:#1e3d73}
.result-ta{width:100%;min-height:300px;border:1.5px solid #dde3ec;border-radius:12px;padding:16px;font-size:13px;font-family:'Courier New',monospace;resize:vertical;outline:none;line-height:1.75;color:#1e293b;background:#f8fafc}
.result-ta:focus{border-color:#3a8c68}

/* Lock Modal extras */
.lock-logo-row{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.lock-name{font-size:17px;font-weight:800;color:#1e3d73}
.lock-sub{font-size:12.5px;color:#6b7a8d;margin-top:2px}

/* ── Vault Modal meta ────────────────────────────────────────────────────── */
.vm-meta{display:flex;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.vm-meta span{font-size:12px;font-weight:600;color:#6b7a8d}
.vm-meta strong{color:#1e3d73}

/* ── Footer ──────────────────────────────────────────────────────────────── */
#app-footer{background:#fff;border-top:1px solid #dde3ec;padding:7px 22px;display:flex;align-items:center;flex-shrink:0;font-size:11.5px;color:#9ba8bb}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media(max-width:1200px){
  .mod-grid{grid-template-columns:repeat(4,1fr)}
  .mod-card{height:230px}
}
@media(max-width:860px){
  #main-content{padding:16px 14px}
  .mod-grid{grid-template-columns:repeat(3,1fr)}
  .mod-card{height:225px}
}
@media(max-width:600px){
  .mod-grid{grid-template-columns:repeat(2,1fr)}
  .mod-card{height:215px}
  #sidebar{position:fixed;top:0;left:0;bottom:0;z-index:100}
  body:not(.sidebar-collapsed)::after{content:'';position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:99}
}