:root{
--bg:#f5f7fb;
--panel:#ffffff;
--panel-soft:#f8fafc;
--text:#0f172a;
--muted:#64748b;
--line:#e2e8f0;
--line-soft:#eef2f7;
--accent:#111827;
--shadow:0 10px 30px rgba(15,23,42,.06);
--shadow-soft:0 4px 14px rgba(15,23,42,.04);
--radius:18px;
}

*{
box-sizing:border-box;
}

body{
margin:0;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
color:var(--text);
background:
radial-gradient(circle at top left,#ffffff 0,#f8fbff 20%,var(--bg) 60%);
}

a{
text-decoration:none;
color:inherit;
}


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

.topbar{
position:sticky;
top:0;
z-index:50;
height:70px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 30px;
background:rgba(255,255,255,.85);
backdrop-filter:blur(12px);
border-bottom:1px solid var(--line);
}

.brand{
display:flex;
align-items:center;
gap:10px;
}

.brand-mark{
width:34px;
height:34px;
border-radius:10px;
background:linear-gradient(135deg,#0f172a,#334155);
}

.brand-text{
display:flex;
flex-direction:column;
}

.brand-text strong{
font-size:15px;
}

.brand-text span{
font-size:12px;
color:var(--muted);
}

.nav{
display:flex;
gap:8px;
}

.nav a{
text-decoration:none;
color:#334155;
font-size:14px;
font-weight:600;
padding:10px 14px;
border-radius:12px;
transition:.2s;
}

.nav a:hover{
background:#f1f5f9;
}

.nav a.active{
background:#111827;
color:white;
}

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

.page{
max-width:1400px;
margin:auto;
padding:30px;
}

/* =========================
HERO
========================= */

.hero{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:20px;
margin-bottom:25px;
}

.hero h1{
margin:0;
font-size:30px;
}

.hero p{
margin-top:8px;
color:var(--muted);
font-size:14px;
}

.hero-right{
display:flex;
gap:10px;
}

/* =========================
LAYOUT
========================= */

.layout{
display:grid;
grid-template-columns:260px 1fr;
gap:20px;
}

/* =========================
SIDEBAR
========================= */

.sidebar{
background:rgba(255,255,255,.9);
border:1px solid var(--line);
border-radius:22px;
box-shadow:var(--shadow);
padding:18px;
}

.sidebar-head{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:14px;
padding-bottom:10px;
border-bottom:1px solid var(--line-soft);
}

.sidebar-head h2{
margin:0;
font-size:14px;
}

.sidebar-head span{
font-size:12px;
color:var(--muted);
}

.group{
margin-top:18px;
}

.group-title{
font-size:11px;
font-weight:700;
letter-spacing:.08em;
color:#94a3b8;
text-transform:uppercase;
margin-bottom:8px;
}

.menu{
display:flex;
flex-direction:column;
gap:6px;
}

.menu-item{
display:flex;
justify-content:space-between;
align-items:center;
padding:12px 14px;
border-radius:14px;
cursor:pointer;
font-size:14px;
font-weight:600;
transition:.2s;
}

.menu-item:hover{
background:#f1f5f9;
}

.menu-item.active{
background:#0f172a;
color:white;
}

.menu-item .left{
display:flex;
flex-direction:column;
}

.menu-item .label{
font-size:14px;
font-weight:700;
}

.menu-item .sub{
font-size:12px;
color:var(--muted);
}

.menu-item.active .sub{
color:rgba(255,255,255,.7);
}

.menu-item .num{
font-size:11px;
font-weight:700;
background:#e2e8f0;
color:#334155;
padding:4px 8px;
border-radius:999px;
}

.menu-item.active .num{
background:rgba(255,255,255,.2);
color:white;
}

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

.content{
display:flex;
flex-direction:column;
gap:20px;
}

/* =========================
TOOLBAR
========================= */

.toolbar{
display:flex;
align-items:center;
justify-content:space-between;
background:white;
border:1px solid var(--line);
border-radius:20px;
box-shadow:var(--shadow-soft);
padding:16px 20px;
}

.toolbar-left{
display:flex;
flex-direction:column;
}

.toolbar-right{
display:flex;
align-items:center;
gap:10px;
}

.eyebrow{
font-size:11px;
letter-spacing:.08em;
color:#94a3b8;
text-transform:uppercase;
margin-bottom:6px;
}

.toolbar h3{
margin:0;
font-size:20px;
}

.toolbar p{
margin:6px 0 0;
font-size:13px;
color:var(--muted);
}

/* =========================
SEARCH
========================= */

.search{
display:flex;
align-items:center;
height:40px;
padding:0 12px;
border-radius:12px;
border:1px solid var(--line);
background:white;
}

.search input{
border:none;
outline:none;
font-size:14px;
background:transparent;
}

.icon-btn{
height:40px;
width:40px;
border-radius:12px;
border:1px solid var(--line);
background:white;
cursor:pointer;
}

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

.table-card{
background:white;
border:1px solid var(--line);
border-radius:24px;
box-shadow:var(--shadow);
overflow:hidden;
}

table{
width:100%;
border-collapse:collapse;
}

th{
text-align:left;
font-size:13px;
background:#0f172a;
color:white;
padding:14px;
}

td{
padding:14px;
border-bottom:1px solid var(--line-soft);
font-size:14px;
}

tr:hover{
background:#f8fafc;
}

/* =========================
STATUS
========================= */

.status{
font-size:12px;
padding:5px 10px;
border-radius:20px;
font-weight:700;
}

.status.new{
background:#e2e8f0;
}

.status.used{
background:#bbf7d0;
}

.status.checked{
background:#fde68a;
}

/* =========================
EDITOR
========================= */

.editor-card{
background:white;
border-radius:24px;
border:1px solid var(--line);
box-shadow:var(--shadow);
overflow:hidden;
display:flex;
flex-direction:column;
}

.editor-head{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px;
border-bottom:1px solid var(--line-soft);
}

.editor-head-left h4{
margin:0;
font-size:18px;
}

.editor-head-left p{
margin-top:6px;
font-size:13px;
color:var(--muted);
}

.editor-actions{
display:flex;
gap:10px;
}


.editor-main{
padding:20px;
}

.prompt-box{
background:#f8fafc;
border:1px solid var(--line-soft);
border-radius:16px;
padding:20px;
font-size:14px;
line-height:1.7;
white-space:pre-wrap;
}

.editor-side{
border-left:1px solid var(--line-soft);
padding:20px;
background:#fafbfe;
}

.side-card{
background:white;
border:1px solid var(--line);
border-radius:16px;
padding:14px;
margin-bottom:14px;
}

.side-card h5{
margin:0 0 8px;
font-size:14px;
}

.status-row{
display:flex;
gap:6px;
flex-wrap:wrap;
}

.pill{
font-size:11px;
padding:4px 8px;
border-radius:999px;
background:#eef2f7;
font-weight:600;
}

/* =========================
BUTTON
========================= */

.btn{
height:40px;
padding:0 16px;
border-radius:12px;
border:none;
background:#111827;
color:white;
font-weight:600;
cursor:pointer;
}

.btn.secondary{
background:white;
border:1px solid var(--line);
color:var(--text);
}

/* =========================
PAGINATION
========================= */

.pagination{
padding:20px;
text-align:center;
}

.pagination a{
display:inline-block;
padding:8px 12px;
margin:4px;
border-radius:10px;
border:1px solid var(--line);
text-decoration:none;
color:#334155;
font-size:13px;
}

.pagination a:hover{
background:#f1f5f9;
}

.pagination a.active{
background:#111827;
color:white;
border-color:#111827;
}

/* =========================
FOOTER
========================= */

.footer{
margin-top:40px;
background:#0f172a;
color:#94a3b8;
}

.footer-inner{
max-width:1400px;
margin:auto;
padding:30px;
display:flex;
justify-content:space-between;
}

.footer-col{
display:flex;
flex-direction:column;
}

.footer h4{
color:white;
font-size:13px;
margin-bottom:10px;
}

.footer a{
display:block;
text-decoration:none;
color:#94a3b8;
font-size:13px;
margin-bottom:6px;
}

.footer a:hover{
color:white;
}

/* =========================
RESPONSIVE
========================= */

@media(max-width:1000px){

.layout{
grid-template-columns:1fr;
}

.sidebar{
order:2;
}

.content{
order:1;
}

.editor-body{
grid-template-columns:1fr;
}

.editor-side{
border-left:none;
border-top:1px solid var(--line-soft);
}

}

@media(max-width:600px){

.page{
padding:20px;
}

.topbar{
padding:0 16px;
}

.hero{
flex-direction:column;
align-items:flex-start;
}

}