/* ========== Root palette ========== */
:root{
  --bg:#0b1020;          /* deep navy */
  --bg2:#0f172a;         /* slate */
  --card:#111827;        /* card surface */
  --muted:#94a3b8;       /* muted text */
  --border:#1f2937;      /* borders */
  --text:#e5e7eb;        /* foreground */
  --brand:#f59e0b;       /* Plex orange accent */
  --ok:#86efac;          /* success */
  --warn:#fbbf24;        /* warning */
  --portal-bg-color: #0b1020;
}

/* Reset / Base */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;color:var(--text);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial}
body.modal-open{overflow:hidden;}

/* ========== Overseerr-like background ========== */
/* Layered gradients for rich depth */
.bg{
  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(70% 60% at 10% 10%, #1e293b 0%, transparent 60%),
    radial-gradient(70% 60% at 90% 20%, #0b1220 0%, transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  overflow-x: hidden;
  overflow-y: auto;
}
.bg.bg-mode-solid{
  background: var(--portal-bg-color);
}

/* Animated film grain (very subtle) */
.bg::after{
  content:"";
  position:absolute; inset:0;
  background-image: repeating-radial-gradient(rgba(255,255,255,.012) 0 1px, transparent 2px 4px);
  opacity:.25;
  mix-blend-mode: soft-light;
  animation: grain 12s steps(10) infinite;
  pointer-events:none;
}
@keyframes grain{
  0%{transform:translate(0,0)}
  10%{transform:translate(-1%,1%)}
  20%{transform:translate(1%,-1%)}
  30%{transform:translate(-1%,0)}
  40%{transform:translate(1%,1%)}
  50%{transform:translate(0,-1%)}
  60%{transform:translate(-1%,1%)}
  70%{transform:translate(1%,0)}
  80%{transform:translate(-1%,-1%)}
  90%{transform:translate(1%,-1%)}
  100%{transform:translate(0,0)}
}

/* ========== Layout ========== */
.center{min-height:100%;display:grid;place-items:center;padding:2rem;position:relative;z-index:1}

.card{
  width:100%;max-width:520px;
  background:linear-gradient(180deg, rgba(17,24,39,.9), rgba(17,24,39,.92));
  border:1px solid var(--border);
  padding:2rem;border-radius:16px;
  box-shadow:0 10px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.02) inset;
  backdrop-filter: blur(6px);
  animation: fadeIn .8s ease-out both;
  position:relative;
  overflow:hidden;
}
.card.card-mode-solid{background:var(--portal-card-color, #111827);}

.brand{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-bottom:1.25rem}
.logo{width:42px;height:42px;border-radius:8px}
h1{font-size:1.6rem;margin:0}
.muted{color:var(--muted)}
.footnote{margin-top:1rem;color:var(--muted);font-size:.9rem}

/* ========== Buttons ========== */
.auth-btn {
  font-size: 18px;
  font-weight: 700;
  padding: 14px 22px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  line-height: 1;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background-color .18s ease,
    border-color .18s ease;
}
.auth-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}
.auth-btn:active:not(:disabled) {
  transform: translateY(0);
}
.auth-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.auth-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.65);
  outline-offset: 2px;
}

/* Overseerr-style Plex CTA in Plex Orange */
.plex-btn {
  background: #e5a00d; /* Plex orange */
  border: 1px solid #d48f0b;
  color: #000000; /* black text + icon */
  font-size: 18px;
  font-weight: 700;
  padding: 14px 22px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: 0 6px 20px rgba(229, 160, 13, 0.25);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background-color .18s ease,
    border-color .18s ease;
}

.plex-btn:hover {
  background: #f59e0b; /* brighter Plex orange */
  border-color: #cc7a00;
  box-shadow: 0 12px 36px rgba(229, 160, 13, 0.35);
  transform: translateY(-2px);
}

.plex-btn:active {
  transform: translateY(0);
  background: #d48f0b;
  border-color: #a86400;
}

/* ---------- Icon sizing inside the button (applies to Emby/Jellyfin <img>, inline <svg>, and Plex mask) */
.plex-btn img,
.plex-btn svg,
.plex-btn .plex-logo-mask{
  width:22px;
  height:22px;
  max-width:22px;
  max-height:22px;
  flex:0 0 22px;
  display:inline-block;
  object-fit:contain;
  vertical-align:middle;
}
.auth-btn img,
.auth-btn svg,
.auth-btn .plex-logo-mask{
  width:22px;
  height:22px;
  max-width:22px;
  max-height:22px;
  flex:0 0 22px;
  display:inline-block;
  object-fit:contain;
  vertical-align:middle;
}

/* Inline SVG logo â†’ force black (Plex mask already black via background) */
.plex-btn .plex-logo,
.plex-btn .plex-logo *{
  fill:#000 !important;
  stroke:#000 !important;
}

/* If you happen to use an <img> for the Plex logo, make it black via filter */
.plex-btn img.plex-logo{
  filter:brightness(0) saturate(100%) !important;
}

/* Monochrome Plex icon, painted by background-color (always black) */
.plex-btn .plex-logo-mask{
  background-color:#000;                 /* <- icon color */
  -webkit-mask-image:url('/static/plex.svg');
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
  mask-image:url('/static/plex.svg');
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
}

/* badges for portal auth state */
.btn.badge{
  cursor: default;
  font-weight: 700;
  border-radius: 12px;
  padding: .6rem 1rem;
  letter-spacing:.2px;
}
.btn.badge.success{
  background:#0f3d25;
  border:1px solid #1f7a4a;
  color:#b8f3d3;
}
.btn.badge.danger{
  background:#3d0f16;
  border:1px solid #7a1f2f;
  color:#f3b8c2;
}

.badge{
  display:inline-block;padding:.35rem .55rem;border-radius:999px;
  font-weight:700;font-size:.85rem;border:1px solid transparent
}
.badge.ok{background:#052e1a;border-color:#0a5a35;color:#b2f5cf}
.badge.warn{background:#2c1605;border-color:#8a4b16;color:#ffd8b3}

/* (Optional/unused) Jellyfin button skeleton â€” keep sizes consistent if you ever switch classes */
.jellyfin-btn{
  background:#7a45ff;
  border:1px solid #5933c2;
  color:#fff;
  font-size:18px;
  font-weight:700;
  padding:14px 22px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  gap:12px;
}

/* ========== Footer ========== */
.footer{
  position:fixed;left:0;right:0;bottom:0;
  display:flex;justify-content:center;align-items:center;
  padding:14px 10px;font-size:14px;color:#8b8f99;z-index:1;
  background: linear-gradient(to top, rgba(11,16,32,.55), rgba(11,16,32,0));
  backdrop-filter: blur(2px);
}
.footer a{
  color:var(--brand);
  text-decoration:none;font-weight:700;
}
.footer a:hover{text-decoration:underline}

/* ========== Small niceties ========== */
a{color:var(--text)}
a:hover{opacity:.9}
@keyframes fadeIn{from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)}}

/* ========== Admin Console ========== */
.admin-page{background:var(--bg2);color:var(--text);min-height:100vh;margin:0;}
.admin-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 2rem;background:var(--card);border-bottom:1px solid var(--border);}
.admin-header-actions{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;}
.admin-header h1{margin:0;font-size:1.4rem;}
.admin-header .muted{margin:.25rem 0 0;}
.admin-home-link{text-decoration:none;}
.highlight{color:var(--brand);font-weight:600;}
.status-banner{margin:1rem 2rem 0;padding:.75rem 1rem;border-radius:10px;display:none;line-height:1.4;}
.status-banner.show{display:block;}
.status-banner.info{background:rgba(59,130,246,.18);border:1px solid rgba(59,130,246,.55);color:#dbeafe;}
.status-banner.success{background:rgba(34,197,94,.18);border:1px solid rgba(34,197,94,.55);color:#dcfce7;}
.status-banner.error{background:rgba(248,113,113,.18);border:1px solid rgba(248,113,113,.55);color:#ffe4e6;}
.admin-main{display:flex;min-height:calc(100vh - 140px);}
.admin-nav{width:220px;background:var(--card);display:flex;flex-direction:column;border-right:1px solid var(--border);padding:1.25rem;gap:.75rem;}
.admin-tab{text-align:left;justify-content:flex-start;}
.admin-tab.active{background:rgba(245,158,11,.16);border-color:var(--brand);}
.admin-content{flex:1;padding:2rem;overflow:auto;}
.admin-panels{display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr) 320px;align-items:start;}
.panel{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1.5rem;box-shadow:0 8px 28px rgba(0,0,0,.28);}
.panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;}
.panel-header-actions{display:flex;align-items:center;gap:.75rem;}
.panel-helper{color:var(--muted);margin:0 0 1rem;font-size:.9rem;}
.version-badge{font-size:.85rem;color:var(--muted);}
.icon-btn{background:rgba(148,163,184,.14);border:1px solid rgba(148,163,184,.35);color:var(--text);width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;line-height:1;font-weight:700;cursor:pointer;transition:transform .2s ease,opacity .2s ease,background .2s ease,border-color .2s ease;}
.icon-btn:hover:not(:disabled){background:rgba(245,158,11,.2);transform:translateY(-1px);}
.icon-btn:disabled{opacity:.55;cursor:not-allowed;transform:none;}
.icon-btn:focus-visible{outline:2px solid rgba(255,255,255,.65);outline-offset:2px;}
#config-editor{width:100%;min-height:260px;background:#0b1220;border:1px solid var(--border);color:var(--text);border-radius:12px;padding:1rem;font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;font-size:.95rem;resize:vertical;}
.config-fields{display:flex;flex-direction:column;gap:1rem;background:#0b1220;border:1px solid var(--border);border-radius:12px;padding:1rem;}
.config-form-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.config-form-row{display:flex;flex-direction:column;gap:.4rem;}
.config-form-row label{font-weight:600;font-size:.92rem;}
.config-form-row input,.config-form-row select,.config-form-row textarea{background:#0f172a;border:1px solid var(--border);border-radius:10px;color:var(--text);padding:.6rem .85rem;font-family:inherit;font-size:.95rem;}
.config-form-row textarea{resize:vertical;min-height:84px;}
.config-form-group{border:1px dashed rgba(148,163,184,.35);border-radius:12px;padding:1rem;display:flex;flex-direction:column;gap:.8rem;}
.config-form-group h4{margin:0;font-size:.95rem;color:var(--brand);}
.portal-bg-grid{display:grid;gap:1rem;}
.portal-bg-grid-top{grid-template-columns:repeat(2,minmax(220px,1fr));}
.portal-bg-grid-bottom{grid-template-columns:minmax(260px,2fr) minmax(180px,1fr) minmax(170px,1fr);}
.portal-bg-path{min-width:0;}
.service-links-editor{display:flex;flex-direction:column;gap:.75rem;}
.service-link-row{display:grid;gap:.65rem;grid-template-columns:minmax(120px,1fr) minmax(180px,2fr) 130px auto;align-items:end;}
.service-link-row .service-link-color{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  min-width:110px;
  height:42px;
  padding:0;
  background:transparent;
  border:1px solid var(--border);
  border-radius:10px;
  cursor:pointer;
}
.bg.bg-mode-solid::after{display:none;}
.service-link-row .service-link-color::-webkit-color-swatch-wrapper{padding:3px;}
.service-link-row .service-link-color::-webkit-color-swatch{border:none;border-radius:7px;}
.service-link-row .service-link-color::-moz-color-swatch{border:none;border-radius:7px;}
#app-portal-bg-color{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:42px;
  padding:0;
  background:transparent;
  border:1px solid var(--border);
  border-radius:10px;
  cursor:pointer;
}
#app-portal-bg-color::-webkit-color-swatch-wrapper{padding:3px;}
#app-portal-bg-color::-webkit-color-swatch{border:none;border-radius:7px;}
#app-portal-bg-color::-moz-color-swatch{border:none;border-radius:7px;}
#app-portal-modal-color{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:42px;
  padding:0;
  background:transparent;
  border:1px solid var(--border);
  border-radius:10px;
  cursor:pointer;
}
#app-portal-modal-color::-webkit-color-swatch-wrapper{padding:3px;}
#app-portal-modal-color::-webkit-color-swatch{border:none;border-radius:7px;}
#app-portal-modal-color::-moz-color-swatch{border:none;border-radius:7px;}
.service-link-empty{margin:0;color:var(--muted);font-size:.85rem;}
.admin-actions{display:flex;align-items:center;gap:1rem;margin-top:1rem;}
.admin-actions input{flex:1;background:#0b1220;border:1px solid var(--border);border-radius:10px;padding:.6rem .85rem;color:var(--text);}
.admin-actions .primary-btn{min-width:140px;}
.config-tools{display:flex;gap:.75rem;margin-bottom:1rem;flex-wrap:wrap;}
.config-tools .ghost-btn{min-width:110px;}
.config-tools input[type="file"]{display:none;}
.history-panel{max-height:100%;overflow:auto;}
.history-list{list-style:none;margin:0;padding:1rem;font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;font-size:.85rem;background:#0b1220;border:1px solid var(--border);border-radius:12px;max-height:340px;overflow:auto;}
.history-list li+li{margin-top:.75rem;padding-top:.75rem;border-top:1px solid #1e293b;}
.recent-changes-list{max-height:50vh;}
.secret-banner{display:none;padding:.75rem 1rem;margin:0 0 1rem;border-radius:10px;border:1px dashed rgba(59,130,246,.65);background:rgba(59,130,246,.18);color:#dbeafe;font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;word-break:break-all;}
.secret-banner.show{display:block;}
.ghost-btn,.primary-btn,.success-btn,.danger-btn{padding:.65rem 1.2rem;border-radius:10px;font-weight:600;line-height:1;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;cursor:pointer;transition:transform .2s ease,opacity .2s ease,background .2s ease,border-color .2s ease;color:var(--text);border:1px solid transparent;}
.ghost-btn{background:transparent;border-color:var(--border);}
.ghost-btn:hover:not(:disabled){background:rgba(148,163,184,.12);border-color:rgba(148,163,184,.35);transform:translateY(-1px);}
.ghost-btn:disabled,.primary-btn:disabled,.success-btn:disabled,.danger-btn:disabled{opacity:.55;cursor:not-allowed;transform:none;}
.ghost-btn:focus-visible,.primary-btn:focus-visible,.success-btn:focus-visible,.danger-btn:focus-visible{outline:2px solid rgba(255,255,255,.65);outline-offset:2px;}
.primary-btn{background:var(--brand);border-color:var(--brand);color:#1d1200;}
.primary-btn:hover:not(:disabled){background:#f2b844;border-color:#f2b844;transform:translateY(-1px);}
.success-btn{background:#22c55e;border-color:#22c55e;color:#052e16;}
.success-btn:hover:not(:disabled){background:#16a34a;border-color:#16a34a;transform:translateY(-1px);}
.danger-btn{background:rgba(248,113,113,.2);border-color:rgba(248,113,113,.55);color:#ffe4e6;}
.danger-btn:hover:not(:disabled){background:rgba(248,113,113,.28);transform:translateY(-1px);}
.oauth-client-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin-bottom:1.25rem;}
.oauth-client-card{background:#0b1220;border:1px solid var(--border);border-radius:12px;padding:1rem;display:flex;flex-direction:column;gap:.75rem;cursor:pointer;transition:transform .2s ease,border-color .2s ease,background .2s ease;}
.oauth-client-card:hover{transform:translateY(-1px);border-color:rgba(245,158,11,.4);background:#101a2d;}
.oauth-client-card h4{margin:0;font-size:1rem;}
.oauth-client-meta{font-size:.85rem;color:var(--muted);}
.oauth-client-actions{display:flex;gap:.5rem;flex-wrap:wrap;}
.oauth-detail-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1rem;}
.actions-cell{display:flex;justify-content:flex-end;gap:.5rem;flex-wrap:wrap;}
.mono{font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;word-break:break-all;}
.oauth-form{display:flex;flex-direction:column;gap:1rem;margin-top:1.5rem;}
.oauth-form .form-row{display:flex;flex-direction:column;gap:.4rem;}
.oauth-form label{font-weight:600;font-size:.95rem;}
.oauth-form input,.oauth-form textarea{background:#0b1220;border:1px solid var(--border);border-radius:10px;color:var(--text);padding:.65rem .85rem;font-family:inherit;font-size:.95rem;resize:vertical;}
.field-hint{color:var(--muted);font-size:.8rem;}
.oauth-form-actions{display:flex;align-items:center;gap:.75rem;}
.oauth-form-actions .ghost-btn{border-color:rgba(148,163,184,.35);}
.backup-header-actions{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:flex-end;}
.backup-schedule{display:flex;flex-direction:column;gap:1.2rem;margin:1.25rem 0;}
.backup-toggle{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.backup-toggle label{display:flex;align-items:center;gap:.5rem;font-weight:600;}
.backup-toggle .muted{font-size:.85rem;}
.backup-schedule-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}
.backup-schedule-row{display:flex;flex-direction:column;gap:.4rem;}
.backup-schedule-row input,
.backup-schedule-row select{background:#0b1220;border:1px solid var(--border);border-radius:10px;color:var(--text);padding:.6rem .85rem;}
.backup-sections{border:1px dashed rgba(148,163,184,.35);border-radius:12px;padding:1rem;display:flex;flex-wrap:wrap;gap:1rem;margin:0;}
.backup-sections legend{padding:0 .5rem;font-weight:600;}
.backup-sections label{display:flex;align-items:center;gap:.5rem;}
.backup-schedule-actions{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-top:.5rem;}
.backup-schedule-actions input{flex:1;min-width:220px;background:#0b1220;border:1px solid var(--border);border-radius:10px;padding:.6rem .85rem;color:var(--text);}
.backup-run-meta{display:flex;gap:1.5rem;color:var(--muted);font-size:.85rem;}
.backup-table-wrapper{width:100%;overflow-x:auto;margin-top:1rem;}
.backup-table{width:100%;border-collapse:collapse;min-width:540px;}
.backup-table th,.backup-table td{padding:.6rem .75rem;border-bottom:1px solid var(--border);text-align:left;}
.backup-table th{font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);}
.backup-actions{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:flex-end;}
#backup-empty{margin:1rem 0;color:var(--muted);}
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;width:100vw;height:100vh;padding:2rem;z-index:2000;background:transparent;border:none;max-width:none;max-height:none;}
.modal[hidden]{display:none;}
.modal-backdrop{position:absolute;inset:0;background:transparent;}
.modal::backdrop{background:transparent;}
.modal-dialog{position:relative;background:var(--card);border:1px solid var(--border);border-radius:16px;max-width:640px;width:100%;padding:2.25rem 2rem 2rem;box-shadow:0 24px 48px rgba(0,0,0,.45);}
.modal-dialog h3{margin:0 0 1rem;color:var(--text);}
.modal-dialog:focus{outline:none;}
.modal-body{max-height:60vh;overflow:auto;line-height:1.5;color:var(--text);}
.modal-body p{margin:0 0 1rem;}
.modal-body ul{margin:0 0 1rem 1.25rem;padding:0;}
.modal-body li{margin:.35rem 0;}
.modal-body pre{background:#0b1220;border:1px solid var(--border);border-radius:12px;padding:1rem;overflow:auto;font-size:.9rem;}
.modal-body code{font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;}
.close-btn{position:absolute;top:1rem;right:1rem;}
.admin-footer{padding:1rem 2rem;border-top:1px solid var(--border);background:var(--card);color:var(--muted);text-align:center;}

.consent-card{max-width:520px;}
.consent-section{margin:1.5rem 0;}
.consent-section h2{margin:0 0 .75rem;font-size:1.1rem;}
.scope-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.75rem;}
.scope-list li{background:rgba(148,163,184,.12);border:1px solid rgba(148,163,184,.16);padding:.85rem 1rem;border-radius:12px;display:flex;flex-direction:column;gap:.35rem;}
.scope-list strong{font-size:1rem;}
.scope-list span{color:var(--muted);font-size:.88rem;}
.consent-note{margin-bottom:1.25rem;padding:1rem;border-radius:12px;background:rgba(245,158,11,.14);border:1px solid rgba(245,158,11,.28);color:#fed7aa;font-size:.9rem;}
.consent-form{display:flex;flex-direction:column;gap:1rem;}
.consent-actions{display:flex;justify-content:space-between;gap:1rem;}
.portal-service-links{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:10px;}
.portal-service-btn{text-decoration:none;min-width:220px;}
.portal-actions{display:flex;justify-content:center;gap:12px;margin-top:16px;flex-wrap:wrap;}
.portal-actions-inline{margin-top:10px;}
.portal-actions a.primary-btn,.portal-actions a.ghost-btn,.portal-actions a.success-btn,.portal-actions a.danger-btn{text-decoration:none;}
.portal-logout-form{margin-top:16px;text-align:center;}

@media (max-width:960px){
  .admin-main{flex-direction:column;}
  .admin-nav{flex-direction:row;width:auto;border-right:none;border-bottom:1px solid var(--border);padding:1rem;gap:.5rem;}
  .admin-tab{flex:1;text-align:center;}
  .admin-panels{grid-template-columns:1fr;}
  .history-panel{max-height:none;}
  .actions-cell{justify-content:flex-start;}
  .service-link-row{grid-template-columns:1fr;}
  .portal-bg-grid-top,.portal-bg-grid-bottom{grid-template-columns:1fr;}
}
