:root{
    --navy:#070d1f; --navy-mid:#0d1b4a;
    --indigo:#4f46e5; --indigo-2:#6366f1;
    --blue:#1a56db; --teal:#059669;
    --gray-50:#f9fafb; --gray-100:#f1f5f9; --gray-200:#e5e7eb;
    --gray-400:#94a3b8; --gray-700:#334155; --gray-900:#0f172a;
    --radius-lg:16px; --radius-xl:20px;
}
*{box-sizing:border-box;}
body{
    margin:0; font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
    color:var(--gray-900); background:#fff; line-height:1.6;
}
code{font-family:'JetBrains Mono',monospace; background:var(--gray-100); color:var(--gray-900); padding:.15em .4em; border-radius:5px; font-size:.875em;}

.ds-nav{position:sticky; top:0; z-index:20; background:rgba(7,13,31,.92); backdrop-filter:blur(10px); border-bottom:1px solid rgba(255,255,255,.08);}
.ds-nav-inner{max-width:1100px; margin:0 auto; padding:.9rem 1.5rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;}
.ds-nav-brand{color:#fff; font-weight:800; font-size:1.05rem;}
.ds-nav-brand span{color:#60a5fa;}
.ds-nav-brand small{color:rgba(255,255,255,.4); font-weight:500; font-size:.75rem; margin-left:.5rem;}
.ds-nav-links{display:flex; gap:1.5rem; flex-wrap:wrap;}
.ds-nav-links a{color:rgba(255,255,255,.65); text-decoration:none; font-size:.875rem; font-weight:600; transition:color .15s;}
.ds-nav-links a:hover{color:#fff;}

.ds-hero{background:var(--navy); position:relative; overflow:hidden; padding:4.5rem 1.5rem 3.5rem; text-align:center;}
.ds-hero-dots{position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size:28px 28px; pointer-events:none;}
.ds-hero-inner{position:relative; z-index:1; max-width:720px; margin:0 auto;}
.ds-eyebrow{display:inline-block; background:rgba(99,102,241,.15); border:1px solid rgba(99,102,241,.3); color:#a5b4fc; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:.35rem 1rem; border-radius:100px; margin-bottom:1.25rem;}
.ds-hero h1{color:#fff; font-size:clamp(2rem,5vw,3rem); font-weight:900; letter-spacing:-1.5px; margin:0 0 1rem;}
.ds-hero p{color:rgba(241,245,249,.6); font-size:1.05rem; margin:0;}

.ds-main{max-width:1100px; margin:0 auto; padding:3rem 1.5rem;}
.ds-section{margin-bottom:4rem; scroll-margin-top:5rem;}
.ds-section h2{font-size:1.5rem; font-weight:900; letter-spacing:-.5px; border-bottom:2px solid var(--gray-100); padding-bottom:.75rem; margin-bottom:1rem;}
.ds-section h3{font-size:1.05rem; font-weight:700; margin:2rem 0 .75rem;}
.ds-lead{color:var(--gray-700); font-size:1rem; max-width:70ch;}

.ds-swatch-row{display:flex; gap:.75rem; flex-wrap:wrap; margin-bottom:1rem;}
.ds-swatch{width:170px; height:90px; border-radius:12px; display:flex; flex-direction:column; justify-content:flex-end; padding:.75rem; font-size:.8rem; font-weight:700; box-shadow:0 2px 10px rgba(0,0,0,.08); border:1px solid rgba(0,0,0,.06);}
.ds-swatch small{font-weight:500; opacity:.75; font-size:.72rem;}
.ds-swatch-row-small .ds-swatch{width:110px; height:64px; justify-content:center; align-items:center; font-size:.72rem;}

.ds-type-sample p{margin:.6rem 0;}

.ds-table-wrap{overflow-x:auto; max-width:100%; margin:1rem 0 2rem;}
.ds-table{width:100%; border-collapse:collapse; font-size:.9rem; margin:0;}
.ds-table th{text-align:left; background:var(--gray-50); padding:.6rem .9rem; font-weight:700; border-bottom:2px solid var(--gray-200);}
.ds-table td{padding:.6rem .9rem; border-bottom:1px solid var(--gray-100); vertical-align:top;}

.ds-demo{background:var(--gray-50); border-radius:var(--radius-xl); padding:2rem; margin:1rem 0;}
.ds-demo-hero{background:var(--navy); text-align:center;}
.ds-demo-badge{display:inline-block; background:rgba(255,255,255,.08); color:#93c5fd; font-size:.72rem; font-weight:700; letter-spacing:.06em; padding:.35rem 1rem; border-radius:100px; margin-bottom:1rem;}

.ds-card-demo{background:#fff; border:1px solid rgba(0,0,0,.07); border-radius:var(--radius-lg); box-shadow:0 2px 12px rgba(0,0,0,.06); padding:1.75rem; max-width:420px;}
.ds-card-icon{width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg,var(--indigo),var(--indigo-2)); color:#fff; display:flex; align-items:center; justify-content:center; margin-bottom:1rem; font-style:normal;}
.ds-card-demo strong{display:block; font-size:1.1rem; margin-bottom:.5rem;}
.ds-card-demo p{color:var(--gray-700); font-size:.9rem; margin:0;}

.ds-rules{padding-left:1.25rem; color:var(--gray-700);}
.ds-rules li{margin-bottom:.75rem;}

.ds-callout{background:rgba(79,70,229,.06); border:1px solid rgba(79,70,229,.16); border-radius:12px; padding:1.25rem 1.5rem; color:var(--gray-700); font-size:.925rem;}

.ds-arch-badge{display:flex; align-items:flex-start; gap:1.1rem; background:linear-gradient(135deg, rgba(79,70,229,.07), rgba(5,150,105,.05)); border:1px solid rgba(79,70,229,.2); border-radius:14px; padding:1.25rem 1.4rem; margin:0 0 1.5rem; box-shadow:0 4px 16px rgba(79,70,229,.07);}
.ds-arch-badge-icon{display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:11px; flex-shrink:0; background:linear-gradient(135deg,var(--indigo),var(--teal)); color:#fff; box-shadow:0 4px 10px rgba(79,70,229,.3);}
.ds-arch-badge-icon svg{width:22px; height:22px;}
.ds-arch-badge-body{min-width:0; flex:1 1 260px;}
.ds-arch-badge-label{display:block; color:var(--indigo); font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:.35rem;}
.ds-arch-badge-title{font-size:1.05rem; font-weight:800; color:var(--gray-900); margin-bottom:.3rem;}
.ds-arch-badge-desc{margin:0; font-size:.875rem; color:var(--gray-700); line-height:1.55;}

.ds-footer{background:var(--navy); color:rgba(255,255,255,.55); padding:0;}
.ds-footer-inner{max-width:1150px; margin:0 auto; padding:1.75rem 2rem;}
.ds-footer-brand{display:flex; align-items:center; gap:.6rem; font-size:.875rem; color:rgba(255,255,255,.75); margin-bottom:1.25rem;}
.ds-footer-mark{display:inline-flex; width:18px; height:18px; border-radius:6px; background:linear-gradient(135deg,var(--teal),var(--indigo-2)); flex-shrink:0;}
.ds-footer-rule{border:none; border-top:1px solid rgba(255,255,255,.1); margin:0 0 1.25rem;}
.ds-footer-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; font-size:.8rem;}
.ds-footer-links{display:flex; gap:1.5rem; flex-wrap:wrap;}
.ds-footer-links a{color:rgba(255,255,255,.65); text-decoration:none;}
.ds-footer-links a:hover{color:#fff;}
.ds-footer-copy{color:rgba(255,255,255,.42);}
.ds-footer-copy strong{color:rgba(255,255,255,.7);}

/* ============================================================
   Feedback por página (avaliação + comentário)
   ============================================================ */
.ds-feedback{display:flex; align-items:center; gap:1rem; flex-wrap:wrap; padding:1.1rem 0; margin:3rem 0 0; border-top:1px solid var(--gray-100); font-size:.875rem; color:var(--gray-700);}
.ds-feedback-btns{display:flex; gap:.5rem;}
.ds-feedback-btn{background:var(--gray-50); border:1px solid var(--gray-200); border-radius:8px; padding:.4rem .8rem; font-size:.8rem; cursor:pointer; font-family:inherit; color:var(--gray-700);}
.ds-feedback-btn:hover{background:var(--gray-100);}
.ds-feedback-btn.is-selected{background:rgba(79,70,229,.1); border-color:var(--indigo); color:var(--indigo);}
.ds-feedback-btn:disabled{cursor:default;}
.ds-feedback-thanks{display:none; color:var(--teal); font-weight:600; font-size:.8rem;}
.ds-feedback-comment{margin-left:auto; color:var(--indigo); text-decoration:none; font-weight:600; font-size:.825rem; white-space:nowrap;}
.ds-feedback-comment:hover{text-decoration:underline;}

@media (max-width:640px){
    .ds-swatch{width:47%;}
}

/* ============================================================
   Topo global (marca "Cerne" + navegação + busca)
   ============================================================ */
.ds-topnav{background:var(--navy); border-bottom:1px solid rgba(255,255,255,.08); position:sticky; top:0; z-index:40; height:64px;}
.ds-topnav-inner{max-width:1400px; margin:0 auto; height:100%; padding:0 1.5rem; display:flex; align-items:center; gap:2rem;}
.ds-topnav-brand{display:flex; align-items:center; gap:.5rem; color:#fff; font-weight:800; font-size:1.15rem; text-decoration:none; flex-shrink:0;}
.ds-topnav-mark{display:inline-flex; width:22px; height:22px; border-radius:7px; background:linear-gradient(135deg,var(--teal),var(--indigo-2)); flex-shrink:0;}
.ds-topnav-links{display:flex; gap:1.5rem; flex:1;}
.ds-topnav-links a{color:rgba(255,255,255,.65); text-decoration:none; font-size:.875rem; font-weight:600; transition:color .15s;}
.ds-topnav-links a:hover{color:#fff;}
.ds-topnav-search{position:relative; display:flex; align-items:center; margin-left:auto;}
.ds-topnav-search input{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:10px; color:#fff; padding:.55rem .9rem .55rem 2.35rem; font-size:.82rem; width:230px; font-family:inherit; transition:background .15s,border-color .15s,box-shadow .15s;}
.ds-topnav-search input::placeholder{color:rgba(255,255,255,.4);}
.ds-topnav-search input:focus{outline:none; background:rgba(255,255,255,.1); border-color:var(--indigo-2); box-shadow:0 0 0 3px rgba(99,102,241,.25);}
.ds-topnav-search-icon{position:absolute; left:.75rem; top:50%; transform:translateY(-50%); color:rgba(255,255,255,.45); pointer-events:none; display:flex;}
.ds-topnav-search-icon svg{width:15px; height:15px;}

@media (max-width:680px){
    .ds-topnav-links, .ds-topnav-search{display:none;}
    .ds-topnav-inner{gap:0;}
}

/* ============================================================
   Shell do site (sidebar + topbar) — navegação multi-página
   ============================================================ */
.ds-shell{display:flex; align-items:stretch; min-height:calc(100vh - 64px);}

.ds-sidebar{
    width:250px; flex-shrink:0; background:var(--navy); color:#fff;
    position:sticky; top:64px; align-self:flex-start; height:calc(100vh - 64px);
    overflow-y:auto; padding:1.5rem 1.1rem 2rem; z-index:30;
    border-right:1px solid rgba(255,255,255,.07);
}
.ds-sidebar-brand{display:block; color:#fff; font-weight:800; font-size:1.05rem; text-decoration:none; margin-bottom:1.75rem;}
.ds-sidebar-brand span{color:#60a5fa;}
.ds-sidebar-brand small{display:block; color:rgba(255,255,255,.4); font-weight:500; font-size:.72rem; margin-top:.2rem;}
.ds-side-group{color:rgba(255,255,255,.35); font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin:1.5rem 0 .5rem; padding:0 .6rem;}
.ds-side-link{display:block; color:rgba(255,255,255,.68); text-decoration:none; font-size:.875rem; font-weight:600; padding:.5rem .6rem; border-radius:8px; margin-bottom:.15rem; transition:background .15s,color .15s;}
.ds-side-link:hover{background:rgba(255,255,255,.06); color:#fff;}
.ds-side-link.is-active{background:rgba(99,102,241,.18); color:#fff;}

.ds-shell-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.ds-topbar{position:sticky; top:0; z-index:20; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--gray-100); padding:1rem 2rem;}
.ds-topbar-title{display:block; font-weight:800; font-size:1.05rem; color:var(--gray-900);}
.ds-topbar-sub{display:block; font-size:.8rem; color:var(--gray-400); margin-top:.1rem;}
.ds-page{max-width:900px; margin:0 auto; padding:2.5rem 2rem 4rem; flex:1; min-width:0;}
.ds-page.has-toc{max-width:1150px; display:flex; gap:3rem; align-items:flex-start;}
.ds-page-content{flex:1; min-width:0; max-width:700px;}

/* Sumário lateral (Table of Contents) com scrollspy */
.ds-toc{width:190px; flex-shrink:0; position:sticky; top:calc(64px + 2rem); font-size:.8rem; align-self:flex-start;}
.ds-toc-title{display:block; color:var(--gray-400); font-weight:700; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:.75rem;}
.ds-toc a{display:block; color:var(--gray-600); text-decoration:none; padding:.32rem 0 .32rem .75rem; border-left:2px solid var(--gray-200); margin-bottom:.05rem; transition:color .15s,border-color .15s;}
.ds-toc a:hover{color:var(--indigo);}
.ds-toc a.is-active{color:var(--indigo); border-left-color:var(--indigo); font-weight:600;}
@media (max-width:1000px){
    .ds-page.has-toc{flex-direction:column; align-items:stretch;}
    .ds-page-content{max-width:100%;}
    .ds-toc{display:none;}
}

@media (max-width:900px){
    .ds-shell{flex-direction:column;}
    .ds-sidebar{width:100%; height:auto; position:static; padding:1.1rem;}
    .ds-page{padding:2rem 1.25rem 3rem; margin:0; max-width:100%;}
}

/* ============================================================
   Exemplo de componente: preview + código copiável
   ============================================================ */
.ds-example{border:1px solid var(--gray-200); border-radius:var(--radius-lg); overflow:hidden; margin:1.25rem 0 2rem;}
.ds-example-preview{background:var(--gray-50); padding:2rem; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:1rem;}
.ds-example-preview.is-dark{background:var(--navy); flex-wrap:nowrap;}
.ds-example-preview pre.mermaid{margin:0; width:100%; min-width:0; flex:1 1 100%; display:flex; justify-content:center; overflow-x:auto;}
.ds-example-preview pre.mermaid svg{max-width:100% !important; height:auto !important; min-width:0;}
.ds-example, .ds-example-preview{min-width:0;}
.ds-example-toolbar{display:flex; justify-content:flex-end; padding:.5rem .65rem; border-top:1px solid var(--gray-200); background:#fff;}
.ds-example-toggle{display:inline-flex; align-items:center; gap:.4rem; background:none; border:1px solid var(--gray-200); border-radius:7px; padding:.35rem .7rem; font-size:.75rem; font-weight:600; color:var(--gray-700); cursor:pointer; font-family:inherit; transition:background .15s;}
.ds-example-toggle:hover{background:var(--gray-50);}
.ds-example-toggle svg{width:13px; height:13px;}
.ds-example-code{position:relative; background:#0f172a; display:none;}
.ds-example-code.is-open{display:block;}
.ds-example-code pre{margin:0; padding:1.1rem 3.25rem 1.1rem 1.25rem; overflow-x:auto; font-size:.8rem; line-height:1.6;}
.ds-example-code code{background:none; color:#e2e8f0; padding:0; font-size:inherit;}
.ds-copy-btn{position:absolute; top:.65rem; right:.65rem; background:rgba(255,255,255,.08); color:rgba(255,255,255,.75); border:1px solid rgba(255,255,255,.15); border-radius:7px; font-size:.72rem; font-weight:600; padding:.35rem .65rem; cursor:pointer; transition:background .15s,color .15s;}
.ds-copy-btn:hover{background:rgba(255,255,255,.16); color:#fff;}
.ds-copy-btn.is-copied{background:var(--teal); color:#fff; border-color:var(--teal);}

.ds-variant-label{font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--gray-400); margin:2rem 0 .4rem;}
.ds-variant-label:first-child{margin-top:0;}

.ds-dos-donts{display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin:1.5rem 0 2rem;}
.ds-dos-donts h4{font-size:.95rem; font-weight:700; margin:0 0 .6rem;}
.ds-dos-donts ul{margin:0; padding-left:1.1rem; font-size:.875rem; color:var(--gray-700); line-height:1.6;}
.ds-dos-donts ul li{margin-bottom:.4rem;}
@media (max-width:640px){ .ds-dos-donts{grid-template-columns:1fr;} }

/* ============================================================
   Ícones — grade de amostras
   ============================================================ */
.ds-icon-grid{display:flex; flex-wrap:wrap; gap:1rem;}
.ds-icon-sample{width:120px; text-align:center; border:1px solid var(--gray-200); border-radius:12px; padding:1rem .5rem; font-size:.75rem; color:var(--gray-700);}
.ds-icon-sample i{font-size:1.5rem; color:var(--indigo); display:block; margin-bottom:.5rem;}
.ds-icon-size-row{display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; margin:.75rem 0;}
.ds-icon-size-row .ds-icon-box{display:flex; align-items:center; justify-content:center; border-radius:var(--radius-lg); color:#fff; background:linear-gradient(135deg,var(--indigo),var(--indigo-2));}
.ds-icon-size-row .ds-icon-box i{color:#fff;}
.ds-icon-size-row small{color:var(--gray-400); font-size:.75rem;}

.ds-overview-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1rem;}
.ds-overview-card{display:block; background:#fff; border:1px solid var(--gray-200); border-radius:14px; padding:1.25rem 1.35rem; text-decoration:none; transition:transform .15s,box-shadow .15s,border-color .15s;}
.ds-overview-card:hover{transform:translateY(-3px); box-shadow:0 12px 24px rgba(0,0,0,.08); border-color:var(--indigo-2);}
.ds-overview-card strong{display:block; color:var(--gray-900); font-size:1rem; margin-bottom:.4rem;}
.ds-overview-card p{margin:0; color:var(--gray-700); font-size:.85rem; line-height:1.5;}

/* ============================================================
   Página de boas-vindas ("Welcome to Cerne")
   ============================================================ */
.ds-welcome{background:var(--navy); padding:4.5rem 1.5rem;}
.ds-welcome-inner{max-width:1200px; margin:0 auto; display:flex; align-items:center; gap:4rem; flex-wrap:wrap;}
.ds-hero-visual{width:340px; height:340px; border-radius:50%; background:linear-gradient(160deg,#16244a,#0a1535); position:relative; overflow:hidden; flex-shrink:0; margin:0 auto;}
.ds-hero-blob{position:absolute; opacity:.85; filter:blur(.5px);}
.ds-hero-blob-1{width:230px; height:230px; left:-40px; top:20px; background:linear-gradient(135deg,var(--teal),#047857); border-radius:42% 58% 65% 35%/48% 40% 60% 52%;}
.ds-hero-blob-2{width:170px; height:170px; right:-30px; bottom:-20px; background:linear-gradient(135deg,var(--indigo),var(--indigo-2)); border-radius:58% 42% 35% 65%/45% 55% 45% 55%; opacity:.8;}
.ds-hero-blob-3{width:110px; height:110px; right:20px; top:30px; background:linear-gradient(135deg,#f59e0b,#d97706); border-radius:60% 40% 55% 45%/40% 60% 40% 60%; opacity:.75;}
.ds-hero-core{position:absolute; inset:0; margin:auto; width:56px; height:56px; border-radius:50%; background:radial-gradient(circle,#fff,#a5b4fc); box-shadow:0 0 46px 6px rgba(165,180,252,.55);}
.ds-welcome-copy{flex:1; min-width:280px;}
.ds-welcome-copy h1{color:#fff; font-size:clamp(2rem,4.5vw,2.9rem); font-weight:900; letter-spacing:-1px; margin:0 0 1rem;}
.ds-welcome-copy p{color:rgba(241,245,249,.65); font-size:1.05rem; max-width:46ch; margin:0 0 1.75rem;}
.ds-welcome-search{position:relative; max-width:420px;}
.ds-welcome-search input{width:100%; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:12px; color:#fff; padding:.9rem 1rem .9rem 2.75rem; font-size:.92rem; font-family:inherit; transition:background .15s,border-color .15s,box-shadow .15s;}
.ds-welcome-search input::placeholder{color:rgba(255,255,255,.42);}
.ds-welcome-search input:focus{outline:none; background:rgba(255,255,255,.11); border-color:var(--indigo-2); box-shadow:0 0 0 4px rgba(99,102,241,.22);}
.ds-welcome-search-icon{position:absolute; left:1rem; top:50%; transform:translateY(-50%); color:rgba(255,255,255,.5); display:flex;}
.ds-welcome-search-icon svg{width:17px; height:17px;}

.ds-foundation{background:#0d1424; padding:4rem 1.5rem;}
.ds-foundation-inner{max-width:1200px; margin:0 auto; display:flex; gap:3rem; align-items:center; flex-wrap:wrap;}
.ds-foundation-copy{flex:1; min-width:260px;}
.ds-foundation-eyebrow{color:var(--teal); font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:.6rem; display:block;}
.ds-foundation-copy h2{color:#fff; border:none; font-size:1.65rem; font-weight:800; margin:0 0 .75rem; padding:0;}
.ds-foundation-copy p{color:rgba(241,245,249,.6); font-size:.95rem; line-height:1.6; margin:0;}
.ds-foundation-cards{flex:1.2; min-width:300px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem;}
.ds-foundation-card{aspect-ratio:1/1; border-radius:18px; position:relative; overflow:hidden; text-decoration:none; display:flex; align-items:flex-end; padding:1rem; color:#fff; font-weight:700; font-size:.9rem;}
.ds-foundation-card span{position:relative; z-index:1;}
.ds-foundation-card::before{content:''; position:absolute; inset:0; opacity:.9;}
.ds-foundation-card.is-teal::before{background:linear-gradient(145deg,#047857,#0d1424 85%);}
.ds-foundation-card.is-indigo::before{background:linear-gradient(145deg,var(--indigo),#0d1424 85%);}
.ds-foundation-card.is-amber::before{background:linear-gradient(145deg,#d97706,#0d1424 85%);}
.ds-foundation-card:hover{transform:translateY(-3px); transition:transform .2s;}

@media (max-width:760px){
    .ds-welcome-inner{flex-direction:column; text-align:center;}
    .ds-welcome-copy p{margin-left:auto; margin-right:auto;}
    .ds-welcome-search{margin:0 auto;}
    .ds-foundation-cards{grid-template-columns:1fr 1fr 1fr;}
}

/* ============================================================
   Classes REAIS do app (copiadas de public/css/prodmais-elegant.css
   e umc-theme.css) — usadas só nos previews ao vivo desta doc,
   para o preview ser pixel-a-pixel igual ao componente em produção.
   ============================================================ */
.ds-real{
    --r-primary:#1a56db; --r-primary-dark:#1e429f; --r-primary-light:#3f83f8; --r-secondary:#0369a1;
    --r-gray-200:#e5e7eb; --r-gray-300:#d1d5db; --r-gray-500:#6b7280; --r-gray-600:#4b5563; --r-gray-900:#111827;
    --r-radius-lg:0.75rem; --r-radius-xl:1rem; --r-radius-md:0.5rem;
    --r-shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05);
    --r-shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --r-shadow-xl:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --r-transition:300ms cubic-bezier(0.4,0,0.2,1);
    font-family:'Inter',sans-serif;
}

/* Alert institucional (.alert-umc / .alert-umc-warning) */
.ds-real .alert-umc{background:#f5f5f5; border-left:4px solid #0066cc; padding:1.25rem 1.5rem; border-radius:8px; max-width:480px;}
.ds-real .alert-umc h5{color:#003366; font-weight:700; margin:0 0 .5rem; font-size:1rem;}
.ds-real .alert-umc p{margin:0; color:var(--r-gray-600); font-size:.9rem;}
.ds-real .alert-umc-warning{border-left-color:#d97706; background:#fff3cd;}
.ds-real .ds-demo-glass-alert{background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.9); border-radius:12px; padding:1.25rem 1.5rem; max-width:480px; font-size:.9rem;}

/* Card elegante (.card-elegant) */
.ds-real .card-elegant{background:#fff; border-radius:var(--r-radius-xl); padding:1.75rem; box-shadow:var(--r-shadow-sm); border:1px solid var(--r-gray-200); transition:all var(--r-transition); max-width:340px;}
.ds-real .card-elegant:hover{transform:translateY(-4px); box-shadow:var(--r-shadow-xl); border-color:var(--r-gray-500);}
.ds-real .card-elegant-header{display:flex; align-items:center; gap:1rem; margin-bottom:1.25rem;}
.ds-real .card-icon{width:48px; height:48px; border-radius:var(--r-radius-lg); background:linear-gradient(135deg,var(--r-primary-light),var(--r-primary)); display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.5rem; flex-shrink:0;}
.ds-real .card-elegant h3{font-size:1.15rem; font-weight:600; color:var(--r-gray-900); margin:0;}
.ds-real .card-elegant p{color:var(--r-gray-600); font-size:.9rem; line-height:1.6; margin:0;}

/* Card de conteúdo (.content-card) */
.ds-real .content-card{background:#fff; border:1px solid var(--r-gray-200); border-radius:var(--r-radius-xl); box-shadow:var(--r-shadow-sm); padding:1.5rem; max-width:340px; transition:transform var(--r-transition), box-shadow var(--r-transition);}
.ds-real .content-card:hover{transform:translateY(-4px); box-shadow:var(--r-shadow-lg);}
.ds-real .content-card-header{display:flex; align-items:flex-start; gap:1rem; margin-bottom:1rem;}
.ds-real .content-card-icon{width:44px; height:44px; border-radius:var(--r-radius-lg); display:flex; align-items:center; justify-content:center; font-size:1.1rem; color:#fff; flex-shrink:0; background:linear-gradient(135deg,var(--r-primary-light),var(--r-primary));}
.ds-real .content-card-title{font-size:1rem; font-weight:700; color:var(--r-gray-900); margin:0 0 .25rem; line-height:1.3;}
.ds-real .content-card-body{font-size:.875rem; color:var(--r-gray-500); line-height:1.6; margin:0;}

/* Stat card moderno (.stat-card-modern) */
.ds-real .stat-card-modern{background:#fff; border-radius:var(--r-radius-lg); padding:2rem; text-align:center; border:1px solid var(--r-gray-200); transition:all var(--r-transition); max-width:220px;}
.ds-real .stat-card-modern:hover{border-color:var(--r-primary-light); box-shadow:var(--r-shadow-lg);}
.ds-real .stat-number{font-size:2.5rem; font-weight:700; background:linear-gradient(135deg,var(--r-primary),var(--r-secondary)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; margin-bottom:.5rem;}
.ds-real .stat-label{font-size:.8rem; color:var(--r-gray-600); font-weight:500; text-transform:uppercase; letter-spacing:.05em;}

/* Botões (.btn-elegant) */
.ds-real .btn-elegant{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.75rem 1.5rem; font-size:.9375rem; font-weight:500; border-radius:var(--r-radius-lg); border:none; cursor:pointer; transition:all var(--r-transition); text-decoration:none;}
.ds-real .btn-elegant-primary{background:linear-gradient(135deg,var(--r-primary),var(--r-primary-dark)); color:#fff; box-shadow:0 2px 8px rgba(26,86,219,.25);}
.ds-real .btn-elegant-primary:hover{transform:translateY(-2px); box-shadow:0 4px 12px rgba(26,86,219,.4);}
.ds-real .btn-elegant-outline{background:transparent; color:var(--r-gray-700); border:1.5px solid var(--r-gray-300);}
.ds-real .btn-elegant-outline:hover{background:var(--gray-50); border-color:var(--r-gray-500); color:var(--r-gray-900);}

/* Badges (.badge-elegant) */
.ds-real .badge-elegant{display:inline-flex; align-items:center; gap:.375rem; padding:.375rem .75rem; font-size:.8125rem; font-weight:500; border-radius:var(--r-radius-md); border:1px solid;}
.ds-real .badge-primary{background:rgba(26,86,219,.1); color:var(--r-primary); border-color:rgba(26,86,219,.2);}
.ds-real .badge-success{background:rgba(16,185,129,.1); color:#059669; border-color:rgba(16,185,129,.2);}
.ds-real .badge-warning{background:rgba(245,158,11,.1); color:#d97706; border-color:rgba(245,158,11,.2);}
.ds-real .badge-neutral{background:var(--gray-100); color:var(--r-gray-700); border-color:var(--gray-200);}

/* Navbar (.navbar-elegant, .nav-link-elegant, .nav-user-*) */
.ds-real .navbar-elegant{background:rgba(255,255,255,.95); border-bottom:1px solid rgba(0,0,0,.05); padding:.75rem 1.25rem; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; border-radius:12px; width:100%; flex-wrap:wrap;}
.ds-real .brand-text{font-size:1.4rem; font-weight:900; background:linear-gradient(135deg,#1a56db,#0369a1 50%,#0ea5e9); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; letter-spacing:-1px;}
.ds-real .brand-text .highlight{color:#0ea5e9; -webkit-text-fill-color:#0ea5e9;}
.ds-real .nav-link-elegant{color:#4b5563; font-weight:500; padding:.5rem 1rem; border-radius:8px; text-decoration:none; font-size:.9rem;}
.ds-real .nav-link-elegant.active{color:#1e40af; background:rgba(59,130,246,.1); font-weight:700;}
.ds-real .nav-user-toggle{display:flex; align-items:center; gap:.5rem; padding:.3rem .75rem .3rem .3rem; border-radius:100px; background:var(--gray-50); border:1px solid var(--gray-200); text-decoration:none; color:#111827;}
.ds-real .nav-user-avatar{display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:#111827; color:#fff; font-size:.75rem; font-weight:700;}
.ds-real .nav-user-greeting{font-size:.8125rem; font-weight:600; color:#111827;}
.ds-real .nav-user-caret{font-size:.6875rem; color:var(--r-gray-500);}

/* Footer institucional (.footer-elegant) */
.ds-real .footer-elegant{background:var(--r-gray-900); color:#fff; padding:2rem 1.5rem; border-radius:12px; width:100%;}
.ds-real .footer-title{font-weight:700; margin-bottom:1rem; color:#fff; font-size:.95rem;}
.ds-real .footer-description{color:#94a3b8; line-height:1.6; font-size:.875rem; margin:0;}
.ds-real .footer-links{list-style:none; padding:0; margin:0;}
.ds-real .footer-links li{margin-bottom:.6rem;}
.ds-real .footer-links a{color:#94a3b8; text-decoration:none; font-size:.875rem;}
.ds-real .footer-divider{border-color:#1f2937; margin:1.75rem 0 1.25rem;}
.ds-real .copyright{margin-bottom:.35rem; color:#cbd5e1; font-size:.85rem;}
.ds-real .compliance{font-size:.78rem; color:#64748b;}

/* Hero (variantes de brilho radial) */
.ds-hero-mini{background:#070d1f; border-radius:16px; padding:3rem 1.5rem; text-align:center; position:relative; overflow:hidden; width:100%;}
.ds-hero-mini .hero-badge{background:rgba(255,255,255,.2); backdrop-filter:blur(10px); padding:.5rem 1.4rem; border-radius:9999px; font-size:.8rem; font-weight:600; color:#fff; border:1px solid rgba(255,255,255,.3); display:inline-block; margin-bottom:1.25rem;}
.ds-hero-mini h2{color:#fff; font-weight:900; font-size:1.85rem; letter-spacing:-1px; border:none; padding:0; margin:0 0 .6rem;}
.ds-hero-mini p{color:rgba(241,245,249,.65); margin:0; font-size:.9rem;}