/* =========================================================================
   CyberWave Studios — front-end theme (Windows 98 / IE6 era recreation)
   ========================================================================= */

/* ---- Reset / base ---- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    background: #008080; /* classic Win98 desktop teal */
    font-family: "MS Sans Serif", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 13px;
    color: #000;
    padding: 0;
    -webkit-font-smoothing: none;
}
a { color: #0000cc; }
img { max-width: 100%; }

/* =========================================================================
   IE6 browser window chrome
   ========================================================================= */
.ie-window {
    max-width: 1180px;
    margin: 0 auto;
    background: #d4d0c8;
    border: 1px solid #000;
    box-shadow: 1px 1px 0 #000;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Title bar */
.ie-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 26px;
    padding: 0 3px 0 4px;
    background: linear-gradient(90deg, #0a246a 0%, #2a5cc8 55%, #6f9ce8 80%, #a6caf0 100%);
    color: #fff;
}
.ie-title { display: flex; align-items: center; gap: 5px; overflow: hidden; }
.ie-title-icon { display: inline-flex; }
.ie-title-text {
    font-weight: bold;
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-shadow: 1px 1px 0 rgba(0,0,0,.4);
}
.ie-winbtns { display: flex; gap: 2px; }
.winbtn {
    width: 22px; height: 20px;
    background: #d4d0c8;
    border: 1px solid #fff;
    border-right-color: #404040; border-bottom-color: #404040;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
}
.winbtn:active { box-shadow: inset -1px -1px 0 #fff, inset 1px 1px 0 #808080; }
.g-min { width: 8px; height: 2px; background: #000; margin-top: 8px; }
.g-max { width: 9px; height: 8px; border: 1px solid #000; border-top-width: 2px; }
.g-close { width: 9px; height: 9px; position: relative; }
.g-close::before, .g-close::after {
    content: ""; position: absolute; left: 4px; top: -1px;
    width: 1.5px; height: 11px; background: #000;
}
.g-close::before { transform: rotate(45deg); }
.g-close::after  { transform: rotate(-45deg); }
.winbtn-close { background: #d4d0c8; }

/* Menu bar */
.ie-menubar {
    display: flex; align-items: center; gap: 2px;
    height: 21px;
    padding: 1px 4px;
    background: #d4d0c8;
    border-bottom: 1px solid #808080;
    position: relative;
}
.ie-menubar .menu {
    font-size: 12px; padding: 2px 7px; cursor: default;
}
.ie-menubar .menu:hover { background: #0a246a; color: #fff; }
.ie-menubar .menu u { text-decoration: underline; }
.ie-winflag {
    margin-left: auto; width: 22px; height: 18px;
    background:
        linear-gradient(135deg, #ff3b3b 49%, transparent 51%) top left / 11px 9px no-repeat,
        linear-gradient(225deg, #3bd23b 49%, transparent 51%) top right / 11px 9px no-repeat,
        linear-gradient(45deg, #3b6bff 49%, transparent 51%) bottom left / 11px 9px no-repeat,
        linear-gradient(-45deg, #ffd23b 49%, transparent 51%) bottom right / 11px 9px no-repeat;
    border: 1px solid #b0ac9c;
    transform: skewX(-8deg);
    opacity: .9;
}

/* Toolbar */
.ie-toolbar {
    display: flex; align-items: stretch; gap: 1px;
    padding: 3px 6px;
    background: #d4d0c8;
    border-bottom: 1px solid #808080;
    box-shadow: inset 0 1px 0 #fff;
    flex-wrap: wrap;
}
.tbtn {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1px; padding: 2px 5px; min-width: 44px;
    text-decoration: none; color: #000; border: 1px solid transparent;
    border-radius: 2px;
}
.tbtn:hover {
    border-color: #fff; border-right-color: #808080; border-bottom-color: #808080;
    background: #dbd8d0;
}
.tbtn:active { border-color: #808080; border-right-color: #fff; border-bottom-color: #fff; }
.tbtn-dim { opacity: .45; }
.tbicon { display: inline-flex; }
.tblabel { font-size: 11px; }
.tbcaret { align-self: center; font-size: 9px; color: #555; margin: 0 2px 0 -2px; }
.tbsep { width: 2px; margin: 4px 3px; border-left: 1px solid #808080; border-right: 1px solid #fff; }

/* Address bar */
.ie-addressbar {
    display: flex; align-items: center; gap: 6px;
    padding: 2px 8px 5px;
    background: #d4d0c8;
    border-bottom: 1px solid #808080;
    box-shadow: inset 0 1px 0 #fff;
}
.addr-label { font-size: 12px; color: #404040; }
.addr-label u { text-decoration: underline; }
.addr-field {
    flex: 1; display: flex; align-items: center; gap: 4px;
    background: #fff; padding: 1px 2px 1px 4px;
    border: 1px solid #808080;
    box-shadow: inset 1px 1px 0 #404040;
}
.addr-icon { display: inline-flex; }
.addr-input {
    flex: 1; border: 0; outline: 0; font-size: 12px;
    font-family: Tahoma, sans-serif; padding: 2px 0;
}
.addr-caret { color: #555; font-size: 10px; padding: 0 3px; border-left: 1px solid #c0c0c0; }
.addr-go, .addr-links {
    font-size: 12px; display: inline-flex; align-items: center; gap: 3px;
    color: #000; padding: 2px 7px; cursor: default; white-space: nowrap;
}
.addr-go { background: #d4d0c8; border: 1px solid transparent; border-radius: 2px; cursor: pointer; }
.addr-go:hover { border-color: #fff; border-right-color: #808080; border-bottom-color: #808080; }
.go-arrow {
    display: inline-grid; place-items: center; width: 15px; height: 15px;
    background: #2f8f3f; color: #fff; border-radius: 50%; font-size: 11px; font-weight: bold;
}
.addr-links-caret { font-weight: bold; }

/* =========================================================================
   Page viewport — the purple star wallpaper
   ========================================================================= */
.ie-viewport {
    flex: 1;
    background-color: #8d88c9;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128'%3E%3Cg fill='none' stroke='%23a8a3df' stroke-width='2' opacity='.55'%3E%3Cpath d='M20 18l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z'/%3E%3Cpath d='M92 30l2.5 6 6 .8-4.3 4.2.9 6-5.1-2.6-5.1 2.6.9-6-4.3-4.2 6-.8z'/%3E%3Cpath d='M60 80l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z'/%3E%3Cpath d='M110 92l2.5 6 6 .8-4.3 4.2.9 6-5.1-2.6-5.1 2.6.9-6-4.3-4.2 6-.8z'/%3E%3Cpath d='M14 96c4-3 8 3 12 0M30 104c4-3 8 3 12 0'/%3E%3Cpath d='M78 8c4-3 8 3 12 0'/%3E%3C/g%3E%3Cg fill='none' stroke='%237a74c0' stroke-width='1' opacity='.25'%3E%3Cpath d='M21 19l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z'/%3E%3C/g%3E%3C/svg%3E");
    overflow-x: hidden;
    overflow-y: auto;
}
.site {
    max-width: 1024px;
    margin: 0 auto;
    padding: 12px;
}

/* =========================================================================
   Header banner — starry space with chrome logo
   ========================================================================= */
.banner {
    position: relative;
    background: radial-gradient(ellipse at 30% 40%, #1a0f3a 0%, #0a0420 70%, #05010f 100%);
    border: 3px solid #1a1040;
    border-radius: 4px;
    padding: 14px 18px;
    min-height: 116px;
    display: flex; align-items: center; gap: 14px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.banner-stars {
    position: absolute; inset: 0;
    background-image:
        radial-gradient(1.5px 1.5px at 12% 22%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 28% 70%, #cfe6ff, transparent),
        radial-gradient(1px 1px at 44% 30%, #fff, transparent),
        radial-gradient(2px 2px at 62% 18%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 78% 60%, #ffe9a8, transparent),
        radial-gradient(1px 1px at 90% 35%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 8% 85%, #fff, transparent),
        radial-gradient(2px 2px at 52% 82%, #cfe6ff, transparent),
        radial-gradient(1px 1px at 70% 90%, #fff, transparent);
    pointer-events: none;
}
.banner-pc { position: relative; z-index: 1; flex: 0 0 auto; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.banner-titles { position: relative; z-index: 1; flex: 1; text-align: center; padding-right: 78px; }
.banner-logo {
    margin: 0;
    font-family: "Arial Black", Impact, "Franklin Gothic Bold", sans-serif;
    font-size: clamp(30px, 5vw, 56px);
    font-weight: 900;
    letter-spacing: 1px;
    line-height: 1;
    background: linear-gradient(180deg, #eaf4ff 0%, #bcd8ff 38%, #5b8fe0 52%, #cfe4ff 70%, #9bc0f5 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.5px #2a2f8f;
    text-shadow: 2px 3px 0 rgba(20,16,70,.6);
}
.banner-tagline {
    margin: 4px 0 0;
    font-family: "Comic Sans MS", "Trebuchet MS", cursive;
    font-size: clamp(13px, 1.8vw, 19px);
    font-weight: bold; font-style: italic;
    color: #ffd23f;
    text-shadow: 1px 1px 0 #7a5300;
}
.banner-wave {
    height: 8px; margin: 8px auto 0; max-width: 420px;
    background-image:
        radial-gradient(6px 4px at 6px 4px, transparent 60%, #37c6ff 62%),
        linear-gradient(90deg, #00b3ff, #37c6ff);
    -webkit-mask: repeating-linear-gradient(90deg,#000 0 8px,transparent 8px 16px);
    mask: repeating-linear-gradient(90deg,#000 0 8px,transparent 8px 16px);
    border-radius: 4px;
    box-shadow: 0 0 6px #37c6ff;
}
/* "New Site Design!" magenta starburst badge */
.banner-badge {
    position: absolute; top: 8px; right: 8px; z-index: 2;
    width: 92px; height: 92px;
    display: grid; place-items: center;
    color: #fff; text-align: center;
    background: radial-gradient(circle, #ff5ad9 0%, #c026a6 70%);
    clip-path: polygon(50% 0,61% 18%,82% 12%,77% 34%,98% 38%,82% 52%,98% 66%,77% 70%,82% 92%,61% 84%,50% 100%,39% 84%,18% 92%,23% 70%,2% 66%,18% 52%,2% 38%,23% 34%,18% 12%,39% 18%);
    transform: rotate(8deg);
    box-shadow: 0 2px 5px rgba(0,0,0,.5);
}
.banner-badge span {
    font-family: "Comic Sans MS", cursive; font-weight: bold; font-size: 12px;
    line-height: 1.05; padding: 0 8px; text-shadow: 1px 1px 0 #7a0060;
}

/* =========================================================================
   Navigation bar — blue 3D buttons
   ========================================================================= */
.navbar {
    display: flex; gap: 6px;
    margin: 10px 0;
    padding: 6px;
    background: #6d68b8;
    border: 2px solid #3f3a82;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px #8f8ad0;
}
.navbtn {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    padding: 8px 6px;
    text-decoration: none; color: #fff; font-weight: bold; font-size: 14px;
    background: linear-gradient(180deg, #6ea0e8 0%, #3a6fd6 45%, #2a52b8 100%);
    border: 2px solid #5a8ad8;
    border-right-color: #1e3a86; border-bottom-color: #1e3a86;
    border-radius: 4px;
    text-shadow: 1px 1px 0 #16306e;
}
.navbtn:hover { background: linear-gradient(180deg, #8fb8f2 0%, #4a80e6 45%, #335fd0 100%); }
.navbtn.active {
    background: linear-gradient(180deg, #2a52b8 0%, #3a6fd6 55%, #6ea0e8 100%);
    border-color: #1e3a86; border-right-color: #6ea0e8; border-bottom-color: #6ea0e8;
}
.navbtn-icon { display: inline-flex; filter: drop-shadow(1px 1px 0 rgba(0,0,0,.3)); }
.navbtn-label { white-space: nowrap; }

/* =========================================================================
   Flash messages
   ========================================================================= */
.flash {
    margin: 8px 0; padding: 8px 12px; font-weight: bold; font-size: 13px;
    border: 2px solid; border-radius: 4px;
}
.flash-success { background: #d6f3d0; border-color: #2f8f3f; color: #1c5a25; }
.flash-error   { background: #f7d4cd; border-color: #c0392b; color: #7a1f15; }
.flash-info    { background: #d4e6f7; border-color: #2f6fb0; color: #194a78; }

/* =========================================================================
   Content area + sidebar layout
   ========================================================================= */
.content-area { display: flex; gap: 12px; align-items: flex-start; }
.main-col { flex: 1; min-width: 0; }
.sidebar { flex: 0 0 200px; }

/* =========================================================================
   Hero box
   ========================================================================= */
.hero {
    border: 4px dashed #c026a6;
    background:
        repeating-linear-gradient(90deg, #c026a6 0 10px, #ffd23f 10px 20px) border-box;
    border-image: repeating-linear-gradient(45deg, #c026a6 0 8px, #6d68b8 8px 16px) 4;
    padding: 4px;
    margin-bottom: 12px;
}
.hero-placeholder { background: transparent; }
.hero-inner {
    background: linear-gradient(180deg, #e2e2e2 0%, #c4c4c4 100%);
    min-height: 220px;
    display: grid; place-content: center; text-align: center;
    border: 1px solid #9a9a9a;
}
.hero-heading {
    margin: 0;
    font-family: "Arial Black", Impact, sans-serif; font-weight: 900;
    font-size: clamp(34px, 6vw, 58px);
    color: #3a4fc0;
    text-shadow: 2px 2px 0 #fff, 3px 3px 0 #9a9ad0;
    letter-spacing: 1px;
}
.hero-sub {
    margin: 10px 0 0; font-family: "Comic Sans MS", cursive; font-weight: bold;
    font-size: 22px; color: #8a2fb0;
    display: flex; align-items: center; justify-content: center; gap: 10px;
}
.hero-filled img { display: block; width: 100%; }

/* =========================================================================
   Panels (Welcome / What's New / Services / generic pages)
   ========================================================================= */
.panel {
    border: 2px solid #4a3f6e;
    border-radius: 4px;
    margin-bottom: 12px;
    background: #fdf8ea;
    box-shadow: 1px 1px 3px rgba(0,0,0,.25);
    overflow: hidden;
}
.panel-head {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 10px;
    color: #fff; font-weight: bold; font-size: 14px;
    text-shadow: 1px 1px 0 rgba(0,0,0,.4);
}
.panel-star { display: inline-flex; }
.panel-purple .panel-head { background: linear-gradient(180deg, #9a4fd0 0%, #7a2fb0 50%, #5f2090 100%); }
.panel-green  .panel-head { background: linear-gradient(180deg, #4fb04f 0%, #2f8f2f 50%, #1f7a1f 100%); }
.panel-body {
    padding: 12px 14px;
    font-family: "Courier New", Courier, monospace;
    font-size: 14px; line-height: 1.55; color: #1a1208;
}
.panel-body p { margin: 0 0 10px; }
.panel-body p:last-child { margin-bottom: 0; }
.panel-body a { color: #0033cc; font-weight: bold; }

/* Welcome */
.panel-row { display: flex; gap: 12px; align-items: flex-start; }
.panel-welcome { flex: 1.15; }
.panel-whatsnew { flex: 1; }
.welcome-sign { font-style: italic; color: #5a3d1a; margin-top: 10px !important; }
.welcome-fin { text-align: right; margin-top: 6px; }

/* What's New */
.news-item { padding: 6px 0; border-bottom: 1px dotted #b0a888; }
.news-item:last-child { border-bottom: 0; }
.news-date { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.new-flag {
    background: #cc1a1a; color: #fff; font-family: Tahoma, sans-serif; font-weight: bold;
    font-size: 10px; padding: 1px 5px; border-radius: 2px;
    box-shadow: 0 1px 1px rgba(0,0,0,.4);
}
.news-when { font-weight: bold; color: #2a2a2a; }
.news-body { color: #1a1208; }

/* Featured Services (grid) */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.service { display: flex; gap: 10px; }
.service-icon { flex: 0 0 auto; }
.service-title { margin: 0 0 4px; font-family: Tahoma, sans-serif; font-size: 14px; color: #2a3fb0; }
.service-desc { margin: 0 0 6px; font-size: 13px; }
.service-more { font-family: Tahoma, sans-serif; font-weight: bold; font-size: 12px; text-decoration: none; }
.service-more:hover { text-decoration: underline; }
.more-arrow, .ext { font-weight: bold; }

/* Services list page */
.service-list { display: flex; flex-direction: column; gap: 14px; margin: 12px 0; }
.service-row {
    display: flex; gap: 14px; align-items: center;
    background: #fff7e2; border: 1px solid #d8cba0; border-radius: 4px; padding: 12px;
}
.services-cta, .page-intro { font-family: Tahoma, sans-serif; }
.page-intro { font-size: 13px; color: #3a2f18; margin: 0 0 12px; }

/* Generic prose pages */
.content-prose { font-family: Tahoma, Verdana, sans-serif; font-size: 14px; }
.content-prose h3 { color: #5f2090; font-size: 16px; margin: 16px 0 6px; }

/* =========================================================================
   Gallery
   ========================================================================= */
.gallery-cat, .links-cat {
    font-family: Tahoma, sans-serif; font-size: 14px; color: #5f2090;
    margin: 16px 0 8px; display: flex; align-items: center; gap: 6px;
    border-bottom: 2px solid #d8cba0; padding-bottom: 4px;
}
.cat-star { display: inline-flex; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.gallery-card { margin: 0; background: #fff7e2; border: 1px solid #c9bd95; padding: 6px; border-radius: 3px; }
.gallery-thumb { aspect-ratio: 4/3; background: #e6ddc4; border: 1px solid #b8ab80; display: grid; place-items: center; overflow: hidden; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-empty { text-align: center; color: #9a8c60; display: grid; gap: 4px; }
.gallery-empty small { font-family: Tahoma, sans-serif; font-size: 11px; }
.gallery-card figcaption { display: block; margin-top: 6px; font-family: Tahoma, sans-serif; }
.gallery-card figcaption strong { display: block; font-size: 13px; color: #2a2a2a; }
.gallery-card figcaption span { display: block; font-size: 11px; color: #6a5d3a; }

/* =========================================================================
   Links
   ========================================================================= */
.links-list { list-style: none; margin: 0 0 8px; padding: 0; }
.links-list li { padding: 6px 0; border-bottom: 1px dotted #c0b48c; }
.link-title { font-family: Tahoma, sans-serif; font-weight: bold; text-decoration: none; }
.link-title:hover { text-decoration: underline; }
.link-desc { display: block; font-size: 12px; color: #5a4d2c; margin-top: 2px; }

/* =========================================================================
   Forms (contact / guestbook)
   ========================================================================= */
.retro-form { font-family: Tahoma, sans-serif; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fld { display: block; margin-bottom: 12px; }
.fld-label { display: block; font-weight: bold; font-size: 12px; color: #3a2f18; margin-bottom: 3px; }
.fld-label em { color: #cc1a1a; font-style: normal; }
.retro-form input[type=text],
.retro-form input[type=email],
.retro-form textarea {
    width: 100%; padding: 5px 6px; font-family: Tahoma, sans-serif; font-size: 13px;
    background: #fff; border: 1px solid #808080;
    box-shadow: inset 1px 1px 0 #b0b0b0;
}
.retro-form input:focus, .retro-form textarea:focus { outline: 2px solid #7a2fb0; }
.retro-btn {
    display: inline-block; margin-top: 6px;
    font-family: Tahoma, sans-serif; font-weight: bold; font-size: 13px; color: #fff;
    text-decoration: none; cursor: pointer;
    padding: 8px 16px;
    background: linear-gradient(180deg, #9a4fd0, #7a2fb0 60%, #5f2090);
    border: 2px solid #5a8ad8; border-color: #b07fe0 #4a1a78 #4a1a78 #b07fe0;
    border-radius: 4px;
    text-shadow: 1px 1px 0 rgba(0,0,0,.4);
}
.retro-btn:hover { filter: brightness(1.08); }
.retro-btn:active { border-color: #4a1a78 #b07fe0 #b07fe0 #4a1a78; }
.retro-btn-ghost {
    background: linear-gradient(180deg, #4fb04f, #2f8f2f 60%, #1f7a1f);
    border-color: #8fd08f #1a5a1a #1a5a1a #8fd08f;
    margin-left: 8px;
}

/* =========================================================================
   Guestbook entries
   ========================================================================= */
.gb-entries { display: flex; flex-direction: column; gap: 10px; }
.gb-entry { background: #fff7e2; border: 1px solid #d8cba0; border-left: 4px solid #2f8f2f; border-radius: 3px; padding: 10px 12px; }
.gb-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-family: Tahoma, sans-serif; margin-bottom: 5px; }
.gb-name { font-weight: bold; color: #2a3fb0; font-size: 14px; }
.gb-loc { font-size: 12px; color: #6a5d3a; }
.gb-date { margin-left: auto; font-size: 11px; color: #8a7d5a; }
.gb-msg { margin: 0; font-size: 14px; color: #1a1208; }

/* 404 */
.err-code { font-family: "Arial Black", sans-serif; font-size: 64px; color: #c026a6; margin: 0; text-shadow: 2px 2px 0 #fff; }

/* =========================================================================
   Sidebar — "Cool Stuff"
   ========================================================================= */
.side-heading {
    text-align: center; font-family: "Comic Sans MS", cursive; font-weight: bold;
    color: #37e0ff; font-size: 15px; margin: 0 0 8px;
    text-shadow: 1px 1px 0 #003a4a;
}
.side-heading:not(:first-child) { margin-top: 14px; }
.side-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 9px; margin-bottom: 8px;
    text-decoration: none; color: #fff;
    border: 2px solid; border-radius: 5px;
    box-shadow: 1px 1px 2px rgba(0,0,0,.35);
}
.side-btn-purple {
    background: linear-gradient(180deg, #9a4fd0, #7a2fb0 60%, #5f2090);
    border-color: #c79ae8 #4a1a78 #4a1a78 #c79ae8;
}
.side-btn-green {
    background: linear-gradient(180deg, #4fb04f, #2f8f2f 60%, #1f7a1f);
    border-color: #9ad89a #1a5a1a #1a5a1a #9ad89a;
}
.side-btn:hover { filter: brightness(1.08); }
.side-btn-icon { flex: 0 0 auto; filter: drop-shadow(1px 1px 0 rgba(0,0,0,.4)); }
.side-btn-text { display: flex; flex-direction: column; line-height: 1.15; }
.side-btn-text strong { font-family: Tahoma, sans-serif; font-size: 14px; text-shadow: 1px 1px 0 rgba(0,0,0,.4); }
.side-btn-text small { font-family: Tahoma, sans-serif; font-size: 11px; opacity: .95; }

/* Visitor counter */
.counter-box {
    background: #1a1a1a; border: 2px solid #000;
    border-radius: 5px; padding: 8px; margin-bottom: 8px; text-align: center;
    box-shadow: inset 0 0 0 1px #444;
}
.counter-label { font-family: Tahoma, sans-serif; font-size: 11px; color: #d8d8d8; margin-bottom: 6px; }
.counter-digits { display: flex; gap: 2px; justify-content: center; }
.counter-digits .digit {
    font-family: "Courier New", monospace; font-weight: bold; font-size: 22px;
    color: #33ff33; background: #001500; border: 1px solid #0a3a0a;
    padding: 1px 5px; border-radius: 2px;
    text-shadow: 0 0 6px #33ff33;
}

/* Badges of Honor */
.badge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.badge {
    display: flex; align-items: center; justify-content: center; gap: 4px;
    height: 38px; padding: 3px 5px; font-family: Tahoma, sans-serif;
    text-decoration: none; border: 1px solid #000; border-radius: 2px;
    text-align: center; line-height: 1.05; overflow: hidden;
}
.badge img { max-height: 100%; width: auto; }
.badge small { font-size: 9px; display: block; }
.badge strong { font-size: 11px; display: block; }
.badge-notepad { background: #f4f0e0; color: #222; }
.badge-notepad .bdg-note { color: #2f6fb0; }
.badge-notepad .bdg-txt small { color: #555; }
.badge-frontpage { background: linear-gradient(180deg,#4a6fd0,#2a4fb0); color: #fff; }
.badge-resolution { background: #0a1a3a; color: #ffd23f; }
.badge-resolution small { color: #9ac0ff; }
.badge-heart { background: #fff; color: #000; flex-direction: column; gap: 0; }
.badge-heart strong { font-size: 13px; color: #cc1a1a; }
.badge-heart small { color: #000; }
.badge-cool {
    grid-column: 1 / -1; background: linear-gradient(180deg,#ffe06a,#f0b800);
    color: #4a2a00; font-weight: bold; font-size: 11px;
}
.badge-cool b { color: #7a2fb0; }
.bdg-trophy { display: inline-flex; vertical-align: middle; }
.bdg-fp, .bdg-res, .bdg-txt { display: flex; flex-direction: column; }

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer {
    margin-top: 12px;
    background: #0a0420;
    border: 3px solid #1a1040;
    border-radius: 4px;
    padding: 12px 14px;
    display: flex; align-items: center; gap: 12px;
    color: #fff;
}
.footer-stars { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; color: #ff5ad9; }
.footer-dashes {
    width: 70px; height: 6px;
    background: repeating-linear-gradient(90deg, #ff5ad9 0 6px, transparent 6px 12px);
}
.footer-text { flex: 1; text-align: center; font-family: Tahoma, sans-serif; }
.footer-q { margin: 0 0 4px; font-size: 13px; }
.footer-q a { color: #37e0ff; font-weight: bold; }
.footer-copy { margin: 0; font-size: 12px; color: #b8b0e0; }

/* =========================================================================
   Status bar
   ========================================================================= */
.ie-statusbar {
    display: flex; align-items: center; justify-content: space-between;
    height: 22px; padding: 1px 3px;
    background: #d4d0c8;
    border-top: 1px solid #fff;
}
.status-text {
    flex: 1; font-size: 11px; padding: 2px 6px;
    border: 1px solid #808080; border-right-color: #fff; border-bottom-color: #fff;
    margin-right: 3px; box-shadow: inset 1px 1px 0 #b0ac9c;
}
.status-zone {
    display: inline-flex; align-items: center; gap: 4px; font-size: 11px;
    padding: 2px 10px;
    border: 1px solid #808080; border-right-color: #fff; border-bottom-color: #fff;
    box-shadow: inset 1px 1px 0 #b0ac9c;
}
.status-zone-icon { display: inline-flex; }

.muted { color: #6a5d3a; font-style: italic; }

/* =========================================================================
   Responsive — collapse the chrome gracefully on small screens
   ========================================================================= */
@media (max-width: 760px) {
    .content-area { flex-direction: column; }
    .sidebar { flex: 1 1 auto; width: 100%; }
    .panel-row { flex-direction: column; }
    .services-grid { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .tblabel, .tbcaret { display: none; }
    .navbtn-label { font-size: 12px; }
    .navbtn { padding: 7px 4px; }
}
@media (max-width: 520px) {
    .navbar { flex-wrap: wrap; }
    .navbtn { flex: 1 1 28%; }
    .addr-label, .addr-links { display: none; }
    .ie-menubar .menu:nth-child(n+4) { display: none; }
    .banner { flex-direction: column; text-align: center; }
    .banner-titles { padding-right: 0; }
}