:root{
    --bg: #fff6dd;
    --card: #ffffff;
    --muted: #7c8aa0;
    --text: #000000;
    --brand: #6ee7ff;
    --brand-2: #8b5cf6;
    --accent: #22c55e;
    --danger: #ef4444;
    --ring: rgba(110,231,255,.35);
    --border: rgba(255,255,255,.08);
    --shadow: 0 10px 30px rgba(0,0,0,.35);
}


*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0; background:radial-gradient(1200px 600px at 10% -20%, rgba(110,231,255,.08), transparent 60%),
    radial-gradient(1200px 600px at 90% 120%, rgba(139,92,246,.12), transparent 60%), var(--bg);
    color:var(--text); font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
    letter-spacing:.1px;
}

header{
    position:sticky; top:0; z-index:10; backdrop-filter: saturate(160%) blur(10px);
    background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.0));
    border-bottom:1px solid var(--border);
}
.container{max-width:1100px; margin:0 auto; padding:20px;}
.brand{display:flex; align-items:center; gap:12px}
.logo{width:36px; height:36px; background-image:url("../assets/sewaora-logo.png");
    background-size:cover; background-position:center;
}    
.brand h1{font-size:20px; margin:0}

/* Tabs (Privacy / Terms) */
.tabs{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
.tab{
    display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border:1px solid var(--border);
    border-radius:999px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    cursor:pointer; user-select:none; box-shadow:var(--shadow);
}
.tab:hover{outline:2px solid var(--ring)}
.tab input{display:none}

/* Tab content visibility (CSS radio hack) */
#tab-privacy:checked ~ main .panel-privacy{display:block}
#tab-terms:checked ~ main .panel-terms{display:block}

main{display:block}
.panel{display:none;}

/* Layout */
.content{display:grid; grid-template-columns: 280px 1fr; gap:22px; align-items:start; margin-top:20px}
@media (max-width: 900px){ .content{grid-template-columns:1fr} }

.card{background:var(--card); border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow)}
.card .card-body{padding:22px}

.sidebar nav{position:sticky; top:86px;}
.sidebar a{
    display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--muted); padding:10px 12px; border-radius:12px; border:1px solid transparent;
}
.sidebar a:hover{color:var(--text); border-color:var(--border); background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));}

.title{font-size:28px; margin:0 0 8px}
.subtitle{color:var(--muted); margin:0 0 16px}

.badge{display:inline-block; font-size:12px; padding:4px 10px; border-radius:999px; border:1px dashed var(--border); color:var(--muted)}

/* Section blocks */
section{scroll-margin-top:90px;}
.section{padding:18px 0; border-top:1px dashed var(--border)}
.section h3{margin:6px 0 8px; font-size:18px}

/* Details accordion */
details{border:1px solid var(--border); border-radius:14px; margin:12px 0; overflow:hidden}
summary{cursor:pointer; padding:14px 16px; list-style:none; font-weight:600;}
details[open] summary{border-bottom:1px dashed var(--border)}
details .p{padding:14px 16px; color:var(--muted)}

/* Footer */
footer{margin:40px 0 60px; text-align:center; color:var(--muted)}

/* Buttons & toggles */
.toolbar{display:flex; gap:10px; align-items:center}
.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; border:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); color:var(--text); text-decoration:none}
.btn:hover{outline:2px solid var(--ring)}

.switch{position:relative; width:54px; height:30px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid var(--border); display:inline-block}
.knob{position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:999px; background:linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: var(--shadow); transition: transform .25s ease}
#themeToggle:checked ~ header .knob{transform: translateX(24px)}

.legal-callout{padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:linear-gradient(180deg, rgba(34,197,94,.12), rgba(34,197,94,.04)); color:var(--text)}
.danger{background:linear-gradient(180deg, rgba(239,68,68,.15), rgba(239,68,68,.05));}
.muted{color:var(--muted)}
ol, ul{padding-left:1.2rem}

code.inline{padding:2px 6px; border:1px solid var(--border); border-radius:8px; background:rgba(255,255,255,.06); font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,"Liberation Mono",Consolas,monospace; font-size:.9em}