/* Global theme variables */
:root{
  --bg:#0f172a;            /* slate-900 */
  --bg-soft:#111827;       /* gray-900 */
  --surface:#0b1220;       /* custom dark */
  --card:#0e1627;
  --border:#1f2937;        /* gray-800 */
  --primary:#3b82f6;       /* blue-500 */
  --primary-600:#2563eb;   /* blue-600 */
  --text:#e5e7eb;          /* gray-200 */
  --muted:#9ca3af;         /* gray-400 */
  --success:#22c55e;
  --danger:#ef4444;
}

html{scroll-behavior:smooth}

/* Ensure background covers full page without tiling */
html, body{min-height:100%;}

body{
  background: radial-gradient(1200px 600px at 80% -10%, rgba(59,130,246,.15), transparent 60%),
              radial-gradient(1000px 500px at -20% 10%, rgba(34,197,94,.10), transparent 50%),
              var(--bg);
  /* prevent gradient layers from repeating as tiles */
  background-repeat: no-repeat, no-repeat, no-repeat;
  /* keep the soft glows fixed while scrolling */
  background-attachment: fixed, fixed, fixed;
  color:var(--text);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  line-height:1.6;
}

/* Navbar */
.navbar{
  background: linear-gradient(180deg, rgba(2,6,23,.9), rgba(2,6,23,.7));
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(6px);
}
.navbar .navbar-brand{font-weight:700; letter-spacing:.3px}
.navbar .nav-link{color:var(--muted)}
.navbar .nav-link:hover{color:#fff}

/* Layout spacing */
.body-content{padding-top:2rem; padding-bottom:4rem}
.container{max-width:980px}

/* Headings */
h1,h2,h3,h4{color:#fff; letter-spacing:.2px}
h1{font-size:2rem;}
h2{font-size:1.4rem; margin-top:1rem}

/* Card-like surface */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.card .card-header{border-bottom:1px solid var(--border)}

/* Forms */
label{font-weight:600; color:var(--text)}
.form-control,.form-select{
  background-color:#0b1324; color:var(--text);
  border-color:#243244;
}
.form-control:focus,.form-select:focus{
  background-color:#0b1324; color:#fff; border-color:var(--primary); box-shadow:0 0 0 .2rem rgba(59,130,246,.2)
}

/* Buttons */
.btn{font-weight:600; letter-spacing:.2px}
.btn-primary{background:var(--primary); border-color:var(--primary)}
.btn-primary:hover{background:var(--primary-600); border-color:var(--primary-600)}
.btn-outline-dark{color:var(--text); border-color:#2b3547}
.btn-outline-dark:hover{background:#1a2233}

/* Links */
a{color:#93c5fd}
a:hover{color:#bfdbfe; text-decoration:none}

/* Result panel */
#result{margin-top:1.5rem}
#result a{word-break:break-all}
#result .notice{color:var(--muted); font-size:.95rem}

/* Tables & misc */
table{color:var(--text)}
hr{border-color:var(--border)}
footer{color:var(--muted)}

/* Utility */
.shadow-lg{box-shadow:0 25px 50px rgba(0,0,0,.35)!important}
.rounded-12{border-radius:12px}

/* Set padding to keep content from hitting the edges */
.body-content {
    margin-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}