/* sc-ui.css — component + utility layer for the ServerCrate portal.
   Built entirely on portal.css tokens. Zero new colors, zero new fonts.
   Purpose: kill inline style= attributes and give repeated patterns real names,
   so conventions can't drift silently between pages.
   Load AFTER portal.css, BEFORE any page-specific css. */

/* ── PAGE HERO ───────────────────────────────────────────────
   Replaces: style="padding:24px 26px;margin-bottom:14px" (x5)
             style="flex-wrap:wrap;gap:14px;align-items:center" (x4)
             style="font-size:2.2rem;color:var(--blue);opacity:.55" (x3) */
.sc-page-hero{padding:24px 26px;margin-bottom:16px}
.sc-page-hero__row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px}
.sc-page-hero__icon{font-size:2.2rem;color:var(--blue);opacity:.55;flex-shrink:0}
.sc-page-hero__aside{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--muted)}
.sc-page-hero__aside .n{font-family:var(--mono);color:var(--blue);font-weight:600}

/* ── MICRO LABEL (uppercase eyebrow above a value) ───────────
   Replaces: style="font-size:.66rem;font-weight:700;text-transform:uppercase;
                     letter-spacing:.12em;color:var(--muted);margin-bottom:6px" */
.sc-label{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin-bottom:6px}
.sc-value{font-size:.95rem;font-weight:600;color:var(--ink)}
.sc-value--mono{font-family:var(--mono);color:var(--blue);font-weight:500;font-size:.82rem}

/* ── HELP / HINT TEXT ────────────────────────────────────────
   Replaces: style="display:block;font-size:.78rem;color:rgba(255,255,255,.6);margin-bottom:14px" */
.sc-help{display:block;font-size:.8rem;color:var(--muted);line-height:1.5}
.sc-help--block{margin-bottom:14px}

/* ── INLINE INPUT (the ad-hoc bordered input used in modals) ─
   Replaces: style="display:block;width:100%;margin-top:6px;padding:9px 11px;
                     background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);
                     border-radius:8px;color:#fff;font-size:.86rem" */
.sc-input{display:block;width:100%;margin-top:6px;padding:9px 11px;background:rgba(255,255,255,.04);
  border:1px solid var(--bdr2);border-radius:8px;color:var(--ink);font-size:.86rem;font-family:var(--font)}
.sc-input:focus{outline:none;border-color:var(--blue-d);background:rgba(255,255,255,.06)}

/* ── SPEC LIST (feature/spec bullets with a leading icon) ────
   Used by plan cards, server specs, anywhere a labelled list appears. */
.sc-specs{list-style:none;margin:14px 0 18px;display:flex;flex-direction:column;gap:9px}
.sc-specs li{font-size:.8rem;display:flex;align-items:center;gap:9px;color:var(--ink2)}
.sc-specs li i{color:var(--blue);font-size:.72rem;width:15px;text-align:center;flex-shrink:0}
.sc-specs li strong{color:var(--ink);font-weight:600}

/* ── SECTION LABEL (divider above a group) ───────────────────*/
.sc-sec-label{font-size:.72rem;font-weight:700;letter-spacing:.09em;color:var(--muted);margin-bottom:12px}
.sc-sec-intro{font-size:.84rem;color:var(--muted);margin:-4px 0 16px}

/* ── SPEC ROW (horizontal label/value group, e.g. current plan) ─*/
.sc-specrow{display:flex;flex-wrap:wrap;gap:34px;row-gap:18px}

/* ── SPACING UTILITIES ───────────────────────────────────────
   Covers the long tail: margin-bottom:6px (x12), margin-top:16px (x4), etc.
   Scale matches the values already in use across the portal. */
.mt-0{margin-top:0}   .mb-0{margin-bottom:0}
.mt-4{margin-top:4px} .mb-4{margin-bottom:4px}
.mt-6{margin-top:6px} .mb-6{margin-bottom:6px}
.mt-8{margin-top:8px} .mb-8{margin-bottom:8px}
.mt-10{margin-top:10px}.mb-10{margin-bottom:10px}
.mt-12{margin-top:12px}.mb-12{margin-bottom:12px}
.mt-14{margin-top:14px}.mb-14{margin-bottom:14px}
.mt-16{margin-top:16px}.mb-16{margin-bottom:16px}
.mt-18{margin-top:18px}.mb-18{margin-bottom:18px}
.mt-20{margin-top:20px}.mb-20{margin-bottom:20px}
.mt-24{margin-top:24px}.mb-24{margin-bottom:24px}
.mr-8{margin-right:8px}
.p-16{padding:16px 18px} .p-18{padding:18px} .p-24{padding:24px 26px}

/* ── DISPLAY / LAYOUT UTILITIES ──────────────────────────────
   Replaces: style="display:none" (x12) */
.is-hidden{display:none !important}
.sc-row{display:flex;align-items:center;gap:12px}
.sc-row--between{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sc-col{display:flex;flex-direction:column}
.sc-fill{flex:1;min-width:0}
.sc-nowrap{white-space:nowrap}

/* ── SKELETON SIZES ──────────────────────────────────────────
   Replaces: style="height:78px;width:100%;border-radius:10px" (x4)
             style="height:28px;margin-bottom:8px" (x4)
             style="height:44px;width:60%;margin:12px 0" (x3) */
.skel--tile{height:78px;width:100%;border-radius:10px}
.skel--stat{height:28px;margin-bottom:8px}
.skel--title{height:44px;width:60%;margin:12px 0}

/* ── GRID PRESETS ────────────────────────────────────────────*/
.sc-grid-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.sc-grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:14px}

/* ── SUBSCRIPTION BLOCKS (billing: one per active subscription) ──*/
.sc-subblock{padding:20px 0;border-top:1px solid var(--bdr)}
.sc-subblock:first-child{padding-top:0;border-top:0}
.sc-subblock:last-child{padding-bottom:0}
.sc-subhead{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.sc-subhead__l{display:flex;align-items:center;gap:11px;min-width:0}
.sc-subname{font-size:1.2rem;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.sc-subkind{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  background:rgba(255,255,255,.05);padding:3px 8px;border-radius:5px}
.sc-subprice{line-height:1;white-space:nowrap;font-size:1.45rem;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.sc-subprice span{font-size:.78rem;color:var(--muted);font-weight:500;margin-left:1px}
.sc-subactions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}

/* sc-security-devibe-2026-07-22 */
.sc-help-sm{font-size:.85rem;color:var(--muted);line-height:1.6}
.sc-hint{font-size:.82rem;color:var(--muted);margin:-2px 0 12px;line-height:1.55}
.sc-callout{background:var(--bg3);border:1px solid var(--bdr);border-radius:10px;padding:12px 16px;font-size:.875rem;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.sc-fs-sm{font-size:.875rem}
.sc-qr-box{text-align:center;margin:16px 0}
.sc-qr-frame{display:inline-block;background:#fff;padding:12px;border-radius:12px}
.sc-secret{font-size:.78rem;letter-spacing:.08em;word-break:break-all;filter:blur(5px);user-select:none;cursor:pointer}
.sc-secret__cta{font-size:.7rem;color:var(--blue);filter:none}
.sc-otp{text-align:center;font-size:1.3rem;letter-spacing:.2em}
.text-muted{color:var(--muted)}
.w-140{width:140px}
.p-14{padding:14px}

/* sc-dashboard-vps-2026-07-22 */
.sc-server-strip{display:flex;align-items:center;gap:12px;padding:14px 20px;margin-bottom:14px;text-decoration:none}
.sc-server-strip__icon{width:34px;height:34px;border-radius:9px;background:rgba(137,196,225,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sc-server-strip__icon i{color:var(--blue)}
.sc-server-strip__main{flex:1;min-width:0}
.sc-server-strip__title{font-weight:600;color:var(--ink);font-size:.9rem}
.sc-server-strip__sub{font-size:.8rem;color:var(--muted)}
.sc-server-strip__chev{color:var(--muted);opacity:.5;font-size:.85rem}

/* sc-dashboard-devibe-2026-07-22 */
.text-blue{color:var(--blue)}
.text-gold{color:var(--gold)}
.text-grn{color:var(--grn)}
.text-purple{color:var(--purple)}
.text-red{color:var(--red)}
.text-ink2{color:var(--ink2)}
.sc-link{color:var(--blue);font-weight:600}
.sc-link-amber{color:var(--amber);text-decoration:underline;font-weight:600}
.sc-banner-accent{margin-bottom:14px;border-color:var(--blue);box-shadow:0 0 0 1px var(--blue-dim,rgba(137,196,225,.25))}
.sc-banner-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.sc-banner-title{font-size:1.05rem;margin:0;color:var(--ink2)}
.sc-banner-text{font-size:.86rem;color:var(--muted);margin:0 0 12px 0;line-height:1.5}
.sc-banner-fine{font-size:.76rem;color:var(--muted);margin:0 0 14px 0;line-height:1.5}
.sc-banner-code{margin:0 0 10px 0}
.sc-btn-row{display:flex;gap:8px;flex-wrap:wrap}
.sc-vitals--fit{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.sc-vital__ico{margin-right:6px}
.sc-vital__meta{text-transform:none;letter-spacing:0;font-weight:600;color:var(--ink2)}
.sc-vital__meta--soft{font-weight:500;color:var(--muted)}
.sc-vital__unit{font-size:.85rem;font-weight:600;color:var(--muted)}
.sc-section__link{text-decoration:none;color:var(--blue);font-weight:600;font-size:.78rem}
.sc-action__icon--gold{background:var(--gold-dim);color:var(--gold)}
.sc-action__icon--grn{background:var(--grn-dim);color:var(--grn)}
.sc-action__icon--pur{background:var(--pur-dim);color:var(--purple)}

/* sc-account-devibe-2026-07-22 */
.h-32{height:32px}
.h-6{height:6px}
.is-dim{opacity:.5}
.sc-profile-name--lg{font-size:1.35rem;letter-spacing:-.02em}
.sc-stat__head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.sc-eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sc-stat__pct{font-weight:600;color:var(--ink2)}
.sc-stat__value{font-size:1.6rem;font-weight:800;color:var(--ink);letter-spacing:-.025em;line-height:1;margin-bottom:10px}
.sc-stat__note{font-size:.78rem;color:var(--muted);margin-bottom:16px}
.sc-field-label{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:6px}
.sc-code-chip{font-size:.86rem;color:var(--ink);background:var(--bg3);padding:3px 9px;border-radius:6px}
.sc-field-value{font-size:.95rem;font-weight:600;color:var(--ink)}
.sc-meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px}

/* sc-vault-servers-devibe-2026-07-22 */
.mt-30{margin-top:30px}
.mw-500{max-width:500px}
.mw-520{max-width:520px}
.op-40{opacity:.4}
.w-80{width:80px}
.w-120{width:120px}
.w-220{width:220px}
.h-12{height:12px}
.h-15{height:15px}
.flex-gap-10{display:flex;gap:10px}
.sc-skel-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin:14px 0}
.sc-modal-desc{font-size:.84rem;color:var(--muted);margin-bottom:14px;line-height:1.5}
.sc-token-block{margin-bottom:16px;font-size:.8rem;min-height:44px;word-break:break-all;white-space:pre-wrap}
.sc-label-opt{color:var(--muted);font-weight:400;text-transform:none}

/* sc-rename-ui-2026-07-22 */
.flex-1{flex:1}
.sc-rename-btn{background:none;border:0;color:var(--muted);cursor:pointer;font-size:.78rem;padding:2px 7px;border-radius:6px;vertical-align:middle}
.sc-rename-btn:hover{color:var(--blue);background:var(--blue-dim)}
.sc-rename-input{background:var(--bg3);border:1px solid var(--blue);border-radius:8px;color:var(--ink);font-size:1rem;font-weight:600;padding:4px 10px;width:230px;outline:none;font-family:inherit}

/* sc-vps-cancel-ui-2026-07-22 */
.srv-cancel-zone{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--bdr)}
.sc-danger-link{color:var(--red)}
.sc-danger-link:hover:not(:disabled){color:#fff;background:rgba(248,113,113,.15);border-color:rgba(248,113,113,.4)}
.sc-cancel-note{font-size:.8rem;color:var(--gold);display:inline-flex;align-items:center;gap:7px}

/* sc-notification-prefs-2026-07-22 */
.sc-pref-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--bdr)}
.sc-pref-row:last-child{border-bottom:0}
.sc-pref-row:first-child{padding-top:0}
.sc-pref-row__main{min-width:0}
.sc-pref-row__title{font-size:.92rem;font-weight:600;color:var(--ink)}
.sc-pref-row__desc{font-size:.78rem;color:var(--muted);margin-top:2px}
.sc-switch{position:relative;width:40px;height:22px;flex-shrink:0;display:inline-block}
.sc-switch input{opacity:0;width:100%;height:100%;margin:0;cursor:pointer;position:absolute;inset:0;z-index:1}
.sc-switch__track{position:absolute;inset:0;background:var(--bg3);border:1px solid var(--bdr);border-radius:999px;transition:background .15s,border-color .15s}
.sc-switch__thumb{position:absolute;top:3px;left:3px;width:16px;height:16px;background:var(--muted);border-radius:50%;transition:transform .15s,background .15s}
.sc-switch input:checked ~ .sc-switch__track{background:rgba(110,168,255,.25);border-color:var(--blue)}
.sc-switch input:checked ~ .sc-switch__thumb{transform:translateX(18px);background:var(--blue)}
.sc-pref-lock{font-family:var(--brand-mono,monospace);font-size:.64rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--grn);border:1px solid rgba(46,204,113,.3);padding:3px 9px;border-radius:999px;flex-shrink:0}


/* sc-pref-num: threshold number inputs in the notifications card (2026-07-23) */
.sc-pref-num{display:inline-flex;align-items:center;gap:8px;flex-shrink:0}
.sc-pref-num input[type=number]{
  width:84px;padding:8px 10px;text-align:right;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:8px;color:inherit;
  font-family:var(--mono,inherit);font-size:.9rem;
  font-variant-numeric:tabular-nums;
  transition:border-color .15s ease,background .15s ease;
}
.sc-pref-num input[type=number]:hover{border-color:rgba(255,255,255,.18)}
.sc-pref-num input[type=number]:focus{
  outline:none;border-color:rgba(110,168,255,.55);
  background:rgba(110,168,255,.06);
}
.sc-pref-num input[type=number]::placeholder{color:rgba(255,255,255,.28)}
.sc-pref-num__unit{
  font-family:var(--mono,inherit);font-size:.72rem;
  letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.38);min-width:38px;
}


/* sc-billing-devibe: modal/field components + utils (2026-07-23) */
.mb-6{margin-bottom:6px}.mb-16{margin-bottom:16px}.mt-16{margin-top:16px}
.w-100{width:100%}.w-160{width:160px}.h-48{height:48px}.h-100{height:100px}
.sc-card-lg{padding:24px 26px}
.sc-wrap-14{flex-wrap:wrap;gap:14px;align-items:center}
.sc-icon-hero{font-size:2.2rem;color:var(--blue);opacity:.55}
.sc-intro{font-size:.85rem;color:rgba(255,255,255,.7);line-height:1.6;margin-bottom:14px}
.sc-grid-fill{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:18px;margin-bottom:18px}
.skel-price{height:44px;width:60%;margin:12px 0}
.sc-modal{position:fixed;inset:0;z-index:9999;align-items:center;justify-content:center}
.sc-modal__scrim{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(4px)}
.sc-modal__panel{position:relative;background:#0c1219;border:1px solid rgba(255,255,255,.08);border-radius:14px;max-width:520px;width:94%;padding:26px 28px;box-shadow:0 30px 80px rgba(0,0,0,.6);max-height:92vh;overflow-y:auto}
.sc-modal__close{position:absolute;top:12px;right:14px;background:none;border:0;color:rgba(255,255,255,.55);font-size:1.6rem;cursor:pointer;line-height:1}
.sc-modal__title{font-size:1.15rem;font-weight:700;margin-bottom:6px;color:#fff}
.sc-modal__sub{font-size:.82rem;color:rgba(255,255,255,.55);margin-bottom:18px;line-height:1.5}
.sc-field{display:block;font-size:.78rem;color:rgba(255,255,255,.6);margin-bottom:14px}
.sc-field__input{display:block;width:100%;margin-top:6px;padding:9px 11px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:8px;color:#fff;font-size:.86rem}
.sc-field__ta{font-family:inherit;resize:vertical}
.sc-err-box{font-size:.8rem;color:#ff6b6b;background:rgba(255,107,107,.08);border:1px solid rgba(255,107,107,.25);border-radius:6px;padding:10px 12px;margin-bottom:14px}


/* sc-support-devibe: list/detail utils (2026-07-23) */
.mb-10{margin-bottom:10px}.p-18{padding:18px}.p-30{padding:30px}
.sc-pad-list{padding:8px 16px 16px}
.sc-card-flush{padding:0;overflow:hidden}
.sc-spin-wrap{padding:30px;text-align:center}
.sc-spin{font-size:1.4rem;color:var(--blue)}
.sc-btn-xs{padding:4px 12px;font-size:.72rem}


/* sc-auth-devibe: auth pages components + utils (2026-07-23) */
.m-0{margin:0}.mt-2{margin-top:2px}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mb-18{margin-bottom:18px}
.c-ink{color:var(--ink)}.c-blue{color:var(--blue)}
.sc-label-split{display:flex;justify-content:space-between}
.sc-link-sm{color:var(--blue);font-size:.75rem;font-weight:600}
.sc-link-muted{color:var(--muted)}
.sc-totp-head{text-align:center;margin-bottom:22px}
.sc-icon-badge{width:52px;height:52px;background:var(--blue-dim);border:1px solid rgba(137,196,225,.2);border-radius:14px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:1.3rem;color:var(--blue)}
.sc-otp-lg{text-align:center;font-family:var(--mono);font-size:1.5rem;letter-spacing:.2em;padding:14px}
.sc-info-banner{background:var(--blue-dim);border:1px solid rgba(137,196,225,.18);border-radius:10px;padding:10px 14px;font-size:.82rem;color:var(--blue);display:flex;align-items:center;gap:8px}
.sc-info-banner--note{margin-top:16px;font-size:.8rem;text-align:left;align-items:flex-start}
.sc-opt{color:var(--muted);font-weight:400}
.sc-done-wrap{text-align:center;padding:20px 0}
.sc-done-emoji{font-size:2.2rem;margin-bottom:14px}
.sc-done-title{font-size:1.2rem;font-weight:800;margin-bottom:8px}
.sc-done-text{font-size:.875rem;color:var(--muted);line-height:1.6}
.sc-done-fine{font-size:.8rem;color:var(--muted);margin-top:14px}
.sc-done-fine--xs{font-size:.78rem}


/* sc-dashboard-devibe: KPI skeleton utils (2026-07-23) */
.sc-card-md{padding:16px 18px}
.sc-grid-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:14px}
.skel-title{height:32px;width:60%;margin-bottom:10px}
.skel-kpi{height:28px;margin-bottom:8px}


/* sc-ledger-components-p1: cycle toggle + notif items (2026-07-23) */
.sc-cycle-wrap{display:flex;justify-content:center;margin-bottom:22px}
.sc-cycle{display:inline-flex;align-items:center;gap:3px;background:var(--bg2,#10141b);border:1px solid var(--line,#1c222c);border-radius:5px;padding:3px}
.sc-cycle__btn{border:0;cursor:pointer;font-family:var(--mono,'Geist Mono',monospace);font-size:.7rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:8px 16px;border-radius:3px;background:transparent;color:var(--ink3,#5c6673);transition:background .15s,color .15s}
.sc-cycle__btn.is-active{background:var(--accent,#6ea8ff);color:#0a0d12}
.sc-cycle__tag{font-weight:700;margin-left:7px;padding:2px 6px;border-radius:3px;font-size:.58rem;letter-spacing:.06em;background:rgba(62,207,142,.12);color:#3ecf8e}
.sc-cycle__btn.is-active .sc-cycle__tag{background:rgba(10,13,18,.18);color:#0a0d12}

.notif-empty{padding:40px 20px;text-align:center;color:var(--ink3,#5c6673);font-size:.82rem}
.notif-empty i{font-size:1.6rem;opacity:.3;display:block;margin-bottom:10px}
.notif-item{position:relative;padding:13px 38px 13px 16px;border-bottom:1px solid var(--line,#1c222c);cursor:default;transition:background .12s}
.notif-item.is-unread{background:rgba(137,196,225,.05)}
.notif-item.has-link{cursor:pointer}
.notif-item:hover{background:rgba(137,196,225,.08)}
.notif-item:hover .notif-del{opacity:.7}
.notif-item__bar{position:absolute;left:0;top:0;bottom:0;width:3px}
.notif-del{position:absolute;top:10px;right:8px;width:22px;height:22px;background:transparent;border:0;color:var(--ink3,#5c6673);cursor:pointer;border-radius:4px;font-size:.72rem;opacity:0;transition:opacity .12s,background .12s;display:flex;align-items:center;justify-content:center}
.notif-item__row{display:flex;gap:11px;align-items:flex-start}
.notif-item__icon{width:32px;height:32px;border-radius:6px;background:rgba(137,196,225,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.82rem;margin-top:1px}
.notif-item__main{flex:1;min-width:0}
.notif-item__head{display:flex;justify-content:space-between;gap:8px;margin-bottom:3px;align-items:baseline}
.notif-item__title{font-weight:500;font-size:.84rem;color:var(--ink,#e8ecf2);line-height:1.35}
.notif-item.is-unread .notif-item__title{font-weight:700}
.notif-item__time{font-family:var(--mono,'Geist Mono',monospace);font-size:.66rem;color:var(--ink3,#5c6673);white-space:nowrap;flex-shrink:0;margin-right:20px;font-variant-numeric:tabular-nums}
.notif-item__body{font-size:.78rem;color:var(--ink2,#9aa4b2);line-height:1.5;word-wrap:break-word;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}