/* aero.css — Windows 7 Aero theme override */
/* Loaded after eva02.css to override CSS custom properties */

@font-face {
  font-family: SegoeUI;
  src: local("Segoe UI Light"),
       url(/static/fonts/segoe-ui-light.woff2) format("woff2"),
       url(/static/fonts/segoe-ui-light.woff) format("woff");
  font-weight: 100;
}
@font-face {
  font-family: SegoeUI;
  src: local("Segoe UI"),
       url(/static/fonts/segoe-ui-normal.woff2) format("woff2"),
       url(/static/fonts/segoe-ui-normal.woff) format("woff");
  font-weight: 400;
}
@font-face {
  font-family: SegoeUI;
  src: local("Segoe UI Semibold"),
       url(/static/fonts/segoe-ui-semibold.woff2) format("woff2"),
       url(/static/fonts/segoe-ui-semibold.woff) format("woff");
  font-weight: 600;
}
@font-face {
  font-family: SegoeUI;
  src: local("Segoe UI Bold"),
       url(/static/fonts/segoe-ui-bold.woff2) format("woff2"),
       url(/static/fonts/segoe-ui-bold.woff) format("woff");
  font-weight: 700;
}

:root{
  --bg:#c8ddf0;
  --bg-panel:rgba(240,244,248,0.92);
  --accent:#4580c4;
  --accent-dim:rgba(69,128,196,0.35);
  --green:#1e8449;
  --green-dim:rgba(30,132,73,0.4);
  --amber:#b7950b;
  --text:#1a1a2e;
  --text-muted:#4a5568;
  --text-dim:#a0aec0;
  --border:rgba(0,0,0,0.12);
  --border-bright:#8e8f8f;
  --row-alt:rgba(0,0,0,0.02);
  --row-hover:rgba(69,128,196,0.06);

  /* Aero element gradients (from 7.css) */
  --aero-el-grad:linear-gradient(#f2f2f2 45%,#ebebeb 45%,#cfcfcf);
  --aero-el-grad-h:linear-gradient(#eaf6fd 45%,#bee6fd 45%,#a7d9f5);
  --aero-el-grad-a:linear-gradient(#e5f4fc,#c4e5f6 30% 50%,#98d1ef 50%,#68b3db);
  --aero-el-bd:#8e8f8f;
  --aero-el-bd-h:#3c7fb1;
  --aero-el-bd-a:#6d91ab;
  --aero-el-sd:inset 0 0 0 1px rgba(255,255,255,0.8);
  --aero-el-sd-a:inset 1px 1px 0 rgba(0,0,0,0.2),inset -1px 1px 0 rgba(0,0,0,0.07);
  --aero-surface:#f0f0f0;
  --aero-brad:3px;
  --accent-rgb:69,128,196;
  /* Shared Aero glass title bar gradient (striped glass from 7.css) */
  --aero-glass:
    linear-gradient(135deg,#fff5 70px,transparent 100px),
    linear-gradient(225deg,#fff5 70px,transparent 100px),
    linear-gradient(54deg,
      #0002 0 4%,#6661 6% 6%,#0002 8% 10%,
      #0002 15% 16%,#aaa1 17% 18%,#0002 23% 24%,
      #bbb2 25% 26%,#0002 31% 33%,
      #0002 34% 34.5%,#bbb2 36% 40%,
      #0002 41% 41.5%,#bbb2 44% 45%,
      #bbb2 46% 47%,#0002 48% 49%,#0002 50% 50.5%,
      #0002 56% 56.5%,#bbb2 57% 63%,#0002 67% 69%,
      #bbb2 69.5% 70%,#0002 73.5% 74%,
      #bbb2 74.5% 79%,#0002 80% 84%,
      #aaa2 85% 86%,#0002 87%,#bbb1 90%
    ) left center/100vw 100vh no-repeat fixed;
}

::selection{background:rgba(69,128,196,0.3);color:#fff}

body{
  font-family:SegoeUI,"Segoe UI","IBM Plex Mono",sans-serif;
  background:url('/static/images/bliss.jpg') center/cover fixed;
  color:var(--text);
  min-height:auto;
}
.app{min-height:auto;align-items:flex-start;padding:0.5rem;gap:0.5rem}
.vertical-sidebar{padding:0;width:var(--collapsed);height:calc(100vh - 1rem)}
.vertical-sidebar:has(:checked){width:var(--expanded)}

/* ============================================================
   SIDEBAR — 7.css .window.glass.active
   ============================================================ */

nav.sidebar-nav{
  /* .window from _window.scss */
  box-shadow:2px 2px 10px 1px #000000b3,inset 0 0 0 1px #fffa;
  border:1px solid #000000b3;
  border-radius:6px;
  position:relative;
  z-index:0;
  background-color:#4580c4;
}
/* .window::before — glass gradient overlay */
nav.sidebar-nav::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;left:0;width:100%;height:100%;
  border-radius:6px;
  background:linear-gradient(transparent 20%,#ffffffb3 40%,transparent 41%),
    linear-gradient(to right,#ffffff66,#0000001a,#ffffff33);
  background-color:#4580c4;
  box-shadow:inset 0 0 0 1px #fffd;
  opacity:0.6;
  pointer-events:none;
}
/* .window.glass::after — backdrop blur */
nav.sidebar-nav::after{
  content:"";
  position:absolute;
  z-index:-10;
  top:0;left:0;width:100%;height:100%;
  border-radius:6px;
  border:none;
  backdrop-filter:blur(4px);
  pointer-events:none;
}

/* sidebar title-bar — own narrow aero glass window frame */
.sidebar__title-bar{
  background:var(--aero-glass);
  background-color:#4580c4;
  border:1px solid #000000b3;
  border-radius:6px;
  box-shadow:2px 2px 10px 1px #000000b3,inset 0 0 0 1px #fffa;
  padding:4px 10px 3px;
  margin-bottom:0.35rem;
  position:relative;z-index:0;
  flex-shrink:0;
}

/* .title-bar-text — same as .page-title */
.sidebar__site-title{
  color:#000;font-size:0.8rem;font-weight:700;letter-spacing:0;line-height:1;
  text-shadow:0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,
              0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,0 0 10px #fff;
  text-transform:none;
}

/* sidebar header (avatar area) — sits in window body */
header.sidebar-header{
  min-height:auto;gap:0.25rem;
}

/* sidebar body — window-body */
.sidebar__wrapper{
  /* _window.scss .window-body */
  border:1px solid #000000b3;
  background:var(--aero-surface);
  box-shadow:0 0 0 1px #fff9;
  margin:0 -0.5rem -0.5rem;
  padding:0.5rem;
  border-radius:0;
}

/* toggle button as minimize control */
.nav__toggle{
  /* --w7-wct-bg from _window.scss */
  background:linear-gradient(#ffffff80,#ffffff4d 45%,#0000001a 50%,#0000001a 75%,#ffffff80);
  border:1px solid #0000004d;
  border-top:0;
  border-radius:0 0 5px 5px;
  box-shadow:inset 0 0 0 1px #fffa;
  outline:none;
}
.nav__toggle:hover{
  outline:none;
  /* --w7-wct-bg-h */
  background:radial-gradient(circle at bottom,#2aceda,transparent 65%),linear-gradient(#b6d9ee 50%,#1a6ca1 50%);
  box-shadow:0 0 7px 3px #5dc4f0,inset 0 0 0 1px #fffa;
}
.nav__toggle:active{
  /* --w7-wct-bg-a */
  background:radial-gradient(circle at bottom,#0bfdfa,transparent 65%),linear-gradient(#86a7bc 50%,#092747 50%);
}
.toggle-svg-icon{fill:#222}
.nav__toggle:hover .toggle-svg-icon{fill:#fff}

/* avatar on glass title bar */
.avatar-img{border-color:#0000004d;filter:none}
figure.avatar-fig{border-bottom:none;padding-bottom:0}
figcaption .user-id{
  color:#000;
  text-shadow:0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,
              0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,0 0 10px #fff;
}
figcaption .user-role{
  color:#000;
  text-shadow:0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,0 0 10px #fff;
}
figcaption .user-tokens{
  color:#000;
  text-shadow:0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,0 0 10px #fff;
}

.sidebar__item--heading{color:var(--text-muted)}
.sidebar__link{color:var(--text)}
.sidebar__link:hover{
  background:linear-gradient(#fff9,#e6ecf5cc 90%,#fffc);
  border:1px solid #aaddfa;
  border-radius:var(--aero-brad);
  color:var(--accent);
}

.sidebar__link.active{
  background:linear-gradient(#edf5ff,#d6e8f8 90%,#c4dcf0);
  border-left:2px solid var(--accent);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.5);
  color:var(--accent);
}

/* ============================================================
   MAIN CONTENT — 7.css .window.glass.active
   ============================================================ */

.main-content{
  /* .window from _window.scss */
  box-shadow:2px 2px 10px 1px #000000b3,inset 0 0 0 1px #fffa;
  border:1px solid #000000b3;
  border-radius:6px;
  position:relative;
  z-index:0;
  background-color:#4580c4;
  /* layout overrides — fit content, not full viewport */
  margin:0;
  height:auto;
  max-height:calc(100vh - 1rem);
  padding:0 6px 6px;
  gap:0;
}

/* .window::before — glass gradient overlay */
.main-content::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;left:0;width:100%;height:100%;
  border-radius:6px;
  background:linear-gradient(transparent 20%,#ffffffb3 40%,transparent 41%),
    linear-gradient(to right,#ffffff66,#0000001a,#ffffff33);
  background-color:#4580c4;
  box-shadow:inset 0 0 0 1px #fffd;
  opacity:0.6;
  pointer-events:none;
}

/* .window.glass::after — backdrop blur */
.main-content::after{
  content:"";
  position:absolute;
  z-index:-10;
  top:0;left:0;width:100%;height:100%;
  border-radius:6px;
  border:none;
  backdrop-filter:blur(4px);
  pointer-events:none;
}

/* .title-bar inside .window — page-header as glass title bar */
.page-header{
  /* .window.glass > .title-bar — striped glass gradient */
  background:var(--aero-glass);
  background-color:#4580c4;
  /* .window > .title-bar box-shadow */
  border:0;
  box-shadow:inset 0 1px 0 #fffd,inset 1px 0 0 #fffd,inset -1px 0 0 #fffd;
  border-radius:5px 5px 0 0;
  padding:4px 10px 3px;
  margin:0 -6px;
  /* sticky title bar */
  position:sticky;top:0;z-index:20;
}

/* .title-bar-text */
.page-title{
  color:#000;font-size:0.8rem;letter-spacing:0;line-height:1;
  text-shadow:0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,
              0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,0 0 10px #fff;
}
.page-timestamp{
  color:#000;
  text-shadow:0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,
              0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,0 0 10px #fff;
}
.header-right{display:flex;align-items:center;gap:0.5rem}

/* .window-body — content panels get body styling */
.main-content > *:not(.page-header){
  /* _window.scss .window-body */
  border:1px solid #000000b3;
  background:var(--aero-surface);
  box-shadow:0 0 0 1px #fff9;
}
/* first child after title bar has no top margin (matches margin-top:0) */
.main-content > .page-header + *{
  margin-top:6px;
}

/* ============================================================
   SEARCH PANEL
   ============================================================ */

.search-panel{
  /* inherits window-body border/bg/shadow from .main-content > * rule */
  padding:6px;
}

/* --- Input fields: directional 3D borders --- */

.credential-search-input{
  background:#fff;
  border:1px solid;
  border-color:#abadb3 #dbdfe6 #e3e9ef #e2e3ea;
  border-right:none;
  border-radius:2px 0 0 2px;
  color:var(--text);
  transition:border-color 0.3s;
}
.credential-search-input:hover{
  border-color:#5794bf #b7d5ea #c7e2f1 #c5daed;
  border-right:none;
}
.credential-search-input:focus{
  background:#fff;
  border-color:#3d7bad #a4c9e3 #b7d9ed #b5cfe7;
  border-right:none;
}
.credential-search-input::placeholder{color:var(--text-dim)}

.credential-field-input{
  background:#fff;border:1px solid;
  border-color:#abadb3 #dbdfe6 #e3e9ef #e2e3ea;
  color:var(--text);transition:border-color 0.3s;
}
.credential-field-input:hover{border-color:#5794bf #b7d5ea #c7e2f1 #c5daed}
.credential-field-input:focus{background:#fff;border-color:#3d7bad #a4c9e3 #b7d9ed #b5cfe7}

.credential-field-part{
  background:#fff;border:1px solid;
  border-color:#abadb3 #dbdfe6 #e3e9ef #e2e3ea;
  color:var(--text);transition:border-color 0.3s;
}
.credential-field-part:hover{border-color:#5794bf #b7d5ea #c7e2f1 #c5daed}
.credential-field-part:focus{background:#fff;border-color:#3d7bad #a4c9e3 #b7d9ed #b5cfe7}

.credential-separator{color:var(--text-muted)}

.credential-date-input{
  background:#fff;border:1px solid;
  border-color:#abadb3 #dbdfe6 #e3e9ef #e2e3ea;
  color:var(--text);color-scheme:light;
  transition:border-color 0.3s;
}
.credential-date-input:hover{border-color:#5794bf #b7d5ea #c7e2f1 #c5daed}
.credential-date-input:focus{border-color:#3d7bad #a4c9e3 #b7d9ed #b5cfe7}

.credential-field-select{
  background:#fff;border:1px solid #8e8f8f;
  box-shadow:inset 0 0 0 1px #f4f4f4;
  color:var(--text);color-scheme:light;
}
.credential-field-select:focus{border-color:#3c7fb1}
.credential-field-select option{background:#fff;color:#1a1a2e}

/* Custom select — aero overrides */
.custom-select-trigger{
  background:#fff;border:1px solid #8e8f8f;
  box-shadow:inset 0 0 0 1px #f4f4f4;color:var(--text);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234580c4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 0.5rem center;background-size:0.55rem;
}
.custom-select-wrap.open .custom-select-trigger,
.custom-select-trigger:focus{border-color:#3c7fb1}
.custom-select-dropdown{
  background:#fff;border:1px solid #8e8f8f;
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
}
.custom-select-option{color:var(--text)}
.custom-select-option:hover{background:#d4e8f8;color:#1a1a2e}
.custom-select-option.selected{background:#e0eef8;color:#2a6496}

/* --- Buttons: glossy Aero gradients --- */

.search-button{
  background:var(--aero-el-grad);
  color:#222;
  border:1px solid var(--aero-el-bd);
  border-radius:0 var(--aero-brad) var(--aero-brad) 0;
  box-shadow:var(--aero-el-sd);
  position:relative;z-index:0;
  overflow:hidden;
}
.search-button::before{
  content:"";position:absolute;inset:0;
  border-radius:0 var(--aero-brad) var(--aero-brad) 0;
  background:var(--aero-el-grad-h);
  box-shadow:var(--aero-el-sd);
  opacity:0;transition:opacity 0.3s;z-index:-1;
}
.search-button:hover{
  border-color:var(--aero-el-bd-h);
  color:#222;background:var(--aero-el-grad);
  box-shadow:var(--aero-el-sd);
  transform:none;
}
.search-button:hover::before{opacity:1}
.search-button:active{
  border-color:var(--aero-el-bd-a);
  transform:none;
}
.search-button:active::before{
  background:var(--aero-el-grad-a);
  box-shadow:var(--aero-el-sd-a);
  opacity:1;
}

.credential-advanced-toggle-btn{
  background:var(--aero-el-grad);
  color:#222;
  border:1px solid var(--aero-el-bd);
  border-radius:var(--aero-brad);
  box-shadow:var(--aero-el-sd);
  position:relative;z-index:0;
  overflow:hidden;
}
.credential-advanced-toggle-btn::before{
  content:"";position:absolute;inset:0;
  border-radius:var(--aero-brad);
  background:var(--aero-el-grad-h);
  box-shadow:var(--aero-el-sd);
  opacity:0;transition:opacity 0.3s;z-index:-1;
}
.credential-advanced-toggle-btn:hover{
  border-color:var(--aero-el-bd-h);color:#222;
}
.credential-advanced-toggle-btn:hover::before{opacity:1}
.credential-advanced-toggle-btn.active{
  background:var(--aero-el-grad-h);
  border-color:var(--aero-el-bd-h);
  color:#1a5276;
}
.credential-advanced-toggle-btn.active::before{opacity:0}

.credential-field-btn{
  background:var(--aero-el-grad);
  color:#555;
  border:1px solid var(--aero-el-bd);
  border-radius:var(--aero-brad);
  box-shadow:var(--aero-el-sd);
  position:relative;z-index:0;
  overflow:hidden;
}
.credential-field-btn::before{
  content:"";position:absolute;inset:0;
  border-radius:var(--aero-brad);
  background:var(--aero-el-grad-h);
  box-shadow:var(--aero-el-sd);
  opacity:0;transition:opacity 0.3s;z-index:-1;
}
.credential-add-field-btn:hover{
  border-color:var(--aero-el-bd-h);color:var(--accent);
}
.credential-add-field-btn:hover::before{opacity:1}
.credential-remove-field-btn:hover{
  border-color:#c00;color:#c00;
}
.credential-remove-field-btn:hover::before{
  background:linear-gradient(#fce4ec 45%,#f8bbd0 45%,#f48fb1);
  opacity:1;
}

/* ============================================================
   INFO PANEL
   ============================================================ */

.credential-info-panel{
  /* inherits window-body border/bg/shadow */
  padding:2rem;
}
.credential-info-panel h2{color:var(--text)}
.credential-info-panel h3{color:var(--accent)}
.credential-info-panel code{background:rgba(69,128,196,0.1);color:var(--accent);border:1px solid rgba(69,128,196,0.2)}

.search-tips{background:rgba(255,255,255,0.5);border-color:#d7d7d7}
.search-tips h3{color:var(--accent)}
.search-tips strong{color:var(--text)}

/* ============================================================
   RESULTS TABLE — Aero list view
   ============================================================ */

.credential-table-container{
  /* inherits window-body border/bg/shadow */
}

.credential-results-header{
  background:linear-gradient(to bottom,#fff 45%,#fafafa 45%,#f0f0f0);
  border-bottom:1px solid #d7d7d7;
}
.credential-results-header h2{color:#333}
.credential-results-count{color:var(--accent)}
.results-status{color:var(--text-muted)}

.credential-results-table thead{background:none}
.credential-results-table th{
  background:linear-gradient(to bottom,#fff 45%,#fafafa 45%,#f0f0f0);
  border-bottom:1px solid #d7d7d7;
  border-right:1px solid #e0e0e0;
  color:#333;
}
.credential-results-table th:last-child{border-right:none}
.credential-results-table th:hover{
  background:linear-gradient(to bottom,#f3f9fc 45%,#e4f0f8 45%,#d9eaf5);
  border-bottom-color:#a7d8f5;
}

.credential-results-table td{
  color:#222;
  border-bottom:1px solid #eee;
}
.credential-results-table tbody tr:nth-child(even){background:rgba(0,0,0,0.015)}
.credential-results-table tbody tr:hover{
  background:linear-gradient(#fff9,#e6ecf5cc 90%,#fffc);
  box-shadow:inset 0 0 0 1px #aaddfa;
}

.credential-filter-input{
  background:#fff;border:1px solid;
  border-color:#abadb3 #dbdfe6 #e3e9ef #e2e3ea;
  color:var(--text);
}
.credential-filter-input:focus{background:#fff;border-color:#3d7bad #a4c9e3 #b7d9ed #b5cfe7}

/* ============================================================
   LOADING
   ============================================================ */

.credential-loading-indicator{
  background:rgba(240,240,240,0.88);
  backdrop-filter:blur(4px);
}
.credential-spinner{border-color:#d7d7d7;border-top-color:var(--accent)}
.credential-loading-indicator span{color:var(--accent)}

/* ============================================================
   PAGINATION — Aero buttons
   ============================================================ */

.pagination-container{
  background:linear-gradient(to bottom,#fafafa,#f0f0f0);
  border-top:1px solid #d7d7d7;
}

.pagination-btn{
  background:var(--aero-el-grad);
  color:#222;
  border:1px solid var(--aero-el-bd);
  border-radius:var(--aero-brad);
  box-shadow:var(--aero-el-sd);
  position:relative;z-index:0;
  overflow:hidden;
}
.pagination-btn::before{
  content:"";position:absolute;inset:0;
  border-radius:var(--aero-brad);
  background:var(--aero-el-grad-h);
  box-shadow:var(--aero-el-sd);
  opacity:0;transition:opacity 0.3s;z-index:-1;
}
.pagination-btn:hover:not(.disabled){
  border-color:var(--aero-el-bd-h);
  background:var(--aero-el-grad);color:#222;
}
.pagination-btn:hover:not(.disabled)::before{opacity:1}
.pagination-btn.disabled{opacity:0.5}

.pagination-info{color:var(--text)}
.pagination-jump{color:var(--text)}
.pagination-jump-input{
  background:#fff;border:1px solid;
  border-color:#abadb3 #dbdfe6 #e3e9ef #e2e3ea;
  color:var(--text);
}
.pagination-jump-input:focus{border-color:#3d7bad #a4c9e3 #b7d9ed #b5cfe7}

/* ============================================================
   MODALS — Aero window chrome
   ============================================================ */

.modal-overlay{background:rgba(0,0,0,0.35);backdrop-filter:blur(4px)}

/* .window from _window.scss */
.modal-panel{
  box-shadow:2px 2px 10px 1px #000000b3,inset 0 0 0 1px #fffa;
  border:1px solid #000000b3;
  border-radius:6px;
  position:relative;
  z-index:0;
  background-color:#4580c4;
  padding:0;
  overflow:hidden;
}
/* .window::before — glass gradient */
.modal-panel::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;left:0;width:100%;height:100%;
  border-radius:6px;
  background:linear-gradient(transparent 20%,#ffffffb3 40%,transparent 41%),
    linear-gradient(to right,#ffffff66,#0000001a,#ffffff33);
  background-color:#4580c4;
  box-shadow:inset 0 0 0 1px #fffd;
  opacity:0.6;
  pointer-events:none;
}

/* .window > .title-bar — glass striped gradient */
.modal-header{
  background:var(--aero-glass);
  background-color:#4580c4;
  border:0;
  box-shadow:inset 0 1px 0 #fffd,inset 1px 0 0 #fffd,inset -1px 0 0 #fffd;
  border-radius:5px 5px 0 0;
  padding:6px;padding-top:2px;
  margin-bottom:0;
}
/* .title-bar-text */
.modal-header h2{
  color:#000;letter-spacing:0;line-height:15px;
  text-shadow:0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,
              0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,0 0 10px #fff;
}

/* _window.scss close button — always red like Win7 */
.modal-close{
  /* default: --w7-wct-bg over --w7-wct_close-bg */
  background:
    linear-gradient(#ffffff80,#ffffff4d 45%,#0000001a 50%,#0000001a 75%,#ffffff80),
    radial-gradient(circle at -60% 50%,#0007 5% 10%,#0000 50%),
    radial-gradient(circle at 160% 50%,#0007 5% 10%,#0000 50%),
    linear-gradient(#e0a197e5,#cf796a 25% 50%,#d54f36 50%);
  border:1px solid #0000004d;
  border-radius:0 0 5px 5px;
  box-shadow:inset 0 0 0 1px #fffa;
  width:1.75rem;height:1.25rem;
  position:relative;z-index:0;overflow:hidden;
}
.modal-close svg{fill:#fff;width:10px;height:10px}
.modal-close::before{
  content:"";position:absolute;inset:0;
  border-radius:0 0 5px 5px;
  /* hover: brighter red with yellow glow */
  background:
    linear-gradient(#ffffff80,#ffffff4d 45%,#0000001a 50%,#0000001a 75%,#ffffff80),
    radial-gradient(circle at 50% 170%,#f4e676 10% 20%,#0000 60%),
    radial-gradient(circle at -60% 50%,#000a 5% 10%,#0000 50%),
    radial-gradient(circle at 160% 50%,#000a 5% 10%,#0000 50%),
    linear-gradient(#fb9d8b,#ee6d56 25% 50%,#d42809 50%);
  box-shadow:0 0 7px 3px #e68e75,inset 0 0 0 1px #fffa;
  opacity:0;transition:opacity 0.3s linear;z-index:-1;
}
.modal-close:hover::before{opacity:1;transition:opacity 0.1s linear}
.modal-close:hover svg{fill:#fff}
.modal-close:active::before{
  /* active: darker red */
  background:
    linear-gradient(#ffffff80,#ffffff4d 45%,#0000001a 50%,#0000001a 75%,#ffffff80),
    radial-gradient(circle at 50% 170%,#dcc03f 10% 20%,#0000 60%),
    radial-gradient(circle at -60% 50%,#000 5% 10%,#0000 50%),
    radial-gradient(circle at 160% 50%,#000 5% 10%,#0000 50%),
    linear-gradient(#d1a894,#b67562 25% 50%,#7d0d01 50%);
  opacity:1;
}

/* .window-body — modal body as inset content area */
.modal-body{
  /* _window.scss .window-body */
  margin:6px;margin-top:0;
  border:1px solid #000000b3;
  background:var(--aero-surface);
  box-shadow:0 0 0 1px #fff9;
  color:#222;
  padding:6px;
  overflow-y:auto;
}
.modal-body h3{color:var(--accent)}
.modal-body code{background:rgba(69,128,196,0.1);color:var(--accent)}
.modal-body strong{color:var(--text)}

/* Detail sections inside modals */
.detail-section{
  background:rgba(255,255,255,0.5);
  border:1px solid #d7d7d7;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.5);
}
.detail-section h3{color:var(--accent);border-bottom-color:#d7d7d7}
.detail-label{color:var(--text-muted)}
.detail-value{color:var(--text)}

/* Settings */
.settings-field label{color:var(--text)}

/* Logout — sits on glass title bar */
.logout-link{
  background:var(--aero-el-grad);
  border:1px solid var(--aero-el-bd);
  border-radius:var(--aero-brad);
  box-shadow:var(--aero-el-sd);
  color:#222;
  text-shadow:none;
}
.logout-link:hover{
  background:var(--aero-el-grad-h);
  border-color:var(--aero-el-bd-h);
  color:#222;
}

/* ============================================================
   SCROLLBAR — Aero style
   ============================================================ */

::-webkit-scrollbar{width:14px;height:14px}
::-webkit-scrollbar-track{
  background:linear-gradient(to right,#e5e5e5,#f0f0f0 20%);
  border:1px solid #c0c0c0;
}
::-webkit-scrollbar-thumb{
  border:1px solid #8e8f8f;
  border-radius:3px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.8);
  background:linear-gradient(to right,#f2f2f2 45%,#ebebeb 45%,#cfcfcf);
}
::-webkit-scrollbar-thumb:hover{
  border-color:#3c7fb1;
  background:linear-gradient(to right,#eaf6fd 45%,#bee6fd 45%,#a7d9f5);
}
::-webkit-scrollbar-thumb:active{
  border-color:#6d91ab;
  background:linear-gradient(to right,#c4e5f6 45%,#98d1ef 45%);
}
::-webkit-scrollbar-corner{background:#f2f2f2}

/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes aero-pulse{
  from{box-shadow:inset 0 0 3px 1px rgba(52,222,255,0.87)}
  to{box-shadow:inset 0 0 1px 1px rgba(52,222,255,0.87)}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media(max-width:768px){
  .sidebar-backdrop{background:rgba(0,0,0,0.3)}
}

@media(max-width:480px){
  /* Bottom nav: aero glass style */
  .mobile-bottom-nav{
    background:linear-gradient(to bottom,#fafafa,#f0f0f0);
    border-top:1px solid #d7d7d7;
    box-shadow:0 -2px 8px rgba(0,0,0,0.1);
  }
  .mobile-bottom-nav__link{color:var(--text-muted)}
  .mobile-bottom-nav__link svg{fill:var(--text-muted)}
  .mobile-bottom-nav__link.active{color:var(--accent)}
  .mobile-bottom-nav__link.active svg{fill:var(--accent)}

  /* More sheet: aero surface */
  .mobile-more-sheet{
    background:var(--aero-surface);
    border-top:1px solid #8e8f8f;
    box-shadow:0 -4px 16px rgba(0,0,0,0.2);
  }
  .mobile-more-sheet__user{color:var(--accent)}
  .mobile-more-sheet__item{color:var(--text)}
  .mobile-more-sheet__item:active{background:rgba(69,128,196,0.1)}
  .mobile-more-backdrop{background:rgba(0,0,0,0.3)}

  /* Main content: remove margin for full-width mobile */
  .main-content{margin:0;border-radius:0;max-height:none}

  /* Card view: aero surface background */
  .credential-results-table tbody tr{background:var(--aero-surface)}
  .credential-results-table tbody tr:nth-child(even){background:var(--aero-surface)}
  .credential-results-table tbody tr:hover,
  .credential-results-table tbody tr:active{
    background:linear-gradient(#fff9,#e6ecf5cc 90%,#fffc);
    border-left-color:#aaddfa;
  }
  .credential-results-table tbody td::before{color:var(--text-muted)}
  .credential-results-table tbody td:nth-child(1){color:var(--accent);border-bottom-color:#d7d7d7}
  .credential-results-table tbody td:nth-child(3){color:var(--green)}

  /* Modal bottom sheet: aero style */
  .modal-panel{border-radius:6px 6px 0 0}
}