body { font-family:'Open Sans', sans-serif; background:linear-gradient(135deg,#e0f7fa 0%,#b2ebf2 46%,#fff3e0 100%); }
    h1,h2,h3,.font-heading { font-family:'Montserrat', sans-serif; }
    .card-shadow { box-shadow:0 18px 45px rgba(15,23,42,.12); }
    .glass { background:rgba(255,255,255,.9); backdrop-filter:blur(14px); }
    .hero-mask { background:linear-gradient(90deg,rgba(0,119,190,.94),rgba(0,168,150,.82),rgba(247,127,0,.44)); }
  
        :root {
            --ink: #15303D;
            --ink-soft: #4B6270;
            --hairline: rgba(21,48,61,.14);
            --surface-glass: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,251,242,.68));
            --shadow-soft: 0 1px 2px rgba(21,48,61,.05), 0 14px 30px rgba(21,48,61,.09);
            --accent-1: #0077be;
            --accent-2: #20B2AA;
            --accent-3: #FF7F50;
            --accent-4: #C9A227;
        }
        /* v20 premium surface system - one consistent surface + hairline border + accent bar */
        .glass,
        .bg-white,
        .bg-white\/90,
        .bg-white\/95,
        .bg-white\/80,
        .bg-white\/70,
        .bg-white\/60,
        article.bg-white,
        section.bg-white,
        div.bg-white {
            position: relative !important;
            background: var(--surface-glass) !important;
            border: 1px solid var(--hairline) !important;
            box-shadow: var(--shadow-soft) !important;
            backdrop-filter: blur(16px) saturate(140%) !important;
            -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
        }
        .rounded-2xl.glass::before,
        .rounded-3xl.glass::before,
        .rounded-2xl.bg-white::before,
        .rounded-3xl.bg-white::before,
        .rounded-2xl.bg-white\/90::before,
        .rounded-3xl.bg-white\/90::before,
        .rounded-2xl.bg-white\/95::before,
        .rounded-3xl.bg-white\/95::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 4px;
            background: var(--accent-1);
            border-radius: inherit;
            pointer-events: none;
        }
        @media print {
            .glass, .bg-white, .bg-white\/90, .bg-white\/95, .bg-white\/80, .bg-white\/70, .bg-white\/60 {
                background: #fff !important; box-shadow: none !important; backdrop-filter: none !important;
            }
            .glass::before, .bg-white::before, .bg-white\/90::before, .bg-white\/95::before { display: none !important; }
        }
        @supports not (backdrop-filter: blur(1px)) {
            .glass, .bg-white, .bg-white\/90, .bg-white\/95, .bg-white\/80, .bg-white\/70, .bg-white\/60 {
                background: rgba(255,253,248,.96) !important;
            }
        }
        .rounded-2xl.bg-sky-50,
        .rounded-2xl.bg-teal-50,
        .rounded-2xl.bg-orange-50,
        .rounded-2xl.bg-amber-50 {
            position: relative;
            background: rgba(255,255,255,.6) !important;
            border: 1px solid var(--hairline) !important;
            box-shadow: 0 1px 2px rgba(21,48,61,.04) !important;
        }
        .rounded-2xl.bg-sky-50::before,
        .rounded-2xl.bg-teal-50::before,
        .rounded-2xl.bg-orange-50::before,
        .rounded-2xl.bg-amber-50::before {
            content: '';
            position: absolute;
            top: 0; left: 0; bottom: 0;
            width: 3px;
            border-radius: inherit;
        }
        .rounded-2xl.bg-sky-50::before { background: var(--accent-1); }
        .rounded-2xl.bg-teal-50::before { background: var(--accent-2); }
        .rounded-2xl.bg-orange-50::before { background: var(--accent-3); }
        .rounded-2xl.bg-amber-50::before { background: var(--accent-4); }