:root{
  --metro-bg:#f7f7f7;
  --metro-surface:#ffffff;
  --metro-border:#e6e6e6;
  --metro-text:#1b1b1b;
  --metro-muted:#6c757d;
  --metro-accent:#0078d7;
}

.bg-metro{background:var(--metro-bg);color:var(--metro-text);}

.navbar-metro{
  background:rgba(255,255,255,.92);
  border-bottom:1px solid var(--metro-border);
  backdrop-filter:saturate(180%) blur(8px);
}

.navbar-metro .nav-link{color:var(--metro-text);}
.navbar-metro .nav-link:hover{color:var(--metro-accent);}

.metro-surface{
  background:var(--metro-surface);
  border:1px solid var(--metro-border);
  border-radius:0;
  box-shadow:0 10px 25px rgba(0,0,0,.04);
}

.btn-metro{
  --bs-btn-bg:var(--metro-accent);
  --bs-btn-border-color:var(--metro-accent);
  --bs-btn-hover-bg:#106ebe;
  --bs-btn-hover-border-color:#106ebe;
  --bs-btn-color:#fff;
  border-radius:0;
}

.btn-outline-metro{
  --bs-btn-color:var(--metro-text);
  --bs-btn-border-color:var(--metro-border);
  --bs-btn-hover-bg:#fff;
  --bs-btn-hover-color:var(--metro-accent);
  --bs-btn-hover-border-color:var(--metro-accent);
  border-radius:0;
}

.metro-tile{
  display:block;
  text-decoration:none;
  color:#fff;
  padding:18px;
  border-radius:0;
  border:1px solid rgba(255,255,255,.15);
  min-height:110px;
  position:relative;
  overflow:hidden;
}

.metro-tile:hover{filter:brightness(1.03);}

.metro-tile .tile-title{font-weight:700;font-size:1.05rem;letter-spacing:.2px;}
.metro-tile .tile-sub{opacity:.92;font-size:.9rem;margin-top:8px;}

.tile-blue{background:#0078d7;}
.tile-green{background:#107c10;}
.tile-purple{background:#5c2d91;}
.tile-gray{background:#3a3a3a;}
.tile-orange{background:#d83b01;}

.card-metro{
  border-radius:0;
  border:1px solid var(--metro-border);
  background:var(--metro-surface);
}

.card-metro .card-img-top{border-radius:0;}

.form-control,.form-select{
  border-radius:0;
}

.badge-metro{
  border-radius:0;
  background:var(--metro-accent);
}

.quill-wrap{
  border:1px solid var(--metro-border);
}

.quill-wrap .ql-toolbar{border-radius:0;border:none;border-bottom:1px solid var(--metro-border);}
.quill-wrap .ql-container{border-radius:0;border:none;min-height:320px;}