/*
 * Ensure the HTML `hidden` attribute always wins regardless of display rules
 * defined below. Without this, display:flex on .msa-loading overrides the
 * browser's built-in [hidden]{display:none} and shows the spinner on page load.
 */
[hidden] { display: none !important; }

/*
 * MLS Genie SEO Audit — Plugin Styles
 *
 * This stylesheet ONLY defines plugin-specific components.
 * It deliberately uses the mlsgenie.com theme's CSS variables
 * (--teal, --navy, --navy-deep, --font, --text, --border, etc.)
 * so the tool looks native to the site without duplicating rules.
 *
 * The theme's .btn, .btn-primary, .btn-lg, .btn-ghost, .btn-outline-w,
 * .hero, .hero-inner, .hero-eyebrow, .inner, .sec-title, .sec-sub, .eyebrow
 * classes are used directly in the templates — no re-definition here.
 */

/* ============================================================
   INPUT PAGE — Hero overrides
============================================================ */

/* Center the hero content for the tool page (theme uses a 2-col grid) */
.msa-input-hero .hero-inner.msa-hero-center {
    grid-template-columns: 1fr;
    max-width: 720px;
    text-align: center;
}

.msa-hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ============================================================
   URL Input form
============================================================ */
.msa-url-form {
    width: 100%;
    max-width: 580px;
    margin: 8px 0 0;
}

.msa-url-row {
    display: flex;
    gap: 8px;
    width: 100%;
}

.msa-url-input {
    flex: 1;
    padding: 13px 18px;
    font-size: 16px;
    font-family: var(--font);
    background: rgba(255, 255, 255, .08);
    border: 1.5px solid rgba(255, 255, 255, .18);
    border-radius: 10px;
    color: #fff;
    outline: none;
    transition: border-color .2s, background .2s;
    min-width: 0;
}

.msa-url-input::placeholder { color: rgba(255, 255, 255, .38); }

.msa-url-input:focus {
    border-color: var(--teal);
    background: rgba(255, 255, 255, .12);
}

.msa-run-btn { flex-shrink: 0; }

.msa-arrow { display: inline-block; transition: transform .15s; }
.msa-run-btn:hover .msa-arrow { transform: translateX(3px); }

.msa-url-hint {
    font-size: 16px;
    color: rgba(255, 255, 255, .35);
    margin: 10px 0 0;
    text-align: center;
}

/* ============================================================
   Loading / spinner
============================================================ */
.msa-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 0 8px;
    width: 100%;
}

.msa-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255, 255, 255, .15);
    border-top-color: var(--teal);
    border-radius: 50%;
    animation: msaSpin .75s linear infinite;
    margin-bottom: 14px;
}

@keyframes msaSpin { to { transform: rotate(360deg); } }

.msa-loading-msg {
    font-size: 16px;
    color: rgba(255, 255, 255, .6);
    font-weight: 500;
    margin: 0 0 14px;
    min-height: 20px;
}

.msa-progress {
    width: 220px;
    height: 3px;
    background: rgba(255, 255, 255, .12);
    border-radius: 2px;
    overflow: hidden;
}

.msa-progress-fill {
    height: 100%;
    background: var(--teal);
    border-radius: 2px;
    animation: msaProg 3.8s ease-in-out infinite;
}

@keyframes msaProg {
    0%   { width: 3%; }
    55%  { width: 78%; }
    100% { width: 91%; }
}

/* ============================================================
   Notice / error
============================================================ */
.msa-notice {
    width: 100%;
    max-width: 580px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 16px;
    line-height: 1.5;
    margin: 12px 0 0;
}

.msa-notice--warn {
    background: var(--warning-bg, #fffbeb);
    color: var(--warning, #b45309);
    border: 1px solid #fde68a;
}

.msa-notice--error {
    background: var(--danger-bg, #fef2f2);
    color: var(--danger, #dc2626);
    border: 1px solid var(--danger-border, #fecaca);
}

/* ============================================================
   How it works strip (input page bottom)
============================================================ */
.msa-how-strip {
    background: var(--bg, #f9fafb);
    padding: 48px 24px;
    border-top: 1px solid var(--border, #e5e7eb);
}

.msa-how-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    text-align: center;
}

.msa-how-num {
    width: 32px;
    height: 32px;
    background: var(--teal-bg, #e8f4fb);
    color: var(--teal, #107dbd);
    border-radius: 50%;
    font-size: 16px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
}

.msa-how-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--navy, #1a2633);
    margin-bottom: 4px;
}

.msa-how-sub {
    font-size: 16px;
    color: var(--text-sec, #4b5563);
    line-height: 1.5;
}

/* ============================================================
   REPORT PAGE — Banner
============================================================ */
.msa-report-banner {
    background: linear-gradient(135deg, var(--navy-deep, #0f172a) 0%, #1a2f4a 100%);
    padding: 32px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.msa-report-banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.msa-report-domain {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.025em;
    margin-bottom: 4px;
}

.msa-report-url {
    font-size: 16px;
    color: rgba(255, 255, 255, .45);
    margin-bottom: 6px;
    word-break: break-all;
}

.msa-report-updated {
    font-size: 16px;
    color: rgba(255, 255, 255, .35);
}

.msa-report-banner-right { flex-shrink: 0; }

.msa-score-ring-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.msa-score-grade {
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
}

/* ============================================================
   SCOPE DISCLAIMER BAR
============================================================ */
.msa-disclaimer-bar {
    background: #fffbeb;
    border-bottom: 1px solid #fde68a;
    padding: 14px 0;
}

.msa-disclaimer-inner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 16px;
    color: #78350f;
    line-height: 1.6;
}

.msa-disclaimer-inner svg {
    flex-shrink: 0;
    margin-top: 3px;
    color: #d97706;
}

.msa-disclaimer-inner strong {
    font-weight: 700;
    color: #92400e;
}

@media (max-width: 600px) {
    .msa-disclaimer-bar {
        padding: 20px;
    }
}

/* ============================================================
   REPORT PAGE — Body layout
============================================================ */
.msa-report-page {
    background: var(--bg, #f9fafb);
    padding: 24px 20px 64px;
    min-height: 400px;
}

.msa-report-inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ============================================================
   Refresh bar
============================================================ */
.msa-refresh-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    padding: 12px 16px;
    flex-wrap: wrap;
}

.msa-refresh-ready  { font-size: 16px; color: var(--success, #059669); font-weight: 600; }
.msa-refresh-locked { font-size: 16px; color: var(--text-sec, #4b5563); }

.msa-refresh-bar-right {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.msa-refresh-loading {
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    padding: 32px;
    text-align: center;
}

.msa-refresh-loading .msa-spinner {
    border-color: var(--border, #e5e7eb);
    border-top-color: var(--teal, #107dbd);
    margin: 0 auto 12px;
}

.msa-refresh-loading .msa-loading-msg {
    color: var(--text-sec, #4b5563);
}

/* ============================================================
   Key signals strip
============================================================ */
.msa-signals-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.msa-signal {
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    padding: 12px 14px;
}

.msa-signal-label {
    font-size: 14px;
    color: var(--text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 4px;
}

.msa-signal-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--navy, #1a2633);
}

/* ============================================================
   Category score grid
============================================================ */
.msa-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.msa-cat-card {
    background: #fff;
    border: 1.5px solid var(--border, #e5e7eb);
    border-radius: 10px;
    padding: 14px 15px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    user-select: none;
}

.msa-cat-card:hover   { border-color: var(--teal, #107dbd); }
.msa-cat-card.is-open { border-color: var(--teal, #107dbd); background: var(--teal-bg-light, #f0f7fd); }

.msa-cat-label {
    font-size: 14px;
    color: var(--text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 6px;
}

.msa-cat-score {
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
}

.msa-mini-bar {
    height: 3px;
    background: var(--border, #e5e7eb);
    border-radius: 2px;
    margin-top: 9px;
    overflow: hidden;
}

.msa-mini-fill {
    height: 100%;
    border-radius: 2px;
    transition: width .5s;
}

/* ============================================================
   Category detail panel
============================================================ */
.msa-detail-panel {
    background: #fff;
    border: 1.5px solid var(--teal, #107dbd);
    border-radius: 12px;
    overflow: hidden;
    animation: msaSlide .18s ease;
}

@keyframes msaSlide {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: translateY(0); }
}

.msa-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 18px;
    background: var(--teal-bg-light, #f0f7fd);
    border-bottom: 1px solid var(--teal-border, #b3d9f0);
}

.msa-detail-title { font-size: 16px; font-weight: 700; color: var(--navy, #1a2633); }
.msa-detail-score { font-size: 16px; color: var(--teal, #107dbd); font-weight: 600; }

.msa-audit-row {
    display: flex;
    gap: 11px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--bg, #f9fafb);
    align-items: flex-start;
}

.msa-audit-row:last-child { border-bottom: none; }

.msa-audit-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    flex-shrink: 0;
    margin-top: 2px;
}

.msa-audit-icon--pass { background: var(--success-bg, #ecfdf5);  color: var(--success, #059669); }
.msa-audit-icon--warn { background: var(--warning-bg, #fffbeb);  color: var(--warning, #b45309); }
.msa-audit-icon--fail { background: var(--danger-bg,  #fef2f2);  color: var(--danger,  #dc2626); }

.msa-audit-title  { font-size: 16px; color: var(--text, #111827); line-height: 1.5; }
.msa-audit-detail { font-size: 16px; color: var(--text-sec, #4b5563); margin-top: 3px; line-height: 1.5; }

/* ============================================================
   Priority fixes
============================================================ */
.msa-prio-block {
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    padding: 18px 20px;
}

.msa-block-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--navy, #1a2633);
    margin: 0 0 14px;
    letter-spacing: -.01em;
}

.msa-prio-row {
    display: flex;
    gap: 11px;
    padding: 9px 0;
    border-bottom: 1px solid var(--bg, #f9fafb);
    align-items: flex-start;
}

.msa-prio-row:last-child { border-bottom: none; }

.msa-prio-badge {
    font-size: 14px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 999px;
    flex-shrink: 0;
    margin-top: 1px;
    letter-spacing: .04em;
}

.msa-prio-p1 { background: var(--danger-bg,  #fef2f2); color: var(--danger,  #dc2626); }
.msa-prio-p2 { background: var(--warning-bg, #fffbeb); color: var(--warning, #b45309); }
.msa-prio-p3 { background: var(--success-bg, #ecfdf5); color: var(--success, #059669); }

.msa-prio-title  { font-size: 16px; font-weight: 600; color: var(--text, #111827); line-height: 1.5; }
.msa-prio-detail { font-size: 16px; color: var(--text-sec, #4b5563); margin-top: 3px; line-height: 1.5; }

/* ============================================================
   Schema pill strip
============================================================ */
.msa-schema-strip {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 12px 0 0;
}

.msa-schema-label { font-size: 14px; color: var(--text-muted, #6b7280); flex-shrink: 0; }

.msa-schema-pill {
    font-size: 14px;
    font-weight: 600;
    background: var(--teal-bg, #e8f4fb);
    color: var(--teal-deeper, #0a5a8a);
    border: 1px solid var(--teal-border, #b3d9f0);
    border-radius: 999px;
    padding: 2px 10px;
}

/* ============================================================
   CTA block
============================================================ */
.msa-cta-block {
    background: linear-gradient(135deg, var(--navy-deep, #0f172a) 0%, #1a2f4a 100%);
    border-radius: 14px;
    padding: 28px 32px;
    text-align: center;
}

.msa-cta-lead {
    color: rgba(255, 255, 255, .7);
    font-size: 16px;
    margin: 0 0 16px;
}

/* ============================================================
   Share button + dropdown (in report banner)
============================================================ */
.msa-share-wrap {
    position: relative;
    margin-top: 12px;
}

.msa-share-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 16px;
    font-weight: 600;
    font-family: var(--font);
    color: rgba(255, 255, 255, .85);
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
}

.msa-share-trigger:hover {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
}

.msa-share-trigger[aria-expanded="true"] {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .4);
    color: #fff;
}

.msa-share-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
    min-width: 190px;
    z-index: 200;
    overflow: hidden;
    animation: msaMenuIn .12s ease;
}

@keyframes msaMenuIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.msa-share-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--font);
    color: var(--text, #111827);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background .1s;
    border-bottom: 1px solid var(--bg, #f9fafb);
}

.msa-share-option:last-child { border-bottom: none; }
.msa-share-option:hover      { background: var(--teal-bg-light, #f0f7fd); color: var(--teal, #107dbd); }
.msa-share-option svg        { flex-shrink: 0; opacity: .7; }
.msa-share-option:hover svg  { opacity: 1; }

.msa-share-option--copied {
    color: var(--success, #059669) !important;
}
.msa-share-option--copied svg { opacity: 1; }

/* ============================================================
   Responsive
============================================================ */
@media ( max-width: 680px ) {
    .msa-input-hero .hero-inner.msa-hero-center { padding: 0 16px; }
    .msa-url-row     { flex-direction: column; }
    .msa-run-btn     { width: 100%; }
    .msa-how-inner   { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .msa-signals-strip { grid-template-columns: repeat(2, 1fr); }
    .msa-cat-grid    { grid-template-columns: repeat(2, 1fr); }
    .msa-report-banner-inner { flex-direction: column; align-items: flex-start; }
    .msa-report-banner-right { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
    .msa-share-menu { right: auto; left: 0; }
    .msa-refresh-bar { flex-direction: column; align-items: flex-start; }
    .msa-share-strip { flex-direction: column; align-items: flex-start; }
    .msa-share-input { width: 100%; }
}

@media ( max-width: 400px ) {
    .msa-cat-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Admin Script Advisor Panel ─────────────────────────────────────────────── */
.msa-admin-panel {
    margin: 24px 0 8px;
    border: 1px solid rgba(16,125,189,.3);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.msa-admin-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    background: rgba(16,125,189,.07);
    border-bottom: 1px solid rgba(16,125,189,.15);
    flex-wrap: wrap;
}

.msa-admin-panel__title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
}

.msa-admin-badge {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    background: rgba(16,125,189,.15);
    color: #107dbd;
    border: 1px solid rgba(16,125,189,.3);
    border-radius: 999px;
    padding: 2px 8px;
}

.msa-admin-panel__count {
    font-size: 16px;
    font-weight: 600;
    color: #dc2626;
}

.msa-admin-panel__desc {
    margin: 0;
    padding: 14px 20px 10px;
    font-size: 16px;
    color: #475569;
    line-height: 1.6;
    border-bottom: 1px solid #f1f5f9;
}

.msa-script-copy-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    flex-wrap: wrap;
}

.msa-script-handles {
    flex: 1;
    font-size: 14px;
    color: #0f172a;
    font-family: monospace;
    word-break: break-all;
    line-height: 1.6;
}

.msa-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 16px;
    font-weight: 600;
    color: #107dbd;
    background: #fff;
    border: 1px solid rgba(16,125,189,.35);
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
    flex-shrink: 0;
}

.msa-copy-btn:hover { background: rgba(16,125,189,.06); }

.msa-copy-confirm {
    font-size: 16px;
    font-weight: 600;
    color: #059669;
}

.msa-script-table {
    max-height: 320px;
    overflow-y: auto;
}

/* Script Advisor — split sections */
.msa-script-section {
    margin-top: 16px;
}

.msa-script-section--locked {
    margin-top: 20px;
    opacity: 0.75;
}

.msa-script-section__header {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 700;
    padding: 8px 12px;
    border-radius: 6px 6px 0 0;
    margin-bottom: 0;
}

.msa-script-section__header--safe {
    background: #ecfdf5;
    color: #065f46;
}

.msa-script-section__header--locked {
    background: #f3f4f6;
    color: #4b5563;
}

.msa-script-section__count {
    margin-left: auto;
    font-size: 14px;
    font-weight: 600;
    background: rgba(0,0,0,.08);
    border-radius: 10px;
    padding: 1px 8px;
}

.msa-script-row--safe .msa-script-handle {
    color: var(--success, #059669);
}

.msa-script-row--locked .msa-script-handle {
    color: var(--text-sec, #6b7280);
}

.msa-script-section__empty {
    font-size: 16px;
    color: var(--text-sec, #6b7280);
    padding: 12px 0;
    margin: 0;
}

.msa-script-table__head {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 12px;
    padding: 8px 20px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #64748b;
    position: sticky;
    top: 0;
}

.msa-script-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 12px;
    padding: 8px 20px;
    border-bottom: 1px solid #f1f5f9;
    align-items: center;
}

.msa-script-row:last-child { border-bottom: none; }
.msa-script-row:nth-child(even) { background: #fafafa; }

.msa-script-handle {
    font-size: 16px;
    font-family: monospace;
    color: #0f172a;
    font-weight: 600;
}

.msa-script-src {
    font-size: 14px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 600px) {
    .msa-script-table__head,
    .msa-script-row { grid-template-columns: 1fr; }
    .msa-script-src { display: none; }
}

/* ── Rendered Accessibility Check Panel ─────────────────────────────────────── */
.msa-rendered-panel {
    margin-top: 16px;
}

.msa-rendered-grid {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.msa-rc-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 14px;
    align-items: center;
}

.msa-rc-label {
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.4;
}

.msa-rc-bars {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.msa-rc-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.msa-rc-tag {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    width: 90px;
    flex-shrink: 0;
    color: #64748b;
}

.msa-rc-tag--rendered { color: #107dbd; }
.msa-rc-tag.msa-rc-pass { color: #059669; }
.msa-rc-tag.msa-rc-improved { color: #d97706; }

.msa-rc-bar-track {
    flex: 1;
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}

.msa-rc-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width .5s ease;
}

.msa-rc-bar-fill--server   { background: #94a3b8; }
.msa-rc-bar-fill--rendered { background: #107dbd; }

.msa-rc-count {
    font-size: 16px;
    font-weight: 700;
    color: #64748b;
    width: 48px;
    text-align: right;
    flex-shrink: 0;
}

.msa-rc-count.msa-rc-pass     { color: #059669; }
.msa-rc-count.msa-rc-improved { color: #d97706; }
.msa-rc-count.msa-rc-fail     { color: #dc2626; }

.msa-rc-arrow {
    font-size: 16px;
    color: #059669;
}

.msa-rendered-note {
    margin: 0;
    padding: 12px 20px 16px;
    font-size: 14px;
    color: #475569;
    border-top: 1px solid #f1f5f9;
    font-style: italic;
    line-height: 1.5;
}

@media (max-width: 600px) {
    .msa-rc-row       { grid-template-columns: 1fr; }
    .msa-rc-tag       { width: 80px; font-size: 14px; }
}