/* ==========================================================================
   MyWebUniversity Modern Styles (mystyles2.css)
   Purpose: Use for NEW generated pages/scripts without affecting mystyles1.css
   Author: MyWebUniversity.com
   ========================================================================== */

/* --------- Theme tokens --------- */
:root{
  --bg: #111316;
  --panel: rgba(255,255,255,.05);
  --panel2: rgba(255,255,255,.03);
  --text: #f3f6f8;
  --muted: rgba(243,246,248,.72);
  --muted2: rgba(243,246,248,.55);
  --accent: #8de2f7;
  --border: rgba(255,255,255,.14);
  --border2: rgba(255,255,255,.10);
  --shadow: 0 10px 30px rgba(0,0,0,.35);

  /* “table-like” alternating row colors */
  --rowA: #25383c;
  --rowB: #2f4f4f;
  --rowHover: #355f6b;

  --radius: 18px;
  --radiusSm: 12px;

  --maxw: 1200px;
}

/* --------- Page base --------- */
html, body{
  height: 100%;
}

body{
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 50% -200px, rgba(141,226,247,.18), rgba(0,0,0,0)),
    var(--bg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.6;
}

/* A consistent page container */
.wrap,
.container{
  width: min(var(--maxw), 92vw);
  margin: 0 auto;
  padding: 18px 0 44px;
}

/* --------- Header image (logo/banner) --------- */
.img_header{
  display: block;
  margin: 16px auto 10px;
  width: min(820px, 92vw);
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  background: #000;
}

/* General hero title */
.h1Butn,
#h1Butn,
.page-title{
  text-align: center;
  font-weight: 950;
  letter-spacing: .2px;
  color: var(--accent);
  margin: 10px 0 12px;
  font-size: clamp(18px, 2.2vw, 26px);
}

/* Divider line */
hr{
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  margin: 14px 0 18px;
}

/* --------- Panels / Cards --------- */
.panel,
.card-panel{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}

.panel h1, .panel h2, .panel h3{
  margin-top: 0;
  color: var(--accent);
}

/* --------- Links --------- */
a{
  color: var(--text);
  text-decoration: none;
  font-weight: 900;
}

a:hover{
  color: var(--accent);
  text-decoration: underline;
}

/* --------- Search / input bar (optional) --------- */
.searchbar{
  display:flex;
  gap:10px;
  align-items:center;
  padding: 12px;
  margin: 12px 0 14px;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.searchbar input,
.searchbar select{
  flex: 1;
  padding: 12px 14px;
  border-radius: var(--radiusSm);
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.18);
  color: var(--text);
  outline: none;
  font-size: 14px;
  font-weight: 850;
}

.searchbar input::placeholder{
  color: rgba(243,246,248,.55);
  font-weight: 850;
}

.meta{
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

/* --------- Modern table styling --------- */
table{
  width: 100%;
  border-collapse: collapse;
  border-radius: 14px;
  overflow: hidden;
  margin-top: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
}

th{
  text-align: left;
  padding: 14px 12px;
  background: rgba(0,0,0,.45);
  color: var(--accent);
  font-size: 18px;
  border-bottom: 1px solid var(--border);
}

td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-weight: 850;
  vertical-align: middle;
}

/* zebra rows */
tr:nth-child(odd) td{ background: var(--rowA); }
tr:nth-child(even) td{ background: var(--rowB); }

tr:hover td{
  background: var(--rowHover);
}

/* --------- “Grid of links” styling (for chunk loaders / index pages) --------- */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.card a{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 11px 12px;
  border-radius: var(--radiusSm);
  font-weight: 950;
  text-decoration:none;
  color: #ffffff;
  border: 1px solid rgba(255,255,255,.18);
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background .15s ease, transform .08s ease, border-color .08s ease;
}

.card:nth-child(odd) a{ background: var(--rowA); }
.card:nth-child(even) a{ background: var(--rowB); }

.card a:hover{
  transform: translateY(-1px);
  border-color: var(--accent);
  background: var(--rowHover);
  text-decoration: none;
}

/* --------- Buttons --------- */
button,
.btn{
  padding: 11px 16px;
  font-weight: 950;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.22);
  color: #fff;
  cursor: pointer;
  box-shadow: var(--shadow);
}

button:hover,
.btn:hover{
  border-color: var(--accent);
  color: var(--accent);
}

/* --------- Scroll / welcome message (optional) --------- */
.scrollText{
  margin: 12px auto 0;
  width: min(var(--maxw), 92vw);
  text-align: center;
  color: var(--muted);
}

.text-background{
  display:inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--accent);
  font-weight: 950;
}

/* --------- Footer bar --------- */
.footer,
.site-footer{
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.14);
  text-align:center;
  color: var(--muted);
  font-size: 14px;
  font-weight: 850;
}

.footer a,
.site-footer a{
  color: var(--text);
  font-weight: 950;
  text-decoration:none;
}

.footer a:hover,
.site-footer a:hover{
  color: var(--accent);
  text-decoration: none;
}

.sep{
  margin: 0 10px;
  color: rgba(255,255,255,.35);
}

/* --------- Responsive tweaks --------- */
@media (max-width: 540px){
  th{ font-size: 16px; }
  td{ font-size: 14px; }
}
/* ==========================================================================
   Definition list styling (DT / DD)
   Matches PDF table aesthetic
   ========================================================================== */

dl {
  margin: 14px auto;
  width: min(1200px, 92vw);
}

/* Header / command name */
dt {
  margin-top: 10px;
  padding: 10px 14px;
  font-weight: 950;
  font-size: 15px;
  color: #ffffff;

  background: linear-gradient(
    180deg,
    rgba(37,56,60,.95),
    rgba(37,56,60,.85)
  );

  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px 12px 0 0;
  box-shadow: 0 4px 10px rgba(0,0,0,.35);
}

/* Alternate DT rows */
dt:nth-of-type(even) {
  background: linear-gradient(
    180deg,
    rgba(47,79,79,.95),
    rgba(47,79,79,.85)
  );
}

/* Description / content */
dd {
  margin: 0 0 12px 0;
  padding: 10px 14px;

  background: rgba(255,255,255,.04);
  color: rgba(243,246,248,.92);

  border-left: 1px solid rgba(255,255,255,.14);
  border-right: 1px solid rgba(255,255,255,.14);
  border-bottom: 1px solid rgba(255,255,255,.14);

  border-radius: 0 0 12px 12px;
  font-size: 14px;
  font-weight: 850;
}

/* Links inside DT / DD */
dt a,
dd a {
  color: #8de2f7;
  font-weight: 950;
  text-decoration: none;
}

dt a:hover,
dd a:hover {
  text-decoration: underline;
}

/* Compact mode for very large lists */
dl.compact dt {
  padding: 8px 12px;
  font-size: 14px;
}

dl.compact dd {
  padding: 8px 12px;
  font-size: 13px;
}