/* =========================================================
   RWAD UI FRAMEWORK
========================================================= */

:root{

 --rw-bg:#f1f5f9;
 --rw-card:#ffffff;
 --rw-border:#dbe3ee;

 --rw-primary:#2563eb;
 --rw-primary-hover:#1d4ed8;

 --rw-secondary:#334155;
 --rw-secondary-hover:#1e293b;

 --rw-text:#0f172a;
 --rw-text-soft:#64748b;

 --rw-code-bg:#0b1120;
 --rw-code-text:#e2e8f0;

 --rw-shadow:
 0 4px 14px rgba(15,23,42,.06);

 --rw-shadow-hover:
 0 10px 28px rgba(15,23,42,.10);

}

/* =====================================================
   PAGE
===================================================== */

.rwad-page{

 width:100%;
 height:100vh;

 overflow:hidden;

 display:flex;
 flex-direction:column;
 gap:20px;

 padding:20px;
 box-sizing:border-box;

 background:
 linear-gradient(
 180deg,
 #f8fafc 0%,
 #eef2f7 100%
 );

 font-family:
 Inter,
 Segoe UI,
 Arial,
 sans-serif;

}

/* =====================================================
   HEADER
===================================================== */

.rwad-header{

 display:flex;
 justify-content:space-between;
 align-items:center;

 padding:18px 22px;

 background:
 linear-gradient(
 135deg,
 #0f172a,
 #1e293b
 );

 color:#fff;

 border-radius:18px;

 box-shadow:var(--rw-shadow);

}

.rwad-header h2{

 margin:0;

 font-size:26px;
 font-weight:700;

 color:#f8fafc;

}

/* =====================================================
   NAVIGATION
===================================================== */

.rwad-nav{

 display:flex;
 gap:12px;

}

/* =====================================================
   BUTTONS
===================================================== */

.rwad-btn{

 border:none;
 outline:none;

 padding:11px 18px;

 border-radius:12px;

 cursor:pointer;

 font-size:14px;
 font-weight:600;

 transition:all .25s ease;

 box-shadow:
 0 2px 8px rgba(0,0,0,.08);

}

.rwad-btn-primary{

 background:
 linear-gradient(
 135deg,
 #2563eb,
 #3b82f6
 );

 color:#fff;

}

.rwad-btn-primary:hover{

 background:
 linear-gradient(
 135deg,
 #1d4ed8,
 #2563eb
 );

 transform:translateY(-2px);

}

.rwad-btn-secondary{

 background:
 linear-gradient(
 135deg,
 #475569,
 #334155
 );

 color:#fff;

}

.rwad-btn-secondary:hover{

 background:
 linear-gradient(
 135deg,
 #334155,
 #1e293b
 );

 transform:translateY(-2px);

}

/* =====================================================
   CONTENT
===================================================== */

.rwad-content{

 flex:1;

 overflow-y:auto;
 overflow-x:hidden;

 padding-right:6px;

}

/* =====================================================
   SCROLLBAR
===================================================== */

.rwad-content::-webkit-scrollbar{

 width:10px;

}

.rwad-content::-webkit-scrollbar-track{

 background:#e2e8f0;
 border-radius:20px;

}

.rwad-content::-webkit-scrollbar-thumb{

 background:
 linear-gradient(
 180deg,
 #94a3b8,
 #64748b
 );

 border-radius:20px;

}

/* =====================================================
   CARD
===================================================== */

.rwad-card{

 width:100%;

 background:#ffffff;

 border-radius:18px;

 border:1px solid var(--rw-border);

 margin-bottom:18px;

 overflow:hidden;

 box-shadow:var(--rw-shadow);

}

.rwad-card-body{

 padding:24px;

}

/* =====================================================
   TITLE
===================================================== */

.rwad-title{

 margin-top:0;
 margin-bottom:14px;

 font-size:30px;
 font-weight:700;

 color:var(--rw-text);

}

/* =====================================================
   DESCRIPTION
===================================================== */

.rwad-description{

 color:var(--rw-text-soft);

 line-height:1.8;

 font-size:15px;

}

/* =====================================================
   BADGE
===================================================== */

.rwad-badge{

 display:inline-flex;
 align-items:center;

 padding:7px 14px;

 border-radius:999px;

 background:
 linear-gradient(
 135deg,
 #dbeafe,
 #bfdbfe
 );

 color:#1d4ed8;

 border:
 1px solid #bfdbfe;

 font-size:13px;
 font-weight:600;

 margin:4px 8px 4px 0;

}

/* =====================================================
   COLLAPSE
===================================================== */

.rwad-collapse{

 width:100%;

 background:#ffffff;

 border:
 1px solid #dbe3ee;

 border-radius:16px;

 margin-bottom:18px;

 overflow:hidden;

 box-shadow:
 0 2px 10px rgba(15,23,42,.05);

 transition:all .25s ease;

}

.rwad-collapse:hover{

 box-shadow:
 0 8px 24px rgba(15,23,42,.10);

}

/* =====================================================
   COLLAPSE HEADER
===================================================== */

.rwad-collapse-header{

 width:97%;

 display:flex;
 justify-content:space-between;
 align-items:center;

 padding:18px 22px;

 cursor:pointer;

 background:
 linear-gradient(
 180deg,
 #ffffff,
 #f8fafc
 );

 border-bottom:
 1px solid #e2e8f0;

 transition:all .2s ease;

}

.rwad-collapse-header:hover{

 background:
 linear-gradient(
 180deg,
 #f8fafc,
 #eef2ff
 );

}

.rwad-collapse-title{

 margin:0;

 font-size:16px;
 font-weight:700;

 color:#0f172a;

}

/* =====================================================
   COLLAPSE ICON
===================================================== */

.rwad-collapse-icon{

 width:36px;
 height:36px;

 display:flex;
 align-items:center;
 justify-content:center;

 border-radius:50%;

 background:
 linear-gradient(
 135deg,
 #dbeafe,
 #bfdbfe
 );

 color:#2563eb;

 border:
 1px solid #bfdbfe;

 transition:all .25s ease;

 flex-shrink:0;

}

.rwad-collapse-icon i{

 font-size:14px;

 transition:all .25s ease;

}

.rwad-collapse.active
.rwad-collapse-icon{

 background:
 linear-gradient(
 135deg,
 #2563eb,
 #1d4ed8
 );

 color:#ffffff;

 border-color:#2563eb;

 transform:scale(1.05);

}

/* =====================================================
   COLLAPSE BODY
===================================================== */

.rwad-collapse-body{

 display:none;

 width:100%;

 padding:20px;

 box-sizing:border-box;

 background:#ffffff;

}

/* =====================================================
   CODE BOX
===================================================== */

.rwad-code-box{

 width:100%;

 margin:0;

 background:
 linear-gradient(
 180deg,
 #0b1120,
 #111827
 );

 color:#e2e8f0;

 border-radius:14px;

 padding:18px;

 overflow:auto;

 font-size:14px;
 line-height:1.7;

 box-sizing:border-box;

 border:
 1px solid #1e293b;

 font-family:
 Consolas,
 Monaco,
 monospace;

}

.rwad-code-box code{

 white-space:pre-wrap;
 word-break:break-word;

}

/* =====================================================
   MOBILE
===================================================== */

@media(max-width:768px){

 .rwad-header{

  flex-direction:column;
  align-items:flex-start;

 }

 .rwad-nav{

  width:100%;

 }

 .rwad-nav .rwad-btn{

  flex:1;

 }

 .rwad-title{

  font-size:24px;

 }

}