/* === RESET === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}
html{scroll-behavior:smooth;text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{min-height:100vh;line-height:1.6;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input,textarea,select{font:inherit;color:inherit;background:none;border:none;outline:none}
button{cursor:pointer}
table{border-collapse:collapse;border-spacing:0}
:focus-visible{outline:2px solid #e85d3a;outline-offset:2px}

/* === CSS VARIABLES === */
:root{
  --color-bg:#f5f0e8;
  --color-primary:#1b3a5c;
  --color-accent:#e85d3a;
  --color-success:#5bbd5e;
  --color-text:#2c2520;
  --color-text-secondary:#7a6e61;
  --color-light:#d4c9b0;
  --color-white:#ffffff;
  --color-border:rgba(44,37,32,0.12);
  --color-grid:rgba(44,37,32,0.05);
  --font-heading:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans SC",sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans SC",sans-serif;
  --font-mono:"SF Mono","Fira Code","Consolas","Liberation Mono",monospace;
  --font-weight-bold:700;
  --font-weight-light:300;
  --font-size-xs:0.75rem;
  --font-size-sm:0.875rem;
  --font-size-base:1rem;
  --font-size-md:1.125rem;
  --font-size-lg:1.25rem;
  --font-size-xl:1.5rem;
  --font-size-2xl:2rem;
  --font-size-3xl:2.5rem;
  --spacing-xs:0.25rem;
  --spacing-sm:0.5rem;
  --spacing-md:1rem;
  --spacing-lg:1.5rem;
  --spacing-xl:2rem;
  --spacing-2xl:3rem;
  --sidebar-width:240px;
  --header-bar-height:56px;
  --max-width:1200px;
  --transition-duration:0.3s;
  --easing:cubic-bezier(0.4,0,0.2,1);
}

/* === GLOBAL STYLES === */
body{
  font-family:var(--font-body);
  font-weight:var(--font-weight-light);
  font-size:var(--font-size-base);
  color:var(--color-text);
  background:var(--color-bg);
  background-image:
    linear-gradient(var(--color-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--color-grid) 1px,transparent 1px);
  background-size:24px 24px;
  line-height:1.6;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);
  font-weight:var(--font-weight-bold);
  line-height:1.2;
  color:var(--color-text);
}
h1{font-size:var(--font-size-3xl)}h2{font-size:var(--font-size-2xl)}h3{font-size:var(--font-size-xl)}
h4{font-size:var(--font-size-lg)}h5{font-size:var(--font-size-md)}h6{font-size:var(--font-size-base)}
p,li{font-family:var(--font-body);font-weight:var(--font-weight-light);font-size:var(--font-size-base);line-height:1.6;color:var(--color-text)}
small{font-size:var(--font-size-sm)}
code,.mono{font-family:var(--font-mono);font-size:0.9em}

/* === SKIP LINK === */
.skip-link{
  position:absolute;top:-100%;left:0;z-index:1000;
  padding:var(--spacing-sm) var(--spacing-md);
  background:var(--color-primary);color:var(--color-white);
  font-family:var(--font-heading);font-weight:var(--font-weight-bold);
  font-size:var(--font-size-sm);
  transition:top 0.2s var(--easing);
}
.skip-link:focus{top:0;outline-offset:0}

/* === SITE WRAPPER === */
.site-wrapper{
  display:flex;min-height:100vh;
}

/* === HEADER / SIDEBAR === */
.site-header{
  position:relative;z-index:100;
  width:var(--sidebar-width);flex-shrink:0;
  background:var(--color-primary);color:var(--color-white);
  display:flex;flex-direction:column;
  border-right:1px solid rgba(255,255,255,0.06);
}
.header-bar{display:none}
.header-drawer{
  display:flex;flex-direction:column;height:100%;
  padding:var(--spacing-xl) var(--spacing-lg);
  position:sticky;top:0;
}
.header-brand{margin-bottom:var(--spacing-2xl)}
.brand-link{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-xs)}
.brand-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;
  background:var(--color-accent);color:var(--color-white);
  font-family:var(--font-heading);font-weight:var(--font-weight-bold);
  font-size:var(--font-size-lg);letter-spacing:-0.02em;
  line-height:1;
}
.brand-name{
  font-family:var(--font-heading);font-weight:var(--font-weight-bold);
  font-size:var(--font-size-lg);color:var(--color-white);
}
.brand-tagline{
  display:block;
  font-family:var(--font-mono);font-size:var(--font-size-xs);
  color:rgba(255,255,255,0.5);letter-spacing:0.04em;
  padding-left:calc(40px + var(--spacing-sm));
}

/* === NAVIGATION === */
.header-nav{flex:1;margin-bottom:var(--spacing-xl)}
.nav-list{display:flex;flex-direction:column;gap:var(--spacing-xs)}
.nav-link{
  display:flex;align-items:center;gap:var(--spacing-sm);
  padding:var(--spacing-sm) var(--spacing-sm);
  font-family:var(--font-heading);font-weight:var(--font-weight-bold);
  font-size:var(--font-size-sm);color:rgba(255,255,255,0.7);
  border-left:3px solid transparent;
  transition:color var(--transition-duration) var(--easing),border-color var(--transition-duration) var(--easing),background var(--transition-duration) var(--easing);
  position:relative;
}
.nav-link::before{
  content:'';position:absolute;left:-3px;top:50%;transform:translateY(-50%);
  width:3px;height:3px;border-radius:0;
  background:rgba(255,255,255,0.2);
  transition:background var(--transition-duration) var(--easing),height var(--transition-duration) var(--easing);
}
.nav-link:hover{color:var(--color-success);border-left-color:var(--color-success)}
.nav-link:hover::before{background:var(--color-success);height:12px;width:3px}
.nav-link[aria-current="page"]{color:var(--color-accent);border-left-color:var(--color-accent)}
.nav-link[aria-current="page"]::before{background:var(--color-accent);height:16px;width:3px}
.nav-index{
  font-family:var(--font-mono);font-size:var(--font-size-xs);
  color:rgba(255,255,255,0.3);min-width:28px;
  transition:color var(--transition-duration) var(--easing);
}
.nav-link:hover .nav-index{color:rgba(255,255,255,0.6)}
.nav-link[aria-current="page"] .nav-index{color:var(--color-accent)}

/* === HEADER ACTIONS === */
.header-actions{margin-bottom:var(--spacing-lg)}
.header-footer-meta{
  border-top:1px solid rgba(255,255,255,0.08);
  padding-top:var(--spacing-md);
}
.header-version{
  font-family:var(--font-mono);font-size:var(--font-size-xs);
  color:rgba(255,255,255,0.3);
}

/* === BUTTONS === */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-heading);font-weight:var(--font-weight-bold);
  font-size:var(--font-size-sm);line-height:1;
  padding:var(--spacing-sm) var(--spacing-lg);
  border:1px solid transparent;
  transition:all var(--transition-duration) var(--easing);
  text-align:center;cursor:pointer;
}
.btn-primary{
  background:var(--color-accent);color:var(--color-white);border-color:var(--color-accent);
}
.btn-primary:hover{background:#d04d2e;border-color:#d04d2e}
.btn-sm{padding:var(--spacing-xs) var(--spacing-md);font-size:var(--font-size-xs)}
.btn-outline{
  background:transparent;color:var(--color-primary);border-color:var(--color-primary);
}
.btn-outline:hover{background:var(--color-primary);color:var(--color-white)}

/* === FOOTER === */
.site-footer{
  background:var(--color-primary);color:var(--color-white);
  border-top:1px solid rgba(255,255,255,0.06);
}
.footer-inner{
  max-width:var(--max-width);margin:0 auto;
  padding:var(--spacing-2xl) var(--spacing-xl);
  display:grid;grid-template-columns:2fr 1fr 1.5fr;gap:var(--spacing-2xl);
}
.footer-brand-section{}
.footer-brand-link{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}
.footer-brand-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;
  background:var(--color-accent);color:var(--color-white);
  font-family:var(--font-heading);font-weight:var(--font-weight-bold);
  font-size:var(--font-size-md);line-height:1;
}
.footer-brand-name{
  font-family:var(--font-heading);font-weight:var(--font-weight-bold);
  font-size:var(--font-size-lg);color:var(--color-white);
}
.footer-desc{font-size:var(--font-size-sm);color:rgba(255,255,255,0.6);line-height:1.6;max-width:320px}
.footer-heading{
  font-family:var(--font-heading);font-weight:var(--font-weight-bold);
  font-size:var(--font-size-sm);color:var(--color-white);
  margin-bottom:var(--spacing-md);letter-spacing:0.03em;
  text-transform:uppercase;
}
.footer-links,.footer-contact-list{display:flex;flex-direction:column;gap:var(--spacing-sm)}
.footer-links a,.footer-contact-list a,.footer-contact-list li{
  font-size:var(--font-size-sm);color:rgba(255,255,255,0.6);
  transition:color var(--transition-duration) var(--easing);
}
.footer-links a:hover{color:var(--color-accent)}
.footer-contact-list a:hover{color:var(--color-success)}
.footer-contact-list li{color:rgba(255,255,255,0.5)}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.06);
  padding:var(--spacing-md) var(--spacing-xl);
  text-align:center;
}
.footer-bottom small{font-size:var(--font-size-xs);color:rgba(255,255,255,0.3)}

/* === BREADCRUMB === */
.breadcrumb{display:flex;flex-wrap:wrap;gap:var(--spacing-xs);align-items:center;padding:var(--spacing-md) 0;font-size:var(--font-size-sm)}
.breadcrumb-item{color:var(--color-text-secondary);font-family:var(--font-body);font-weight:var(--font-weight-light)}
.breadcrumb-item a{color:var(--color-text-secondary);transition:color var(--transition-duration) var(--easing)}
.breadcrumb-item a:hover{color:var(--color-accent)}
.breadcrumb-item+.breadcrumb-item::before{content:"/";margin-right:var(--spacing-xs);color:var(--color-border)}

/* === MAIN CONTENT === */
#main-content{flex:1;width:100%}

/* === GRID SYSTEM === */
.grid{display:grid;gap:var(--spacing-lg)}
.grid-cols-2{grid-template-columns:repeat(2,1fr)}
.grid-cols-3{grid-template-columns:repeat(3,1fr)}
.grid-cols-4{grid-template-columns:repeat(4,1fr)}
.grid-cols-6{grid-template-columns:repeat(6,1fr)}
.grid-cols-12{grid-template-columns:repeat(12,1fr)}
.col-span-2{grid-column:span 2}
.col-span-3{grid-column:span 3}
.col-span-4{grid-column:span 4}
.col-span-6{grid-column:span 6}
.col-span-12{grid-column:span 12}

/* === CARD === */
.card{
  background:var(--color-light);border:1px solid var(--color-border);
  padding:var(--spacing-lg);
}
.card-title{font-family:var(--font-heading);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);margin-bottom:var(--spacing-sm)}
.card-body{font-size:var(--font-size-sm);color:var(--color-text-secondary);line-height:1.6}

/* === CONTAINER === */
.container{max-width:var(--max-width);margin:0 auto;padding:0 var(--spacing-xl)}

/* === BACK TO TOP === */
.scroll-top{
  position:fixed;bottom:var(--spacing-xl);right:var(--spacing-xl);z-index:200;
  width:44px;height:44px;
  background:var(--color-accent);color:var(--color-white);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--font-size-lg);line-height:1;
  opacity:0;visibility:hidden;
  transition:opacity var(--transition-duration) var(--easing),visibility var(--transition-duration) var(--easing),transform var(--transition-duration) var(--easing);
  transform:translateY(12px);
  border:none;cursor:pointer;
}
.scroll-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.scroll-top:hover{background:#d04d2e}

/* === RESPONSIVE === */
@media(max-width:1024px){
  .footer-inner{grid-template-columns:1fr 1fr;gap:var(--spacing-xl)}
  .footer-brand-section{grid-column:1/-1}
}
@media(max-width:768px){
  :root{--sidebar-width:100%}
  .site-wrapper{flex-direction:column}
  .site-header{
    width:100%;border-right:none;
    position:sticky;top:0;z-index:200;
  }
  .header-bar{
    display:flex;align-items:center;justify-content:space-between;
    height:var(--header-bar-height);padding:0 var(--spacing-md);
    background:var(--color-primary);position:relative;z-index:2;
  }
  .header-logo{
    font-family:var(--font-heading);font-weight:var(--font-weight-bold);
    font-size:var(--font-size-md);color:var(--color-white);
  }
  .nav-toggle{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    width:40px;height:40px;background:transparent;border:none;cursor:pointer;
    position:relative;
  }
  .nav-toggle-icon,.nav-toggle-icon::before,.nav-toggle-icon::after{
    display:block;width:22px;height:2px;
    background:var(--color-white);
    transition:all var(--transition-duration) var(--easing);
    position:relative;
  }
  .nav-toggle-icon::before,.nav-toggle-icon::after{content:'';position:absolute;left:0}
  .nav-toggle-icon::before{top:-7px}
  .nav-toggle-icon::after{top:7px}
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon{background:transparent}
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon::before{top:0;transform:rotate(45deg)}
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon::after{top:0;transform:rotate(-45deg)}
  .header-drawer{
    position:fixed;top:var(--header-bar-height);left:0;width:280px;height:calc(100vh - var(--header-bar-height));
    transform:translateX(-100%);transition:transform var(--transition-duration) var(--easing);
    overflow-y:auto;z-index:200;padding:var(--spacing-lg);
    background:var(--color-primary);border-right:1px solid rgba(255,255,255,0.06);
  }
  .site-header[data-open] .header-drawer{transform:translateX(0)}
  .header-brand{margin-bottom:var(--spacing-xl)}
  .header-actions{margin-top:auto}
  .footer-inner{grid-template-columns:1fr;gap:var(--spacing-xl)}
  .footer-brand-section{grid-column:1}
  .container{padding:0 var(--spacing-md)}
  .grid-cols-2,.grid-cols-3,.grid-cols-4{grid-template-columns:1fr}
  .col-span-2,.col-span-3,.col-span-4,.col-span-6{grid-column:span 1}
  .scroll-top{bottom:var(--spacing-md);right:var(--spacing-md)}
}
@media(max-width:480px){
  .header-drawer{width:100%}
}

/* === REDUCED MOTION === */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0.01ms!important;animation-duration:0.01ms!important;scroll-behavior:auto!important}
  .header-drawer{transition:none!important}
  .nav-toggle-icon,.nav-toggle-icon::before,.nav-toggle-icon::after{transition:none!important}
  .scroll-top{transition:none!important}
  .nav-link{transition:none!important}
  .btn{transition:none!important}
  .footer-links a{transition:none!important}
  .footer-contact-list a{transition:none!important}
}

/* === UTILITY === */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.text-center{text-align:center}
.text-accent{color:var(--color-accent)}
.text-success{color:var(--color-success)}
.mt-lg{margin-top:var(--spacing-lg)}
.mb-lg{margin-bottom:var(--spacing-lg)}
.p-lg{padding:var(--spacing-lg)}