@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Inter:wght@300;400;500;600;700&display=swap');

/* ═══════════════════════ VARIABLES ═══════════════════════ */
:root {
  --bg-deep:     #080810;
  --bg-card:     #0f0f18;
  --bg-panel:    #13131e;
  --bg-hover:    #1a1a28;
  --bg-active:   #1e1e30;
  --border:      rgba(255,200,80,0.10);
  --border-glow: rgba(255,200,80,0.28);
  --border-sel:  rgba(255,200,80,0.55);
  --gold:        #c9a84c;
  --gold-light:  #f0c060;
  --gold-dim:    #6a5020;
  --text:        #e8e0d0;
  --text-sub:    #8a8070;
  --text-dim:    #4a4540;
  --red:         #c0392b;
  --green:       #27ae60;
  --blue:        #2980b9;
  --purple:      #8e44ad;
  --r:           8px;
  --r-sm:        5px;
  --t:           0.18s ease;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg-deep);
  color: var(--text);
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body::before {
  content:'';
  position:fixed;inset:0;
  background:
    radial-gradient(ellipse 60% 40% at 15% 10%, rgba(201,168,76,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 85% 90%, rgba(100,60,180,0.06) 0%, transparent 60%);
  pointer-events:none;z-index:0;
}

/* ═══════════════════════ HEADER ═══════════════════════ */
header {
  flex-shrink: 0;
  height: 56px;
  background: rgba(8,8,16,0.95);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  position: relative;
  z-index: 50;
}

.header-logo { display:flex;align-items:center;gap:10px; }
.logo-rune {
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),#4a3010);
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;
  box-shadow:0 0 14px rgba(201,168,76,0.35);border:1px solid var(--gold-dim);
}
.logo-text h1 {
  font-family:'Cinzel',serif;font-size:1rem;font-weight:700;
  color:var(--gold-light);letter-spacing:0.04em;line-height:1;
}
.logo-text span { font-size:0.6rem;color:var(--text-sub);letter-spacing:0.12em;text-transform:uppercase; }

.header-status { display:flex;align-items:center;gap:8px;font-size:0.75rem;color:var(--text-sub); }
.status-dot {
  width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 5px rgba(39,174,96,0.5);animation:pulse 2s infinite;
}
.status-dot.loading{background:#e67e22;box-shadow:0 0 5px rgba(230,126,34,0.5);}
.status-dot.error  {background:var(--red);box-shadow:0 0 5px rgba(192,57,43,0.5);}

.nav-btn {
  background:transparent;border:1px solid var(--border);color:var(--text-sub);
  padding:5px 12px;border-radius:var(--r-sm);font-size:0.75rem;cursor:pointer;
  font-family:'Inter',sans-serif;transition:var(--t);
}
.nav-btn:hover { border-color:var(--border-glow);color:var(--gold); }

/* ═══════════════════════ MAIN 3-COL ═══════════════════════ */
main {
  flex: 1;
  display: grid;
  grid-template-columns: 280px 360px 1fr;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

/* ═══════════════════════ SHARED PANEL ═══════════════════════ */
.panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1rem;
  margin-bottom: 10px;
}
.panel-title {
  font-family:'Cinzel',serif;font-size:0.65rem;font-weight:600;
  color:var(--gold);letter-spacing:0.14em;text-transform:uppercase;
  margin-bottom:.75rem;display:flex;align-items:center;gap:6px;
}
.panel-title::after{content:'';flex:1;height:1px;background:linear-gradient(to right,var(--border-glow),transparent);}

/* ═══════════════════════ COL 1 — SUMMARY ═══════════════════════ */
.col-summary {
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 1rem;
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
}

/* Best Class */
.best-class-panel { display:flex;flex-direction:column;gap:8px; }
.best-class-top   { display:flex;align-items:center;gap:10px; }
.best-class-icon  { font-size:2rem;line-height:1; }
.best-class-name  { font-family:'Cinzel',serif;font-size:1.05rem;font-weight:700;color:var(--gold-light); }
.best-class-lv    { font-size:0.7rem;color:var(--gold);margin-top:2px; }
.best-class-desc  { font-size:0.7rem;color:var(--text-sub);line-height:1.5; }
.class-rank-list  { display:flex;flex-direction:column;gap:3px;margin-top:4px; }
.class-rank-row {
  display:flex;justify-content:space-between;align-items:center;
  font-size:0.68rem;padding:4px 8px;border-radius:4px;
  background:rgba(255,255,255,0.02);border:1px solid transparent;
  transition:var(--t);cursor:default;
}
.class-rank-row:hover { border-color:var(--border);background:var(--bg-hover); }
.class-rank-row.best { background:rgba(201,168,76,0.08);border-color:var(--border-glow); }
.crn { color:var(--text); }
.crl { color:var(--text-dim); }
.crb { font-family:'Cinzel',serif;font-size:0.75rem;color:var(--gold-light); }

/* Requirements */
.req-summary-item {
  display:flex;align-items:center;justify-content:space-between;
  padding:5px 8px;border-radius:var(--r-sm);margin-bottom:4px;
  background:rgba(255,255,255,0.02);border:1px solid var(--border);
  font-size:0.75rem;
}
.req-stat-name { color:var(--text-sub);font-size:0.68rem;text-transform:uppercase;letter-spacing:0.08em; }
.req-stat-val  { font-weight:600;color:var(--text); }
.req-stat-val.met   { color:var(--green); }
.req-stat-val.unmet { color:var(--red); }
.req-source { font-size:0.6rem;color:var(--text-dim);margin-top:1px; }
.empty-hint { font-size:0.72rem;color:var(--text-dim);text-align:center;padding:.75rem 0; }

/* Vitals */
.vitals-grid { display:grid;grid-template-columns:1fr 1fr;gap:8px; }
.vital-block  { background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-sm);padding:8px;text-align:center; }
.vital-val    { font-family:'Cinzel',serif;font-size:1.1rem;font-weight:700;color:var(--gold-light);line-height:1; }
.vital-label  { font-size:0.6rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.08em;margin:3px 0; }
.vital-bar-track { height:4px;background:var(--bg-deep);border-radius:2px;overflow:hidden;border:1px solid var(--border); }
.vital-bar-fill  { height:100%;border-radius:2px;transition:width .3s ease; }
.vital-bar-fill.hp  { background:linear-gradient(to right,#8b0000,#e74c3c); }
.vital-bar-fill.fp  { background:linear-gradient(to right,#1a4a8a,#3498db); }
.vital-bar-fill.stm { background:linear-gradient(to right,#145a32,#27ae60); }
.vital-bar-fill.eq  { background:linear-gradient(to right,#5a4a08,#f1c40f); }
.roll-type { margin-top:8px;text-align:center;font-size:0.75rem;color:var(--text-sub); }

/* AR Panel */
.ar-panel { text-align:center; }
.ar-big { font-family:'Cinzel',serif;font-size:2.5rem;font-weight:900;color:var(--gold-light);line-height:1; }
.ar-label-small { font-size:0.6rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:.5rem; }
.ar-breakdown-detail { display:flex;gap:4px;flex-wrap:wrap;justify-content:center;margin-top:4px; }
.dmg-tag  { padding:2px 8px;border-radius:3px;font-size:0.68rem;font-weight:500; }
.dmg-Phy  { background:rgba(180,180,160,.15);color:#c8c8b8; }
.dmg-Mag  { background:rgba(65,105,225,.2);color:#809fff; }
.dmg-Fire { background:rgba(200,80,30,.2);color:#ff9060; }
.dmg-Ligt { background:rgba(230,180,0,.2);color:#ffdd60; }
.dmg-Holy { background:rgba(220,180,80,.2);color:#ffe090; }
.ar-offhand-row { margin-top:8px;font-size:0.72rem;color:var(--text-sub); }

/* ═══════════════════════ COL 2 — BUILD SLOTS ═══════════════════════ */
.col-build {
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 1rem;
  background: var(--bg-deep);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.build-header {
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:1rem;
}
.build-title {
  font-family:'Cinzel',serif;font-size:1rem;font-weight:700;color:var(--gold-light);
}
.btn-clear {
  background:transparent;border:1px solid rgba(192,57,43,.3);color:var(--red);
  padding:4px 10px;border-radius:var(--r-sm);font-size:0.72rem;cursor:pointer;
  transition:var(--t);font-family:'Inter',sans-serif;
}
.btn-clear:hover { background:rgba(192,57,43,.1);border-color:var(--red); }

/* Slot Groups */
.slot-group { margin-bottom:1rem; }
.slot-group-label {
  font-size:0.62rem;color:var(--gold);text-transform:uppercase;
  letter-spacing:0.14em;margin-bottom:6px;font-weight:600;
  display:flex;align-items:center;gap:6px;
}
.slot-group-label::after { content:'';flex:1;height:1px;background:linear-gradient(to right,var(--gold-dim),transparent); }

.slot-row       { display:grid;grid-template-columns:1fr 1fr;gap:8px; }
.slot-row-4     { grid-template-columns:repeat(4,1fr); }

/* Equip Slots */
.equip-slot {
  background:var(--bg-panel);
  border:2px dashed rgba(255,200,80,0.12);
  border-radius:var(--r);
  padding:10px 8px;
  text-align:center;
  cursor:pointer;
  transition:var(--t);
  display:flex;flex-direction:column;align-items:center;
  gap:4px;min-height:80px;justify-content:center;
  position:relative;overflow:hidden;
}
.equip-slot::before {
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(201,168,76,.04),transparent);
  opacity:0;transition:var(--t);
}
.equip-slot:hover { border-color:var(--border-glow);background:var(--bg-hover); }
.equip-slot:hover::before { opacity:1; }
.equip-slot.active-slot {
  border-style:solid;border-color:var(--gold);
  box-shadow:0 0 16px rgba(201,168,76,.2),inset 0 0 16px rgba(201,168,76,.04);
  background:rgba(201,168,76,.05);
}
.equip-slot.filled {
  border-style:solid;border-color:rgba(201,168,76,.3);
  background:rgba(201,168,76,.04);
}
.equip-slot.req-fail-slot { border-color:rgba(192,57,43,.4); }

.equip-slot-sm { min-height:60px;padding:7px 4px; }

.slot-icon        { font-size:1.4rem;transition:var(--t); }
.equip-slot-sm .slot-icon { font-size:1rem; }
.slot-name        { font-size:0.65rem;color:var(--text-sub);text-transform:uppercase;letter-spacing:0.06em;line-height:1; }
.slot-empty-hint  { font-size:0.6rem;color:var(--text-dim); }
.slot-item-name   { font-size:0.72rem;font-weight:600;color:var(--text);line-height:1.2;text-align:center; }
.slot-item-ar     { font-size:0.7rem;color:var(--gold);font-family:'Cinzel',serif; }
.slot-item-cat    { font-size:0.6rem;color:var(--text-dim); }
.slot-remove      {
  position:absolute;top:4px;right:4px;
  width:16px;height:16px;border-radius:50%;
  background:rgba(192,57,43,.15);border:1px solid rgba(192,57,43,.3);
  color:var(--red);font-size:0.6rem;line-height:16px;text-align:center;
  cursor:pointer;opacity:0;transition:var(--t);
}
.equip-slot:hover .slot-remove { opacity:1; }
.slot-item-img {
  width:36px;height:36px;object-fit:contain;
  border-radius:4px;background:rgba(255,255,255,.04);
  border:1px solid var(--border);
}

/* ═══════════════════════ COL 3 — BROWSER ═══════════════════════ */
.col-browser {
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--bg-card);
}

.browser-header {
  padding:.75rem 1rem .5rem;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.browser-title { font-family:'Cinzel',serif;font-size:0.9rem;font-weight:700;color:var(--gold-light); }
.browser-hint  { font-size:0.68rem;color:var(--text-sub);margin-top:2px; }

/* Browser Tabs */
.browser-tabs {
  display:flex;border-bottom:1px solid var(--border);flex-shrink:0;padding:0 .75rem;
}
.browser-tab {
  background:transparent;border:none;border-bottom:2px solid transparent;
  color:var(--text-sub);padding:10px 14px 8px;font-size:0.75rem;
  cursor:pointer;transition:var(--t);font-family:'Inter',sans-serif;
  white-space:nowrap;
}
.browser-tab:hover { color:var(--text); }
.browser-tab.active { color:var(--gold-light);border-bottom-color:var(--gold); }

/* Filters */
.browser-filters { padding:.75rem;border-bottom:1px solid var(--border);flex-shrink:0;display:flex;flex-direction:column;gap:6px; }
.filter-row { display:flex;gap:6px;align-items:center; }

.search-input {
  flex:1;background:var(--bg-panel);border:1px solid var(--border);
  color:var(--text);border-radius:var(--r-sm);padding:8px 12px 8px 32px;
  font-size:0.8rem;font-family:'Inter',sans-serif;transition:var(--t);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235a5248' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:10px center;
}
.search-input:focus { outline:none;border-color:var(--gold-dim);box-shadow:0 0 10px rgba(201,168,76,.12); }
.search-input::placeholder { color:var(--text-dim); }

.filter-select {
  background:var(--bg-panel);border:1px solid var(--border);
  color:var(--text);border-radius:var(--r-sm);padding:7px 10px;
  font-size:0.75rem;cursor:pointer;font-family:'Inter',sans-serif;
}
.filter-select:focus { outline:none;border-color:var(--gold-dim); }
.filter-select option { background:var(--bg-panel); }

.filter-toggle-label {
  display:flex;align-items:center;gap:5px;font-size:0.72rem;
  color:var(--text-sub);cursor:pointer;white-space:nowrap;
}
.filter-toggle-label input { display:none; }
.tog {
  width:26px;height:14px;border-radius:7px;background:var(--bg-deep);
  border:1px solid var(--border);position:relative;transition:var(--t);flex-shrink:0;
}
.tog::after {
  content:'';position:absolute;left:2px;top:2px;width:8px;height:8px;
  border-radius:50%;background:var(--text-dim);transition:var(--t);
}
.filter-toggle-label input:checked + .tog { background:rgba(201,168,76,.18);border-color:var(--gold-dim); }
.filter-toggle-label input:checked + .tog::after { left:14px;background:var(--gold); }

.view-toggle {
  background:var(--bg-panel);border:1px solid var(--border);color:var(--text-sub);
  width:34px;height:34px;border-radius:var(--r-sm);cursor:pointer;font-size:1rem;
  display:flex;align-items:center;justify-content:center;transition:var(--t);flex-shrink:0;
}
.view-toggle:hover { border-color:var(--border-glow);color:var(--gold); }

/* ─── ITEM LIST (scroll area) ─── */
.browser-list {
  flex:1;overflow-y:auto;padding:.75rem;
  display:flex;flex-direction:column;gap:6px;
}

/* GRID VIEW */
.browser-list.view-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:8px;align-content:start;
}

/* Item Card (grid) */
.item-card {
  background:var(--bg-panel);border:1px solid var(--border);
  border-radius:var(--r);padding:10px;cursor:pointer;
  transition:var(--t);position:relative;
  animation:fadeUp .15s ease both;
  overflow:visible; /* don't clip DLC badge or contents */
}
.item-card::before {
  content:'';position:absolute;inset:0;border-radius:var(--r);
  background:linear-gradient(135deg,rgba(201,168,76,.04),transparent);
  opacity:0;transition:var(--t);pointer-events:none;
}
.item-card:hover { border-color:var(--border-glow);transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.4); }
.item-card:hover::before { opacity:1; }
.item-card.req-fail { opacity:.55;border-color:rgba(192,57,43,.2); }
.item-card.req-fail:hover { opacity:.8; }

/* Item Card — List row */
.item-card.list-row {
  display:grid;
  grid-template-columns:44px 1fr auto;
  align-items:center;
  gap:10px;
  padding:7px 10px;
  border-radius:var(--r-sm);
  min-height:52px;
}

.item-img {
  width:40px;height:40px;object-fit:contain;
  border-radius:5px;background:rgba(255,255,255,.04);
  border:1px solid var(--border);flex-shrink:0;
  display:block;
}
.item-img-ph {
  width:40px;height:40px;
  background:rgba(255,255,255,.03);border-radius:5px;
  border:1px solid var(--border);display:flex;align-items:center;
  justify-content:center;font-size:1.3rem;flex-shrink:0;
  line-height:1;
}
.item-img-ph.sm,.item-img.sm {
  width:40px;height:40px; /* keep consistent in list view */
}

.item-main-info { flex:1;min-width:0;overflow:hidden; }
.item-name {
  font-size:0.82rem;font-weight:600;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  line-height:1.2;
}
.item-cat  { font-size:0.63rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.06em;margin-top:1px; }

/* AR column in list view — fixed width so it never collapses */
.item-ar-col  { flex-shrink:0;text-align:right;min-width:48px; }
.item-ar-num  { font-family:'Cinzel',serif;font-size:1.05rem;color:var(--gold-light);font-weight:700;line-height:1; }
.item-ar-lbl  { font-size:0.55rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.06em; }

.item-tags { display:flex;gap:3px;flex-wrap:wrap;margin-top:4px; }

/* Scaling badges */
.sc { padding:1px 5px;border-radius:2px;font-size:0.58rem;font-weight:700;letter-spacing:0.04em;border:1px solid transparent; }
.sc-S { background:rgba(255,215,0,.18);color:#ffd700;border-color:rgba(255,215,0,.25); }
.sc-A { background:rgba(200,70,50,.18);color:#ff8060;border-color:rgba(200,70,50,.25); }
.sc-B { background:rgba(80,160,80,.18);color:#80c880;border-color:rgba(80,160,80,.25); }
.sc-C { background:rgba(65,105,225,.18);color:#809fff;border-color:rgba(65,105,225,.25); }
.sc-D { background:rgba(120,100,60,.18);color:#b8a060;border-color:rgba(120,100,60,.25); }
.sc-E { background:rgba(80,80,80,.18);color:#909090;border-color:rgba(80,80,80,.25); }

/* Req chips */
.rc { padding:1px 5px;border-radius:2px;font-size:0.6rem;border:1px solid var(--border);color:var(--text-sub); }
.rc.met   { border-color:rgba(39,174,96,.3);color:#60c880; }
.rc.unmet { border-color:rgba(192,57,43,.4);color:#ff7060;background:rgba(192,57,43,.08); }

/* DLC badge */
.dlc-badge {
  position:absolute;top:-1px;right:-1px;
  background:linear-gradient(135deg,#5a0a9a,#9b59b6);
  color:#fff;font-size:0.5rem;font-weight:700;
  padding:2px 6px;border-radius:0 var(--r-sm) 0 var(--r-sm);letter-spacing:0.06em;
  z-index:1;
}
.dlc-badge.inline {
  position:static;display:inline-block;margin-right:4px;
  border-radius:2px;
}

/* ═══════════════════════ LOADING ═══════════════════════ */
.loading-overlay {
  position:fixed;inset:0;background:rgba(8,8,16,0.97);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:20px;z-index:9999;transition:opacity .5s ease;
}
.loading-overlay.hidden { opacity:0;pointer-events:none; }
.loading-rune {
  width:70px;height:70px;border-radius:50%;
  border:2px solid transparent;border-top-color:var(--gold);border-right-color:var(--gold-dim);
  animation:spin 1s linear infinite;display:flex;align-items:center;justify-content:center;
}
.loading-rune::after {
  content:'☽';font-size:1.6rem;color:var(--gold);
  animation:spin 1s linear infinite reverse;
}
.loading-text { font-family:'Cinzel',serif;font-size:1rem;color:var(--gold-light);letter-spacing:0.2em;text-transform:uppercase; }
.loading-sub  { font-size:0.72rem;color:var(--text-sub);letter-spacing:0.1em; }
.loading-progress { width:220px;height:3px;background:var(--bg-card);border-radius:2px;overflow:hidden; }
.loading-progress-bar { height:100%;background:linear-gradient(to right,var(--gold-dim),var(--gold));border-radius:2px;transition:width .3s ease;width:0%; }

/* ═══════════════════════ TOAST ═══════════════════════ */
.toast-container { position:fixed;bottom:20px;right:20px;z-index:500;display:flex;flex-direction:column;gap:6px; }
.toast {
  background:var(--bg-panel);border:1px solid var(--border-glow);border-radius:var(--r);
  padding:10px 14px;font-size:0.75rem;color:var(--text);
  animation:slideIn .25s ease,fadeOut .3s ease 2.7s forwards;
  box-shadow:0 4px 20px rgba(0,0,0,.5);max-width:260px;
}
.toast.success { border-color:rgba(39,174,96,.35);color:#80c880; }
.toast.error   { border-color:rgba(192,57,43,.35);color:#ff8070; }

/* ═══════════════════════ EMPTY STATE ═══════════════════════ */
.empty-state {
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:3rem;color:var(--text-dim);text-align:center;font-size:.8rem;
  grid-column:1/-1;
}

/* ═══════════════════════ SCROLLBARS ═══════════════════════ */
::-webkit-scrollbar { width:5px;height:5px; }
::-webkit-scrollbar-track { background:var(--bg-deep); }
::-webkit-scrollbar-thumb { background:rgba(201,168,76,.2);border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--gold-dim); }

/* ═══════════════════════ ANIMATIONS ═══════════════════════ */
@keyframes spin    { to{transform:rotate(360deg);} }
@keyframes pulse   { 0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(.8);} }
@keyframes slideIn { from{opacity:0;transform:translateX(16px);}to{opacity:1;transform:translateX(0);} }
@keyframes fadeOut { to{opacity:0;transform:translateX(16px);} }
@keyframes fadeUp  { from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);} }

/* ═══════════════════════ RESPONSIVE ═══════════════════════ */
@media(max-width:1100px){
  main { grid-template-columns:260px 320px 1fr; }
}
@media(max-width:900px){
  body { overflow:auto; }
  main { grid-template-columns:1fr;height:auto;overflow:visible; }
  .col-summary,.col-build,.col-browser { height:auto;overflow:visible; }
  .browser-list { max-height:60vh; }
}