:root{
    --bg: #F4F1EA;            /* off-white quente */
    --bg-2: #ECE7DC;          /* off-white mais saturado para divisões */
    --paper: #FBF9F5;          /* card */
    --ink: #0A1B3D;            /* azul-marinho profundo */
    --ink-2: #1B2C52;
    --muted: #6B7593;
    --line: #E2DCCB;           /* linha sobre off-white */
    --line-strong: #C9C1AC;
    --orange: #EE6A14;         /* laranja Olimpo */
    --orange-soft: #F8E2D0;
    --blue: #1E3A8A;
    --blue-deep: #0A1B3D;
    --blue-soft: #DDE5F4;
    --shadow: 0 1px 0 rgba(10,27,61,.04), 0 10px 30px -18px rgba(10,27,61,.18);
    --shadow-hover: 0 1px 0 rgba(10,27,61,.06), 0 22px 44px -22px rgba(10,27,61,.28);
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  body{
    background:
      radial-gradient(1200px 600px at 90% -10%, rgba(238,106,20,.08), transparent 60%),
      radial-gradient(1000px 500px at -10% 110%, rgba(10,27,61,.06), transparent 60%),
      var(--bg);
    min-height:100vh;
  }
  .mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-feature-settings:"ss01";letter-spacing:.02em}

  /* layout shell */
  .shell{max-width:1320px;margin:0 auto;padding:36px 40px 80px}

  /* top bar */
  .topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 0 28px;border-bottom:1px solid var(--line)}
  .brand{display:flex;align-items:center;gap:14px}
  .logo{
    width:44px;height:44px;border-radius:12px;
    background: linear-gradient(135deg,#F58A3C,#EE6A14 60%,#C84F00);
    display:grid;place-items:center;color:white;font-weight:800;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 6px 16px -6px rgba(238,106,20,.55);
    position:relative;overflow:hidden;
  }
  .logo svg{width:24px;height:24px}
  .brand-text{display:flex;flex-direction:column;line-height:1}
  .brand-name{font-weight:800;font-size:15px;letter-spacing:.02em}
  .brand-sub{font-size:11px;color:var(--muted);margin-top:4px;letter-spacing:.16em;text-transform:uppercase}

  .top-actions{display:flex;align-items:center;gap:10px}
  .search{
    display:flex;align-items:center;gap:10px;
    background:var(--paper);border:1px solid var(--line);border-radius:999px;
    padding:10px 16px;min-width:320px;color:var(--muted);
    box-shadow:var(--shadow);
  }
  .search input{
    flex:1;border:0;outline:0;background:transparent;color:var(--ink);
    font:500 14px/1 "Plus Jakarta Sans",sans-serif;
  }
  .search input::placeholder{color:var(--muted)}
  .kbd{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--muted);border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:2px 6px;background:var(--bg)}
  .user-chip{display:flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;background:var(--paper);border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow)}
  .avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#0A1B3D,#1E3A8A);color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px}
  .user-meta{display:flex;flex-direction:column;line-height:1.1}
  .user-name{font-size:13px;font-weight:600}
  .user-role{font-size:11px;color:var(--muted)}

  /* hero */
  .hero{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:end;padding:48px 0 36px}
  .hero.hero-solo{grid-template-columns:1fr;padding:56px 0 20px}
  .hero.hero-solo .lede{max-width:760px}
  .eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--ink);background:var(--paper);border:1px solid var(--line);padding:7px 12px;border-radius:999px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600}
  .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(238,106,20,.18)}
  h1{font-size:clamp(44px,5.4vw,78px);line-height:.95;letter-spacing:-.025em;margin:18px 0 18px;font-weight:800}
  h1 .accent{color:var(--orange);font-style:italic;font-weight:700}
  .lede{max-width:560px;color:var(--ink-2);font-size:17px;line-height:1.55}
  .meta-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:18px 0 0;border-top:1px dashed var(--line-strong);margin-top:28px}
  .meta-item{display:flex;flex-direction:column;gap:6px}
  .meta-k{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:600}
  .meta-v{font-family:"JetBrains Mono",monospace;font-size:14px;color:var(--ink);font-weight:500}
  .meta-v b{color:var(--orange);font-weight:600}

  .hero-side{
    background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:22px 22px 18px;
    box-shadow:var(--shadow);position:relative;overflow:hidden;
  }
  .hero-side::before{
    content:"";position:absolute;inset:0;background:
      radial-gradient(120% 80% at 100% 0%, rgba(238,106,20,.12), transparent 50%),
      radial-gradient(80% 60% at 0% 100%, rgba(10,27,61,.08), transparent 60%);
    pointer-events:none;
  }
  .hero-side-title{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:600;display:flex;align-items:center;justify-content:space-between}
  .hero-side-title .tag{color:var(--orange)}
  .quick-list{margin:18px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px;position:relative}
  .quick-list li{display:flex;align-items:center;gap:14px;padding:10px 8px;border-radius:10px;transition:background .15s ease}
  .quick-list li:hover{background:var(--bg-2);cursor:pointer}
  .qi{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:#fff;font-weight:700;font-size:11px;letter-spacing:.04em}
  .qm{flex:1;display:flex;flex-direction:column;line-height:1.15}
  .qm b{font-size:13.5px;font-weight:600}
  .qm span{font-size:11.5px;color:var(--muted);margin-top:2px}
  .qarr{color:var(--muted);font-family:"JetBrains Mono",monospace;font-size:14px}

  /* section divider */
  .area{margin-top:64px}
  .area-head{display:flex;align-items:flex-end;gap:24px;padding:0 0 22px;border-bottom:1px solid var(--line)}
  .area-num{
    font-family:"JetBrains Mono",monospace;font-size:13px;color:var(--orange);font-weight:600;
    display:flex;align-items:center;gap:10px;
  }
  .area-num::before{content:"";width:28px;height:1px;background:var(--orange)}
  .area-title{font-size:36px;font-weight:700;letter-spacing:-.015em;line-height:1;margin:0;flex:1}
  .area-desc{color:var(--muted);font-size:13.5px;max-width:340px;line-height:1.5;margin-bottom:4px;text-align:right}

  /* grid of cards */
  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}

  .card{
    position:relative;background:var(--paper);border:1px solid var(--line);border-radius:16px;
    padding:22px 22px 20px;box-shadow:var(--shadow);overflow:hidden;
    transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
    display:flex;flex-direction:column;min-height:230px;text-decoration:none;color:inherit;
  }
  .card:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);border-color:var(--line-strong)}
  .card:hover .arrow{transform:translate(2px,-2px);color:var(--orange)}
  .card:hover .swatch::after{opacity:1}

  .card-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px}
  .swatch{
    width:46px;height:46px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px;letter-spacing:.02em;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 8px 20px -10px rgba(10,27,61,.4);
    position:relative;
  }
  .swatch::after{
    content:"";position:absolute;inset:-2px;border-radius:14px;border:1px dashed rgba(238,106,20,.55);
    opacity:0;transition:opacity .2s ease;
  }
  .arrow{
    width:34px;height:34px;border-radius:10px;border:1px solid var(--line);
    display:grid;place-items:center;color:var(--muted);
    transition:transform .2s ease,color .2s ease,border-color .2s ease;
  }
  .arrow svg{width:14px;height:14px}

  .card-name{font-size:20px;font-weight:700;letter-spacing:-.01em;margin:0 0 8px}
  .card-name .pre{color:var(--muted);font-weight:500;margin-right:6px}
  .card-desc{font-size:13.5px;line-height:1.5;color:var(--ink-2);margin:0;flex:1}
  .card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding-top:14px;border-top:1px dashed var(--line)}
  .pill{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
  .status{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink-2);font-weight:500}
  .status .ldot{width:7px;height:7px;border-radius:50%;background:#1FB286;box-shadow:0 0 0 3px rgba(31,178,134,.18)}
  .status.beta .ldot{background:var(--orange);box-shadow:0 0 0 3px rgba(238,106,20,.2)}
  .status.dev .ldot{background:#A88E5B;box-shadow:0 0 0 3px rgba(168,142,91,.2)}

  /* category palettes */
  .sw-plan{background:linear-gradient(135deg,#F58A3C,#EE6A14)}
  .sw-com{background:linear-gradient(135deg,#1E3A8A,#0A1B3D)}
  .sw-ctrl{background:linear-gradient(135deg,#0A1B3D,#1B2C52);}
  .sw-gest{background:linear-gradient(135deg,#2D62D8,#1E3A8A)}

  .area-tag{
    display:inline-flex;align-items:center;gap:8px;font-family:"JetBrains Mono",monospace;
    font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-2);font-weight:600
  }
  .area-tag .sq{width:8px;height:8px;border-radius:2px}

  /* footer */
  footer{margin-top:80px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:12.5px}
  footer .mono{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}

  @media (max-width: 1080px){
    .hero{grid-template-columns:1fr;gap:24px}
    .grid{grid-template-columns:repeat(2,1fr)}
    .area-head{flex-wrap:wrap}
    .area-desc{text-align:left;max-width:none}
  }
  @media (max-width: 680px){
    .shell{padding:24px 20px 60px}
    .grid{grid-template-columns:1fr}
    .search{min-width:0;width:100%}
    .user-chip{display:none}
    h1{font-size:46px}
  }