:root {
 --demo-navy: #15284a;
 --demo-blue: #2079b7;
 --demo-cyan: #4cc6df;
 --demo-cream: #f5f8fb;
}

body { padding-top: 38px; }
#logout-button { display: none !important; }

.demo-banner {
 position: fixed;
 inset: 0 0 auto;
 min-height: 38px;
 z-index: 10000;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 12px;
 padding: 7px 18px;
 color: white;
 background: var(--demo-navy);
 font: 13px/1.35 Arial, sans-serif;
 box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.demo-banner strong { color: var(--demo-cyan); }
.demo-banner a { color: white; text-decoration: underline; }

.demo-controls {
 position: fixed;
 right: 18px;
 bottom: 18px;
 z-index: 9990;
 font: 14px/1.4 Arial, sans-serif;
}
.demo-controls-toggle {
 border: 0;
 border-radius: 999px;
 padding: 12px 18px;
 color: white;
 background: var(--demo-navy);
 box-shadow: 0 8px 28px rgba(15,32,61,.3);
 cursor: pointer;
}
.demo-controls-panel {
 position: absolute;
 right: 0;
 bottom: 50px;
 width: min(300px, calc(100vw - 36px));
 padding: 16px;
 border: 1px solid #d7e0ea;
 border-radius: 16px;
 background: white;
 box-shadow: 0 18px 48px rgba(15,32,61,.28);
}
.demo-controls-panel > * { width: 100%; margin: 5px 0; }
.demo-controls-panel > div { display: flex; justify-content: space-between; align-items: baseline; }
.demo-controls-panel label { display: grid; gap: 5px; }
.demo-controls-panel select,
.demo-controls-panel button,
.demo-controls-panel a {
 display: block;
 padding: 9px 10px;
 border: 1px solid #cbd6e2;
 border-radius: 8px;
 color: #18334d;
 background: white;
 text-align: left;
 text-decoration: none;
 cursor: pointer;
}

.demo-welcome {
 position: fixed;
 inset: 50% auto auto 50%;
 z-index: 9980;
 width: min(620px, calc(100vw - 32px));
 transform: translate(-50%,-50%);
 padding: 30px;
 border: 1px solid #d7e0ea;
 border-radius: 20px;
 background: white;
 box-shadow: 0 26px 80px rgba(15,32,61,.3);
}
.demo-welcome h2 { margin: 4px 0 10px; }
.demo-welcome-close,
.demo-dialog-close { position: absolute; top: 12px; right: 14px; border: 0; background: transparent; font-size: 26px; cursor: pointer; }
.demo-welcome-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.demo-welcome-actions button,
.demo-link-button { padding: 10px 14px; border: 0; border-radius: 8px; color: white; background: var(--demo-blue); text-decoration: none; cursor: pointer; }

.demo-tour {
 position: fixed;
 left: 18px;
 bottom: 18px;
 z-index: 9995;
 width: min(380px, calc(100vw - 36px));
 padding: 18px;
 border-radius: 16px;
 color: #18334d;
 background: white;
 box-shadow: 0 18px 48px rgba(15,32,61,.28);
}
.demo-tour h3 { margin: 2px 0 8px; }
.demo-tour > div { display: flex; justify-content: flex-end; gap: 8px; }
.demo-tour button { padding: 8px 12px; border: 1px solid #cbd6e2; border-radius: 7px; background: white; cursor: pointer; }
.demo-tour button.primary { color: white; background: var(--demo-blue); border-color: var(--demo-blue); }
.demo-tour-highlight { position: relative; z-index: 9970; outline: 4px solid var(--demo-cyan) !important; outline-offset: 4px; }

.demo-about { position: relative; width: min(560px, calc(100vw - 32px)); padding: 28px; border: 0; border-radius: 18px; }
.demo-about::backdrop { background: rgba(12,28,48,.65); }
.demo-approval-line { position: relative; flex-wrap: wrap; gap: 8px; }
.demo-approval-line label { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-size: 12px; font-weight: 700; color: #173247; }
.demo-item-help { padding: 10px 12px; border-left: 4px solid var(--demo-cyan); background: #f1f8fb; }
.demo-item-status { padding: 3px 7px; border-radius: 999px; font-size: 11px; font-style: normal; background: #e7edf2; }
.demo-item-status.is-approved { color: #246044; background: #e1f2e9; }
.demo-item-status.is-declined { color: #8f3333; background: #fae6e6; }

@media (max-width: 680px) {
 body { padding-top: 58px; }
 .demo-banner { min-height: 58px; flex-wrap: wrap; gap: 4px 8px; text-align: center; }
 .demo-controls { right: 10px; bottom: 10px; }
 .demo-welcome { padding: 22px; max-height: calc(100vh - 90px); overflow: auto; }
 .demo-welcome-actions { display: grid; }
}