/* ===== Theme variables ===== */
    :root{
      --bg: #0f1724;
      --card: #0b1220;
      --muted: #9aa4b2;
      --accent: linear-gradient(135deg,#7f5af0,#2db7f5);
      --glass: linear-gradient(90deg,#ffd86b,#ff6b6b);
      --text: #e6eef7;
      --success: #22c55e;
	  --dangereux:linear-gradient(90deg,#ff0000,#0000ff);
	  --line:#31363e;
    }
    [data-theme="light"]{
      --bg: #f4f4f4;
      --card: #f2f2f2;
      --muted: #55606a;
      --accent: linear-gradient(135deg,#667eea,#764ba2);
      --glass: linear-gradient(90deg,#ffd86b,#ff6b6b);
      --text: #0b1220;
      --success: #16a34a;
	  --dangereux:linear-gradient(90deg,#ff0000,#0000ff);
	  --line:#d3d7df;
    }

    /* ===== Base ===== */
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      background: var(--bg);
      color:var(--text);
      -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
      display:flex;align-items:center;justify-content:center;padding:36px;
    }

    .app{
      width:1100px;max-width:100%;height:720px;max-height:calc(100vh - 0px);
      background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 40%), var(--card);
      border-radius:18px;box-shadow:0 8px 30px rgba(2,6,23,0.6);overflow:hidden;position:relative;
      display:grid;grid-template-columns:360px 1fr;gap:0;backdrop-filter: blur(6px);
    }

    /* ===== Left panel (branding + nav) ===== */
    .left{
      padding:28px;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent), var(--card);
      border-right:1px solid rgba(255,255,255,0.03);display:flex;flex-direction:column;gap:20px;
    }
    .logo{font-weight:700;font-size:20px;letter-spacing:0.4px;display:flex;align-items:center;gap:12px}
    .logo .dot{width:12px;height:12px;border-radius:50%;background:var(--accent);background-clip:padding-box;box-shadow:0 6px 20px rgba(127,90,240,0.25);}
    .desc{color:var(--muted);font-size:13px}
    .nav{margin-top:12px;display:flex;flex-direction:column;gap:6px}
    .nav button{background:transparent;border:0;padding:10px 12px;border-radius:10px;color:var(--text);text-align:left;cursor:pointer;font-weight:600}
    .nav button.active{background:var(--glass);box-shadow:inset 0 1px 0 rgba(255,255,255,0.02)}

    /* ===== Right (content) ===== */
    .right{padding:34px;position:relative;overflow:hidden}
    .page{position:absolute;inset:34px;border-radius:12px;padding:26px;background:transparent;display:none}
    .page.show{display:block;animation:pageIn .45s cubic-bezier(.2,.9,.25,1);}
    @keyframes pageIn{from{transform:translateY(18px) scale(.995);opacity:0}to{transform:none;opacity:1}}

    /* ===== Forms ===== */
    .card{background:linear-gradient(180deg, rgba(255,255,255,0.012), transparent);border-radius:12px;padding:20px;border:1px solid rgba(255,255,255,0.03);box-shadow:0 6px 18px rgba(2,6,23,0.5)}
    .field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
    label{font-size:13px;color:var(--muted)}
    input[type=text],input[type=password],input[type=email]{padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:var(--bg);color:var(--text);outline:none}
    .actions{display:flex;gap:12px;align-items:center;margin-top:6px}
    .btn{padding:10px 16px;border-radius:10px;border:0;cursor:pointer;font-weight:700}
    .btn.primary{background:var(--accent);color:white}
    .btn.dangereux{background:var(--dangereux);color:white}
    .btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--text)}

    .muted{color:var(--muted);font-size:13px}

    /* ===== Workspace ===== */
    .workspace-grid{display:grid;grid-template-columns:1fr 320px;gap:10px;height:100%}
    .panel{background:var(--card);padding:16px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);height:100%;}
    .tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
    .tile{height:140px;border-radius:10px;padding:12px;position:relative;overflow:hidden}
    .tile .title{font-weight:700;}

    /* animated accents */
    .glow{position:absolute;inset:auto auto -40% -40%;width:60%;height:60%;filter:blur(40px);opacity:0.18;background:var(--accent);transform:rotate(20deg)}

    /* ===== Settings ===== */
    .switch{display:inline-flex;align-items:center;gap:10px}
    .toggle{width:54px;height:30px;background:rgba(255,255,255,0.06);border-radius:999px;position:relative;padding:4px;cursor:pointer}
    .knob{width:22px;height:22px;border-radius:50%;background:var(--card);box-shadow:0 4px 12px rgba(2,6,23,0.5);transition:all .22s ease}
    .toggle.on{background:linear-gradient(90deg,#ffd86b,#ff6b6b)}
    .toggle.on .knob{transform:translateX(24px)}

    /* small screens */
    @media (max-width:900px){
      .app{grid-template-columns:1fr;height:auto}
      .left{order:2}
      .right{order:1}
      .page{position:static;display:block;margin-bottom:18px}
    }