/* Material Global Theme (Light + Dark) */

:root {
  --md-bg: #FFFFFF;
  --md-text: #202124;
  --md-card: #FFFFFF;
  --md-border: #E0E0E0;
  --md-primary: #1A73E8;
}

[data-theme="dark"] {
  --md-bg: #121212;
  --md-text: #E8EAED;
  --md-card: #1E1E1E;
  --md-border: #333;
  --md-primary: #8AB4F8;
}

body{
  background: var(--md-bg) !important;
  color: var(--md-text) !important;
  font-family: 'Roboto', Arial, sans-serif !important;
  transition: background .3s ease, color .3s ease;
}

/* Header */
.t10b-header{
  width:100%;
  background:var(--md-card);
  border-bottom:1px solid var(--md-border);
  padding:16px 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:relative;
  z-index:9900;
}

/* Footer */
.t10b-footer{
  width:100%;
  background:var(--md-card);
  border-top:1px solid var(--md-border);
  padding:24px;
  text-align:center;
  color:var(--md-text);
  margin-top:40px;
}

/* Dark Mode Switch */
.t10b-dark-switch{
  cursor:pointer;
  font-size:20px;
  margin-left:12px;
}

/* Cards */
.t10b-card{
  background:var(--md-card);
  border:1px solid var(--md-border);
  padding:16px;
  border-radius:12px;
  box-shadow:0 2px 6px rgba(0,0,0,0.1);
  transition:transform .2s ease, box-shadow .2s ease;
}
.t10b-card:hover{
  transform:translateY(-3px);
  box-shadow:0 4px 14px rgba(0,0,0,0.2);
}

/* Buttons */
button, .btn{
  background:var(--md-primary);
  color:#fff !important;
  border:none;
  padding:10px 18px;
  border-radius:8px;
  cursor:pointer;
  font-weight:500;
  transition:opacity .2s ease;
}
button:hover{ opacity:.85; }

/* Ripple for buttons */
.md-ripple{
  position:relative;
  overflow:hidden;
}
.md-ripple:after{
  content:"";
  position:absolute;
  background:rgba(255,255,255,0.4);
  border-radius:50%;
  transform:scale(0);
  width:120px;
  height:120px;
  opacity:0;
  transition: transform .4s, opacity .8s;
}
.md-ripple:active:after{
  transform:scale(2);
  opacity:1;
  transition:0s;
}