:root{
      /* Light theme (default) */
      --bg:#f7f8fb;
      --bg2:#ffffff;
      --text:#0b1220;
      --muted:#4b5565;
      --brand:#f59e0b;
      --accent:#2563eb;
      --border: rgba(15,23,42,.12);
      --shadow: 0 14px 45px rgba(2,6,23,.10);
      --radius: 18px;
      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";

      /* Surfaces */
      --cardA: rgba(255,255,255,.88);
      --cardB: rgba(255,255,255,.70);
      --chip: rgba(2,6,23,.04);
      --surface: #ffffff; /* solid surface for nested elements (prevents glow bleed) */

      /* Background glows (no color-mix → robust) */
      --accentGlow: rgba(37,99,235,.18);
      --accentGlowSoft: rgba(37,99,235,.10);
      --brandGlow: rgba(245,158,11,.14);

      /* Rings / UI accents */
      --brandRing: rgba(245,158,11,.18);

      /* Primary button */
      --primaryA: #fcd34d;
      --primaryB: #f59e0b;
      --primaryBorder: rgba(245,158,11,.55);
      --primaryText: #111827;

      /* Thumbnails */
      --thumbAccent: rgba(37,99,235,.35);
      --thumbBrand: rgba(245,158,11,.28);
      --thumbBaseA: rgba(255,255,255,.92);
      --thumbBaseB: rgba(255,255,255,.78);

      /* Topbar */
      --topbarBg: rgba(255,255,255,.72);

      /* Section accents */
      --sectionAlt: transparent; /* keep sections consistent; accent is on the panel */
      --panelAccentA: rgba(37,99,235,.22);
      --panelAccentB: rgba(245,158,11,.18);
    }

    /* Dark theme override */
    html[data-theme="dark"]{
      --bg:#0b0f19;
      --bg2:#0b0f19;
      --text:#e8eefc;
      --muted:#aab6d6;
      --brand:#f7c948;
      --accent:#6ea8fe;
      --border: rgba(255,255,255,.10);
      --shadow: 0 18px 60px rgba(0,0,0,.45);
      --cardA: rgba(255,255,255,.06);
      --cardB: rgba(255,255,255,.03);
      --chip: rgba(255,255,255,.06);
      --surface: #0f1627; /* solid surface to avoid halo/shine */

      /* Background glows */
      --accentGlow: rgba(110,168,254,.18);
      --accentGlowSoft: rgba(110,168,254,.10);
      --brandGlow: rgba(247,201,72,.14);

      /* Rings / UI accents */
      --brandRing: rgba(247,201,72,.18);

      /* Primary button */
      --primaryA: #fcd34d;
      --primaryB: #f59e0b;
      --primaryBorder: rgba(247,201,72,.55);
      --primaryText: #111827;

      /* Thumbnails */
      --thumbAccent: rgba(110,168,254,.35);
      --thumbBrand: rgba(247,201,72,.28);
      --thumbBaseA: rgba(255,255,255,.06);
      --thumbBaseB: rgba(255,255,255,.03);

      /* Topbar */
      --topbarBg: rgba(11,15,25,.60);

      /* Section accents */
      --sectionAlt: transparent;
      --panelAccentA: rgba(110,168,254,.22);
      --panelAccentB: rgba(247,201,72,.18);
    }

    /* Auto = follow system */
    @media (prefers-color-scheme: dark){
      html[data-theme="auto"]{
        --bg:#0b0f19;
        --bg2:#0b0f19;
        --text:#e8eefc;
        --muted:#aab6d6;
        --brand:#f7c948;
        --accent:#6ea8fe;
        --border: rgba(255,255,255,.10);
        --shadow: 0 18px 60px rgba(0,0,0,.45);
        --cardA: rgba(255,255,255,.06);
        --cardB: rgba(255,255,255,.03);
        --chip: rgba(255,255,255,.06);
      --surface: #0f1627; /* solid surface to avoid halo/shine */

        --accentGlow: rgba(110,168,254,.18);
        --accentGlowSoft: rgba(110,168,254,.10);
        --brandGlow: rgba(247,201,72,.14);

        /* Rings / UI accents */
        --brandRing: rgba(247,201,72,.18);

        /* Primary button */
        --primaryA: #fcd34d;
        --primaryB: #f59e0b;
        --primaryBorder: rgba(247,201,72,.55);
        --primaryText: #111827;

        /* Thumbnails */
        --thumbAccent: rgba(110,168,254,.35);
        --thumbBrand: rgba(247,201,72,.28);
        --thumbBaseA: rgba(255,255,255,.06);
        --thumbBaseB: rgba(255,255,255,.03);

        --topbarBg: rgba(11,15,25,.60);

        --sectionAlt: transparent;
        --panelAccentA: rgba(110,168,254,.22);
        --panelAccentB: rgba(247,201,72,.18);
      }
    }

    *{ box-sizing:border-box; }
    html{ height:100%; background: var(--bg); }
    body{ min-height:100%; }
    body{
      margin:0; font-family:var(--sans);
      color:var(--text);
      background:
        radial-gradient(1000px 600px at 10% 10%, var(--accentGlow), transparent 60%),
        radial-gradient(900px 500px at 90% 20%, var(--brandGlow), transparent 55%),
        radial-gradient(900px 600px at 50% 100%, var(--accentGlowSoft), transparent 60%),
        var(--bg);
      line-height:1.55;
    }

    a{ color:inherit; text-decoration:none; }
    a:hover{ opacity:.92; }
    .container{ width:min(1120px, 92vw); margin:0 auto; }

    /* Topbar */
    .topbar{
      position:sticky; top:0; z-index:50;
      backdrop-filter: blur(10px);
      background: var(--topbarBg);
      border-bottom: 1px solid var(--border);
    }
    /* .topbar-inner remains unchanged */

    .topbar-inner{
      border-bottom: 1px solid var(--border);
    }
    .topbar-inner{
      display:flex; align-items:center; justify-content:space-between;
      padding:12px 0;
      gap:14px;
    }
    .brand{
      display:flex; gap:10px; align-items:center;
      font-weight:800; letter-spacing:.2px;
      white-space:nowrap;
    }
    .dot{
      width:10px; height:10px; border-radius:99px; background:var(--brand);
      box-shadow: 0 0 0 6px var(--brandRing);
    }
    nav{
      display:flex; gap:10px; align-items:center; flex-wrap:wrap;
      justify-content:flex-end;
    }
    nav a{
      font-size:14px; color:var(--muted);
      padding:8px 10px; border-radius:999px;
      border: 1px solid transparent;
    }
    nav a:hover{
      background: var(--chip);
      border-color: var(--border);
      color: var(--text);
    }

    .top-actions{ display:flex; gap:10px; align-items:center; }
    .iconbtn{
      display:inline-flex; align-items:center; justify-content:center;
      gap:8px;
      padding:8px 10px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--chip);
      color: var(--text);
      cursor:pointer;
      font-weight:700;
      font-size:13px;
    }
    .iconbtn:hover{ transform: translateY(-1px); transition: .15s ease; }
    .icon{
      width:18px;
      height:18px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      vertical-align:middle;
      line-height:1;
      font-size:18px;
      flex: 0 0 auto;
    }
    .icon.sm{ width:16px; height:16px; font-size:16px; }

    /* Hero */
    .hero{ padding:44px 0 18px; }
    /* CV layout */
    .cv{ padding: 6px 0 10px; }
    .cv-grid{
      display:grid;
      grid-template-columns: 1fr 360px; /* main left, sidebar right */
      grid-template-areas: "main side";
      gap:18px;
      align-items:start;
      padding-bottom: 10px;
    }
    .cv-side{
      grid-area: side;
      position: sticky;
      top: 74px; /* below topbar */
      align-self:start;
      display:flex;
      flex-direction:column;
      gap:14px;
    }
    .cv-main{
      grid-area: main;
      display:flex;
      flex-direction:column;
      gap:14px;
      min-width: 0; /* prevent overflow from pushing layout */
    }
    .cv-side-panel{ padding: 16px; }
    .cv-skillgroup{ display:grid; gap:12px; }
    .cv-links{ display:grid; gap:10px; }
    .cv-main{
      grid-column: 1; /* main on the left */
      display:flex; flex-direction:column; gap:14px;
    }
    .cv-section{ padding:0; border-top:none; }

    .cv-hero{ padding:22px; }

    .card{
      background: linear-gradient(180deg, var(--cardA), var(--cardB));
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }
    .hero-card{ padding:24px; }
    .hero-head{
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .hero-body{
      display:grid;
      grid-template-columns: 1fr auto;
      gap:18px;
      align-items:start;
    }
    .hero-invite{
      margin-top: 2px;
      max-width: 290px;
      white-space: normal;
      text-align: center;
      padding: 16px 20px;
      font-size: 17px;
      font-weight: 900;
      border-radius: 14px;
      background: linear-gradient(135deg, #2563eb, #f59e0b);
      color:#fff;
      border-color: rgba(37,99,235,.45);
      box-shadow:
        0 12px 26px rgba(37,99,235,.28),
        0 0 0 3px rgba(37,99,235,.12);
    }
    .hero-invite:hover{
      transform: translateY(-2px);
      filter: brightness(1.03);
    }
    .kicker{
      display:inline-flex; gap:10px; align-items:center;
      font-family: var(--mono);
      font-size:12px; color: var(--muted);
      border: 1px solid var(--border);
      padding:8px 12px; border-radius: 999px;
      background: var(--chip);
    }
    h1{
      margin:14px 0 10px;
      font-size: clamp(28px, 4vw, 46px);
      line-height:1.08;
      letter-spacing:-.5px;
    }
    .subhead{
      color: var(--muted);
      font-size: 16px;
      max-width: 70ch;
      margin: 0;
    }
    .subhead,
    .about-copy p,
    .readme-content p,
    .project p,
    .box > p{
      text-align: justify;
      text-justify: inter-word;
      hyphens: auto;
    }
    .chips{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
    .chip{
      display:inline-flex; align-items:center; gap:8px;
      padding:8px 10px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--chip);
      color: var(--text);
      font-size: 13px;
      font-weight: 700;
    }
    .about-grid{
      display:grid;
      grid-template-columns: 1fr 150px;
      gap:18px;
      align-items:start;
    }
    .about-photo{
      width:150px;
      height:150px;
      object-fit: cover;
      border-radius: 14px;
      border: 1px solid var(--border);
      background: var(--surface);
    }
    .about-copy{
      display:grid;
      gap:10px;
    }
    .about-copy p{
      margin:0;
      color: var(--muted);
    }
    .about-tags{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:4px;
    }

    .cta{
      display:flex; gap:12px; flex-wrap:wrap;
      margin-top:18px;
    }
    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      gap:10px;
      padding:12px 14px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: var(--chip);
      color: var(--text);
      font-weight:800;
      font-size:14px;
    }
    .btn.primary{
      background: linear-gradient(180deg, var(--primaryA), var(--primaryB));
      color: var(--primaryText);
      border-color: var(--primaryBorder);
    }
    .btn:hover{ transform: translateY(-1px); transition: .15s ease; }

    .side-card{ padding:18px; display:flex; flex-direction:column; gap:12px; }
    .side-title{ font-weight:900; letter-spacing:.2px; }
    .mini{
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-auto-rows: 1fr;
      align-items: stretch;
      gap:10px;
    }
    .pill{
      display:flex;
      flex-direction:column;
      justify-content:flex-start;
      padding:10px 12px;
      border-radius: 14px;
      border: 1px solid var(--border);
      background: var(--chip);
      height:100%;
    }
    .pill .label{ font-size:12px; color:var(--muted); }
    .pill .value{ font-weight:900; margin-top:2px; line-height:1.25; }
    .pill-list{
      display:grid;
      gap:6px;
    }
    .pill-list span{
      display:inline-flex;
      align-items:center;
      gap:8px;
    }
    .pill-list span::before{
      content:"•";
      color: var(--muted);
      font-weight:700;
      font-size: 12px;
      line-height:1;
    }

    /* Sections + visual boundaries */
    section{ padding:30px 0; border-top: 1px solid var(--border); }
    section:first-of-type{ border-top: none; }
    .section-alt{ background: var(--sectionAlt); }

    .section-shell{ padding: 18px 0; }
    .section-panel{
      position: relative;
      background: linear-gradient(180deg, var(--cardA), var(--cardB));
      border: 1px solid var(--border);
      border-radius: calc(var(--radius) + 4px);
      padding: 18px;
      overflow: hidden;
    }

    /* Subtle accent strip for visual separation (works in both themes) */
    .section-panel::before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background:
        radial-gradient(420px 180px at 20% 0%, var(--panelAccentA), transparent 60%),
        radial-gradient(420px 180px at 80% 0%, var(--panelAccentB), transparent 62%);
      opacity:.65;
    }
    .section-panel > *{ position: relative; }
    .section-title{
      display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap;
      margin-bottom:12px;
    }
    .section-title h2{ margin:0; font-size: 20px; letter-spacing:.2px; }
    .section-title p{ margin:0; color: var(--muted); font-size:14px; }

    /* Grids */
    .grid-3{
      display:flex;
      gap:14px;
      overflow-x:auto;
      padding-bottom:6px;
      align-items: stretch;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
    }
    .grid-3::-webkit-scrollbar{ height:8px; }
    .grid-3::-webkit-scrollbar-thumb{
      background: var(--border);
      border-radius: 999px;
    }
    #projekte .project{
      flex: 0 0 340px; /* fixed card width for horizontal scroll */
      width: 340px;
      min-width: 340px;
      max-width: 340px;
      scroll-snap-align: start;
    }
    .grid-2{ display:grid; grid-template-columns: repeat(2, 1fr); gap:14px; }

    .box{
      padding:16px;
      border-radius: var(--radius);
      border: 1px solid var(--border);
      background: linear-gradient(180deg, var(--cardA), var(--cardB));
    }
    .boxhead{ display:flex; gap:10px; align-items:center; margin-bottom:8px; }
    .box h3{ margin:0; font-size:16px; }

    .bullets{ margin:0; padding-left:18px; color: var(--muted); }
    .bullets li{ margin:6px 0; }

    /* Project cards */

    /* README preview inside project cards */
    .readme{
      color: var(--muted);
      font-size: 13px;
      line-height: 1.55;
      border: 1px solid var(--border);
      background: var(--surface); /* solid fill prevents background bleed */
      border-radius: 14px;
      padding: 12px;
      --readmeFooterH: 44px;
      padding-bottom: var(--readmeFooterH); /* space for footer */
      overflow: hidden;
      position: relative;
      max-height: 170px;
      box-shadow: none; /* prevent visual shadow artifacts */
      margin-top: auto;
    }
    .readme.collapsed::after{
      content:"";
      position:absolute;
      left:0; right:0;
      bottom: var(--readmeFooterH); /* stop fade ABOVE the footer */
      height: 84px;
      background: linear-gradient(180deg, transparent, var(--surface));
      pointer-events:none;
      z-index: 1;
    }
    .readme.expanded{ max-height: none; }

    .readme-content{
      position: relative;
      z-index: 1;
      min-width: 0;
    }

    .readme-content :is(h1,h2,h3){
      margin: 10px 0 6px;
      color: var(--text);
      letter-spacing: .1px;
    }
    .readme-content h1{ font-size: 15px; }
    .readme-content h2{ font-size: 14px; }
    .readme-content h3{ font-size: 13px; }
    .readme-content p{ margin: 8px 0; }
    .readme-content ul{ margin: 8px 0; padding-left: 18px; }
    .readme-content code{ font-family: var(--mono); font-size: 12px; }
    .readme-content pre{ overflow:auto; padding:10px; border-radius:12px; border:1px solid var(--border); background: rgba(0,0,0,.04); }
    html[data-theme="dark"] .readme-content pre{ background: rgba(255,255,255,.05); }

    .readme-footer{
      position:absolute;
      left:0; right:0;
      bottom:0;
      padding: 8px 12px 10px;
      display:flex;
      justify-content:flex-end;
      background: var(--surface);
      pointer-events:none; /* let button opt-in */
      z-index: 2; /* ensure footer sits ABOVE the fade */
    }
    .readme-footer .readme-toggle{ pointer-events:auto; }

    .readme-toggle{
      background:none;
      border:none;
      padding:2px 6px;
      font-size:13px;
      font-weight:700;
      color: var(--accent);
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      gap:6px;
      border-radius: 10px;
    }
    .readme-toggle:hover{ background: rgba(0,0,0,.04); }
    html[data-theme="dark"] .readme-toggle:hover{ background: rgba(255,255,255,.06); }
    .readme-toggle::after{
      content:"▾";
      font-size:12px;
      transition: transform .2s ease;
    }
    .readme.expanded .readme-toggle::after{
      transform: rotate(180deg);
    }
    .readme-toggle[hidden]{ display:none; }

    /* Project cards */
    .project{
      padding:18px;
      border-radius: var(--radius);
      border: 1px solid var(--border);
      background: linear-gradient(180deg, var(--cardA), var(--cardB));
      display:flex; flex-direction:column; gap:12px;
      min-height: 230px;
    }
    .thumb{
      height: 92px;
      border-radius: 14px;
      border: 1px solid var(--border);
      background:
        radial-gradient(110px 110px at 20% 35%, var(--thumbAccent), transparent 60%),
        radial-gradient(140px 140px at 80% 25%, var(--thumbBrand), transparent 62%),
        linear-gradient(135deg, var(--thumbBaseA), var(--thumbBaseB));
      display:flex;
      align-items:flex-end;
      padding:10px 12px;
      color: var(--muted);
      font-family: var(--mono);
      font-size: 12px;
      overflow:hidden;
    }
    .project-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
    .project h3{ margin:0; font-size:16px; }
    .tagrow{
      display:flex;
      flex-wrap:wrap;     /* Desktop: alle Tags sichtbar */
      gap:8px;
      overflow: visible;
    }
    .tag{ flex: 0 0 auto; }
    .tag{
      font-size:12px;
      color: var(--muted);
      border: 1px solid var(--border);
      background: var(--chip);
      padding:6px 10px;
      border-radius: 999px;
      font-family: var(--mono);
      display:inline-flex;
      gap:8px;
      align-items:center;
    }
    .project p{ margin:0; color: var(--muted); font-size:14px; }
    .infra-table{
      width:100%;
      border-collapse: collapse;
      border:1px solid var(--border);
      border-radius: 10px;
      overflow: hidden;
      font-size:13px;
      background: var(--surface);
    }
    .infra-table th,
    .infra-table td{
      padding:8px 10px;
      border-bottom:1px solid var(--border);
      text-align:left;
      vertical-align:top;
    }
    .infra-table thead th{
      font-size:12px;
      color:var(--muted);
      text-transform: uppercase;
      letter-spacing:.03em;
      background: var(--chip);
    }
    .infra-table tbody tr:last-child td{
      border-bottom:none;
    }

    /* Desktop: keep project cards visually uniform */
    @media (min-width: 981px){
      #projekte .project{
        height: 100%;
      }
      #projekte .project-head{
        min-height: 44px;
      }
      #projekte .tagrow{
        min-height: 68px;
        align-content: flex-start;
      }
      #projekte .readme{
        height: 170px;
        max-height: none;
      }
      #projekte .readme.expanded{
        height: auto;
        max-height: none;
      }
    }
    

    /* Timeline */
    .timeline{ display:grid; gap:12px; }
    .event{
      display:grid;
      grid-template-columns: 150px 1fr;
      gap:14px;
      padding:16px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: linear-gradient(180deg, var(--cardA), var(--cardB));
    }
    .when{ font-family: var(--mono); font-size:12px; color: var(--muted); }
    .event h3{ margin:0 0 6px; font-size:15px; }
    .event h3.org-title{
      display:flex;
      align-items:center;
      gap:10px;
    }
    .org-logo{
      width:22px;
      height:22px;
      min-width:22px;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: var(--surface);
      object-fit: contain;
      padding:2px;
    }
    .org-logo.sm{
      width:18px;
      height:18px;
      min-width:18px;
      border-radius: 5px;
      padding:1px;
    }
    .org-fallback{
      width:22px;
      height:22px;
      min-width:22px;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: var(--surface);
      font-size: 13px;
      color: var(--muted);
    }
    .event ul{ margin:0; padding-left: 18px; color: var(--muted); }
    .event li{ margin:6px 0; }
    #werdegang .event ul{
      padding-left: 26px;
      margin-left: 4px;
    }
    #werdegang .event li{
      padding-left: 2px;
    }
    .edu-list{
      list-style: none;
      padding-left: 0;
    }
    .edu-list li{
      display:flex;
      align-items:flex-start;
      gap:10px;
      margin:8px 0;
    }

    /* Footer */
    footer{
      padding:28px 0 40px;
      color: var(--muted);
      border-top: 1px solid var(--border);
    }

    /* Responsive */
    @media (max-width: 980px){
      /* Layout collapses to single column; sidebar becomes normal flow */
      .grid-2{ grid-template-columns: 1fr; gap:14px; }
      .event{ grid-template-columns: 1fr; }
      nav{ justify-content:flex-start; }
      .topbar-inner{ align-items:flex-start; }

      .cv-grid{
        grid-template-columns: 1fr;
        grid-template-areas:
          "main"
          "side";
      }
      .cv-side{ position: static; top:auto; }
      .hero-body{
        grid-template-columns: 1fr;
      }
      .hero-invite{
        margin-top: 0;
        max-width: 420px;
      }
      .about-grid{
        grid-template-columns: 1fr;
      }
      .about-photo{
        width:min(150px, 42vw);
        height:auto;
      }

      /* Tags: auf Mobile kompakt (1 Zeile + horizontal scroll) */
      .tagrow{
        flex-wrap:nowrap;
        overflow-x:auto;
        padding-bottom:2px;
        -webkit-overflow-scrolling: touch;
      }
      .tagrow::-webkit-scrollbar{ height:6px; }
      .tagrow::-webkit-scrollbar-thumb{ background: var(--border); border-radius:999px; }

      /* Project carousel: cards become wider on small screens */
      #projekte .project{
        flex: 0 0 86vw;
        width: 86vw;
        min-width: 86vw;
        max-width: 86vw;
      }
    }

    @media (max-width: 520px){
      .container{ width:min(1120px, 94vw); }
      .hero{ padding:34px 0 14px; }
      .hero-card{ padding:18px; }
      .cv-hero{ padding:18px; }
      nav a{ padding:7px 9px; font-size:13px; }
      .kicker{ flex-wrap:wrap; }
      .chips{ gap:8px; }
      .chip{ font-size:12px; }
      #projekte .project{
        flex: 0 0 92vw;
        width: 92vw;
        min-width: 92vw;
        max-width: 92vw;
      }
    }

    .footer-tools{
      display:flex;
      align-items:center;
      gap:10px;
      font-family:var(--mono);
    }
    .footer-auth-btn{
      border:1px solid var(--border);
      background: transparent;
      color: var(--muted);
      border-radius: 999px;
      padding: 4px 9px;
      font-size: 11px;
      letter-spacing: .15px;
      cursor: pointer;
      opacity: .78;
    }
    .footer-auth-btn:hover{
      color: var(--text);
      opacity: 1;
      background: var(--chip);
    }

    .editor-backdrop{
      position: fixed;
      inset: 0;
      z-index: 95;
      background: rgba(11, 15, 25, .42);
      backdrop-filter: blur(2px);
    }

    .editor-panel{
      position: fixed;
      right: 18px;
      top: 18px;
      width: min(420px, calc(100vw - 36px));
      max-height: calc(100vh - 36px);
      overflow: auto;
      z-index: 100;
      border-radius: 16px;
      border: 1px solid var(--border);
      background: var(--surface);
      box-shadow: var(--shadow);
      padding: 14px;
      transform: translateY(10px) scale(.99);
      opacity: 0;
      pointer-events: none;
      transition: .2s ease;
    }
    .editor-login-panel{
      z-index: 101;
      width: min(460px, calc(100vw - 28px));
      left: 50%;
      right: auto;
      top: 10vh;
      transform: translateX(-50%) translateY(8px) scale(.99);
      background: var(--bg2);
      border-color: var(--border);
      box-shadow: 0 18px 60px rgba(2,6,23,.28);
      max-height: calc(100vh - 20vh);
    }
    .editor-panel.is-open{
      transform: translateY(0) scale(1);
      opacity: 1;
      pointer-events: auto;
    }
    .editor-login-panel.is-open{
      transform: translateX(-50%) translateY(0) scale(1);
    }
    .editor-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-bottom:12px;
      cursor: move;
      user-select: none;
    }
    .editor-head h2{
      margin:0;
      font-size: 18px;
    }
    .editor-iconbtn{
      width: 34px;
      height: 34px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: var(--chip);
      color: var(--text);
      cursor:pointer;
    }
    .editor-view{
      display:grid;
      gap:10px;
    }
    .editor-view[hidden]{
      display:none !important;
    }
    .editor-backdrop[hidden],
    .floating-text-toolbar[hidden],
    .block-inspector-panel[hidden]{
      display:none !important;
    }
    .editor-toolbar{
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap:8px;
    }
    .editor-btn{
      border: 1px solid var(--border);
      background: var(--chip);
      color: var(--text);
      border-radius: 10px;
      padding: 9px 10px;
      cursor:pointer;
      font-weight:700;
      font-size:13px;
      text-align:center;
    }
    .editor-btn:disabled{
      opacity:.6;
      cursor:not-allowed;
    }
    .editor-btn-primary{
      background: linear-gradient(180deg, var(--primaryA), var(--primaryB));
      color: var(--primaryText);
      border-color: var(--primaryBorder);
    }
    .editor-btn-toggle-active{
      border-color: var(--primaryBorder);
      background: linear-gradient(180deg, var(--primaryA), var(--primaryB));
      color: var(--primaryText);
    }
    .editor-label{
      font-size: 12px;
      font-weight: 700;
      color: var(--muted);
    }
    .editor-input,
    .editor-textarea{
      width:100%;
      border:1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      border-radius: 10px;
      padding: 10px 11px;
      font: inherit;
    }
    .editor-textarea{
      min-height: 110px;
      resize: vertical;
    }
    .editor-textarea-sm{
      min-height: 74px;
    }
    .editor-muted{
      margin:0;
      color:var(--muted);
      font-size: 13px;
    }
    .editor-statusline{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      flex-wrap:wrap;
    }
    .editor-badge{
      display:inline-flex;
      align-items:center;
      padding:5px 9px;
      border-radius: 999px;
      border:1px solid var(--border);
      background: var(--chip);
      font-size: 12px;
      font-weight:700;
    }
    .editor-divider{
      height:1px;
      background: var(--border);
      margin: 4px 0;
    }
    .floating-text-toolbar{
      position: fixed;
      z-index: 120;
      left: 50%;
      top: 12px;
      transform: translateX(-50%);
      width: min(720px, calc(100vw - 24px));
      border:1px solid var(--border);
      border-radius: 12px;
      background: var(--surface);
      box-shadow: var(--shadow);
      padding:8px;
      display:flex;
      align-items:center;
      gap:6px;
      overflow-x:auto;
    }
    .toolbar-drag-handle{
      flex:0 0 auto;
      width: 30px;
      min-width: 30px;
      height: 30px;
      border-radius: 8px;
      border:1px solid var(--border);
      background: var(--chip);
      color: var(--muted);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      cursor: move;
      user-select: none;
      touch-action: none;
    }
    .floating-text-toolbar .editor-btn{
      flex:0 0 auto;
      padding:7px 9px;
      border-radius: 8px;
      font-size:12px;
      font-weight:700;
      min-width: 42px;
    }
    .floating-text-toolbar .editor-btn.is-active{
      border-color: var(--primaryBorder);
      background: linear-gradient(180deg, var(--primaryA), var(--primaryB));
      color: var(--primaryText);
    }
    .block-inspector-panel{
      position: fixed;
      right: 18px;
      bottom: 18px;
      z-index: 118;
      width: min(360px, calc(100vw - 24px));
      max-height: min(78vh, 760px);
      overflow:auto;
      border:1px solid var(--border);
      border-radius: 14px;
      background: var(--surface);
      box-shadow: var(--shadow);
      padding:12px;
      display:grid;
      gap:10px;
    }
    .block-inspector-head{
      display:flex;
      align-items:center;
      justify-content:flex-start;
      gap:8px;
      user-select: none;
    }
    .block-inspector-head h3{
      margin:0;
      font-size:16px;
      flex: 1 1 auto;
    }
    .inspector-group{
      display:grid;
      gap:8px;
      border:1px solid var(--border);
      border-radius: 10px;
      background: var(--chip);
      padding:8px;
    }
    .inspector-group h4{
      margin:0;
      font-size:13px;
    }
    .inspector-element-label{
      font-size:12px;
      color:var(--muted);
      word-break: break-word;
      font-family: var(--mono);
    }
    .inspector-actions{
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap:6px;
    }
    .inspector-checkbox{
      display:flex;
      align-items:center;
      gap:8px;
      color:var(--text);
      font-size:13px;
      font-weight:600;
    }
    .inspector-image-hint{
      margin:0;
      font-size:12px;
      color:var(--muted);
    }
    .section-manager{
      display:grid;
      gap:8px;
      margin-bottom: 6px;
    }
    .section-item{
      border:1px solid var(--border);
      border-radius: 10px;
      padding:8px;
      background: var(--chip);
      display:grid;
      gap:6px;
    }
    .section-item-head{
      font-weight:700;
      font-size:13px;
      word-break: break-word;
    }
    .section-item-actions{
      display:flex;
      flex-wrap:wrap;
      gap:6px;
    }
    .section-item-actions button{
      border:1px solid var(--border);
      background: var(--surface);
      color:var(--text);
      border-radius: 8px;
      padding:6px 8px;
      cursor:pointer;
      font-size: 12px;
      font-weight:700;
    }
    .revision-list{
      display:grid;
      gap:8px;
      margin-bottom: 6px;
    }
    .revision-item{
      border:1px solid var(--border);
      border-radius: 10px;
      background: var(--chip);
      padding:8px;
      display:grid;
      gap:6px;
    }
    .revision-item-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      flex-wrap:wrap;
      font-size: 12px;
      color: var(--muted);
    }
    .revision-item-note{
      font-size:12px;
      font-weight:700;
      color:var(--text);
    }
    .revision-item-actions{
      display:flex;
      gap:6px;
      flex-wrap:wrap;
    }
    .revision-item-actions button{
      border:1px solid var(--border);
      background: var(--surface);
      color:var(--text);
      border-radius: 8px;
      padding:6px 8px;
      cursor:pointer;
      font-size: 12px;
      font-weight:700;
    }
    .editable-active [data-editor-editable="true"]{
      outline: 2px dashed rgba(37,99,235,.45);
      outline-offset: 2px;
      border-radius: 6px;
      transition: outline-color .2s ease;
    }
    .editable-active [data-editor-block="true"]{
      outline: 1px dashed rgba(37,99,235,.22);
      outline-offset: 3px;
      transition: outline-color .15s ease, box-shadow .15s ease;
    }
    .editable-active [data-editor-block="true"]:hover{
      outline-color: rgba(37,99,235,.42);
      box-shadow: 0 0 0 3px rgba(37,99,235,.08);
    }
    .editable-active [data-editor-block="true"].editor-block-selected{
      outline: 2px solid rgba(245,158,11,.65);
      box-shadow: 0 0 0 4px rgba(245,158,11,.15);
    }
    .editable-active img.editor-image-position-target{
      cursor: grab !important;
      touch-action: none;
    }
    .editable-active img.editor-image-position-target.editor-image-position-dragging{
      cursor: grabbing !important;
    }
    [data-editor-editable="true"]:focus{
      outline-color: rgba(245,158,11,.65);
      background: rgba(245,158,11,.08);
    }
    .editor-toast{
      position: fixed;
      left: 50%;
      bottom: 20px;
      transform: translateX(-50%) translateY(12px);
      opacity: 0;
      pointer-events: none;
      z-index: 110;
      border:1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      border-radius: 999px;
      padding:8px 14px;
      font-size: 13px;
      font-weight:700;
      transition: .2s ease;
    }
    .editor-toast.show{
      opacity:1;
      transform: translateX(-50%) translateY(0);
    }

    @media (max-width: 640px){
      .editor-panel{
        right: 10px;
        top: 10px;
        width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
      }
      .editor-login-panel{
        width: calc(100vw - 16px);
        left: 50%;
        right: auto;
        top: 8px;
        max-height: calc(100vh - 16px);
      }
      .editor-toolbar{
        grid-template-columns: 1fr;
      }
      .floating-text-toolbar{
        top: 8px;
        width: calc(100vw - 10px);
      }
      .block-inspector-panel{
        right: 5px;
        bottom: 5px;
        width: calc(100vw - 10px);
        max-height: 72vh;
      }
      .inspector-actions{
        grid-template-columns: 1fr;
      }
    }

    /* Print */
    @media print{
      .topbar{ position:static; backdrop-filter:none; background:#fff; border:none; }
      body{ background:#fff; color:#111; }
      .card,.box,.project,.event,.pill,.section-panel{ box-shadow:none; border:1px solid #ddd; background:#fff; }
      .btn,.link, nav,.top-actions{ display:none !important; }
      a{ color:#111; text-decoration:underline; }
    }