* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      background-color: #f1f5f9;
      font-family: 'Poppins', sans-serif;
      transition: background-color 0.3s, color 0.3s;
      overflow-x: hidden;
      width: 100%;
    }

    body.dark-mode {
      background-color: #0f172a;
      color: #f8fafc;
    }

    body.dark-mode .header-top {
      background-color: #1e293b;
    }

    /* 1. TOP RAINBOW LINE */
    .rainbow-line {
      height: 6px;
      width: 100%;
      background: linear-gradient(to right, #ef4444 0%, #f97316 20%, #eab308 40%, #10b981 60%, #3b82f6 80%, #8b5cf6 100%);
    }

    /* 2. HEADER TOP */
    .header-top {
      background: #ffffff;
      padding: 14px 16px;
      position: relative;
      text-align: center;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    .dark-mode-btn {
      position: absolute;
      top: 14px;
      right: 16px;
      background: #64748b;
      color: white;
      border: none;
      padding: 5px 12px;
      border-radius: 20px;
      cursor: pointer;
      font-size: 0.8rem;
      font-weight: 600;
    }

    .brand-logo {
      width: 48px;
      height: 48px;
      margin: 0 auto 6px;
      background: #ffffff;
      border: 3px solid #2563eb;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.4rem;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }

    .brand-title {
      font-size: 1.5rem;
      font-weight: 800;
      margin-bottom: 2px;
    }

    .title-blue { color: #2563eb; }
    .title-teal { color: #0284c7; }
    .title-green { color: #16a34a; }
    .title-red { color: #dc2626; }

    .header-tagline {
      font-size: 0.85rem;
      color: #475569;
      font-weight: 600;
      padding: 0 10px;
    }

    /* 3. MENU NAVBAR */
    .navbar {
      background: linear-gradient(90deg, #0f172a 0%, #1e1b4b 15%, #4338ca 45%, #6d28d9 75%, #a21caf 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 16px;
      position: sticky;
      top: 0;
      z-index: 1000;
      box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    }

    .nav-links {
      display: flex;
      list-style: none;
    }

    .nav-item {
      padding: 12px 16px;
      color: #ffffff;
      font-weight: 600;
      font-size: 0.9rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      user-select: none;
      transition: background 0.2s;
    }

    .nav-item:hover {
      background: rgba(255, 255, 255, 0.15);
    }

    .nav-item.active {
      background: #dc2626;
    }

    .nav-badge {
      background: white;
      color: #dc2626;
      border-radius: 50%;
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      font-size: 0.75rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
    }

    /* 4. PAGES / TABS */
    .page-view {
      display: none;
    }

    .page-view.active {
      display: block;
    }

    /* HOME HERO VIEW */
    .hero-container {
      max-width: 950px;
      margin: 25px auto;
      background: white;
      padding: 35px 25px;
      border-radius: 16px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    }

    body.dark-mode .hero-container {
      background: #1e293b;
    }

    .hero-title {
      font-size: 2rem;
      font-weight: 800;
      color: #0f172a;
      margin-bottom: 12px;
      text-align: center;
    }

    body.dark-mode .hero-title { color: #f8fafc; }

    .hero-subtitle {
      font-size: 1.05rem;
      color: #64748b;
      line-height: 1.6;
      max-width: 720px;
      margin: 0 auto 25px;
      text-align: center;
    }

    .btn-main {
      background: #dc2626;
      color: white;
      border: none;
      padding: 12px 32px;
      border-radius: 30px;
      font-size: 1.05rem;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 10px;
      box-shadow: 0 6px 20px rgba(220, 38, 38, 0.35);
      margin: 0 auto 35px;
      transition: 0.2s;
    }

    .btn-main:hover {
      transform: translateY(-3px);
    }

    .features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 16px;
      margin-top: 25px;
      text-align: left;
    }

    .feat-card {
      background: #f8fafc;
      padding: 18px;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
    }

    body.dark-mode .feat-card {
      background: #0f172a;
      border-color: #334155;
    }

    .feat-card h3 {
      font-size: 1rem;
      color: #1e293b;
      margin-bottom: 6px;
    }

    body.dark-mode .feat-card h3 { color: #f8fafc; }

    .feat-card p {
      font-size: 0.85rem;
      color: #64748b;
    }

    .article-section {
      margin-top: 40px;
      border-top: 2px dashed #e2e8f0;
      padding-top: 30px;
      text-align: left;
      line-height: 1.8;
      color: #334155;
    }

    body.dark-mode .article-section {
      border-color: #334155;
      color: #cbd5e1;
    }

    .article-section h2 {
      font-size: 1.35rem;
      color: #0f172a;
      margin: 20px 0 10px;
    }

    body.dark-mode .article-section h2 { color: #f1f5f9; }

    .article-section p {
      margin-bottom: 14px;
      font-size: 0.95rem;
    }

    /* ==============================================================
       MICROSOFT WORD STYLE RIBBON TOOLBAR
       ============================================================== */
    .copy-workspace {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px 8px 50px;
      position: relative;
      width: 100%;
    }

    .ribbon-container {
      position: sticky;
      top: 50px;
      z-index: 990;
      background: #ffffff;
      border-radius: 16px;
      box-shadow: 0 8px 25px rgba(0,0,0,0.12);
      border: 1px solid #e2e8f0;
      margin-bottom: 20px;
      width: 100%;
      max-width: 860px;
      backdrop-filter: blur(10px);
      overflow: hidden;
    }

    body.dark-mode .ribbon-container {
      background: #1e293b;
      border-color: #334155;
      box-shadow: 0 8px 25px rgba(0,0,0,0.4);
    }

    .ribbon-tabs-header {
      display: flex;
      background: #f8fafc;
      border-bottom: 1px solid #e2e8f0;
      padding: 4px 8px 0;
      gap: 4px;
      overflow-x: auto;
    }

    body.dark-mode .ribbon-tabs-header {
      background: #0f172a;
      border-color: #334155;
    }

    .ribbon-tab-btn {
      padding: 8px 18px;
      background: transparent;
      border: 1px solid transparent;
      border-bottom: none;
      border-radius: 8px 8px 0 0;
      font-family: inherit;
      font-size: 0.85rem;
      font-weight: 700;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
      transition: all 0.15s ease;
    }

    .ribbon-tab-btn:hover {
      color: #2563eb;
      background: rgba(241, 245, 249, 0.6);
    }

    .ribbon-tab-btn.active {
      color: #2563eb;
      background: #ffffff;
      border-color: #e2e8f0;
      border-bottom: 2px solid #ffffff;
      margin-bottom: -1px;
    }

    body.dark-mode .ribbon-tab-btn.active {
      background: #1e293b;
      color: #38bdf8;
      border-color: #334155;
      border-bottom: 2px solid #1e293b;
    }

    .ribbon-content-panel {
      padding: 10px 14px;
      display: none;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .ribbon-content-panel.active {
      display: flex;
    }

    .pen-item {
      padding: 6px 12px;
      border-radius: 20px;
      border: 2px solid transparent;
      cursor: pointer;
      font-weight: 700;
      font-size: 0.82rem;
      background: #f8fafc;
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }

    body.dark-mode .pen-item { background: #0f172a; }

    .style-group {
      display: flex;
      align-items: center;
      background: #f1f5f9;
      border-radius: 20px;
      padding: 3px 6px;
      gap: 3px;
      border: 1px solid #cbd5e1;
    }

    body.dark-mode .style-group {
      background: #0f172a;
      border-color: #334155;
    }

    .style-btn {
      background: transparent;
      border: none;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      cursor: pointer;
      font-weight: 800;
      font-size: 0.85rem;
      color: #334155;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    body.dark-mode .style-btn { color: #f1f5f9; }

    .hl-color-pill {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 1px solid rgba(0,0,0,0.2);
      cursor: pointer;
      display: inline-block;
      margin: 0 1px;
    }

    .tool-move { color: #7c3aed; background: #f5f3ff; border: 2px solid #ddd6fe; }
    .tool-move.active { background: #7c3aed !important; color: white !important; }

    .tool-hindi { color: #ea580c; background: #fff7ed; border: 2px solid #fed7aa; }
    .tool-hindi.active { background: #ea580c !important; color: white !important; }

    .tool-voice { color: #0284c7; background: #f0f9ff; border: 2px solid #bae6fd; transition: all 0.2s ease; }
    .tool-voice.recording {
      background: #ef4444 !important;
      color: white !important;
      border-color: #b91c1c !important;
      animation: micPulse 1.2s infinite alternate;
    }

    @keyframes micPulse {
      0% { transform: scale(1); }
      100% { transform: scale(1.05); }
    }

    .tool-speak {
      color: #059669;
      background: #ecfdf5;
      border: 2px solid #a7f3d0;
      transition: all 0.2s ease;
    }

    .tool-speak.speaking {
      background: #10b981 !important;
      color: white !important;
      border-color: #047857 !important;
      animation: micPulse 1s infinite alternate;
    }

    .dropdown-container {
      display: flex;
      align-items: center;
      gap: 5px;
      background: #f1f5f9;
      padding: 5px 10px;
      border-radius: 20px;
      border: 1px solid #cbd5e1;
    }

    body.dark-mode .dropdown-container {
      background: #0f172a;
      border-color: #334155;
    }

    .page-dropdown {
      border: none;
      background: transparent;
      font-size: 0.82rem;
      font-weight: 600;
      color: #334155;
      outline: none;
      cursor: pointer;
    }

    body.dark-mode .page-dropdown { color: #f1f5f9; background: #0f172a; }

    .action-btn {
      color: white;
      border: none;
      padding: 6px 13px;
      border-radius: 20px;
      cursor: pointer;
      font-weight: bold;
      font-size: 0.82rem;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      transition: transform 0.1s;
    }

    .action-btn:hover { transform: translateY(-1px); }
    .btn-image { background: #0284c7; }
    .btn-emoji { background: #f59e0b; color: #1e293b; font-weight: 800; }
    .btn-save { background: #2563eb; }
    .btn-png { background: #8b5cf6; }
    .btn-pdf { background: #059669; }
    .btn-clear { background: #ef4444; }

    .page-nav-btn {
      background: #f1f5f9;
      color: #1e293b;
      border: 1px solid #cbd5e1;
      padding: 5px 12px;
      border-radius: 20px;
      cursor: pointer;
      font-weight: 700;
      font-size: 0.82rem;
    }

    body.dark-mode .page-nav-btn { background: #334155; color: #f8fafc; }
    .btn-add-page { background: #10b981 !important; color: white !important; border: none !important; }
    .btn-del-page { background: #fee2e2 !important; color: #dc2626 !important; border: 1px solid #fca5a5 !important; }
    .page-counter-badge { font-size: 0.85rem; font-weight: 800; color: #2563eb; padding: 4px 10px; background: #eff6ff; border-radius: 15px; }

    /* EMOJI & SYMBOLS POPUP */
    .emoji-picker-popup {
      position: absolute;
      top: 130px;
      background: white;
      border-radius: 16px;
      padding: 12px;
      box-shadow: 0 15px 40px rgba(0,0,0,0.3);
      z-index: 1200;
      display: none;
      width: 90vw;
      max-width: 370px;
      max-height: 380px;
      border: 1px solid #cbd5e1;
    }

    body.dark-mode .emoji-picker-popup { background: #1e293b; border-color: #334155; }
    .emoji-tabs-bar { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 8px; border-bottom: 1px solid #e2e8f0; margin-bottom: 8px; }
    .tab-btn { background: #f1f5f9; border: none; padding: 4px 8px; border-radius: 8px; font-size: 11px; cursor: pointer; font-weight: 700; }
    .tab-btn.active { background: #f59e0b; color: #1e293b; }
    .emoji-grid-container { max-height: 270px; overflow-y: auto; }
    .emoji-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; font-size: 20px; text-align: center; }
    .emoji-cell { cursor: pointer; padding: 6px 2px; border-radius: 8px; }

    /* RESPONSIVE AUTO-SCALE WRAPPER */
    .notebook-viewport-wrapper {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      position: relative;
    }

    .book-cover {
      width: 860px;
      min-width: 860px;
      background: #4a2e18;
      border-radius: 12px;
      padding: 16px 16px 16px 36px;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
      position: relative;
      perspective: 2500px;
      transform-origin: top center;
      transition: transform 0.2s ease;
    }

    .spiral-spine {
      position: absolute;
      top: 35px;
      bottom: 35px;
      left: 18px;
      width: 40px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      z-index: 10;
      pointer-events: none;
    }

    .ring {
      width: 46px;
      height: 12px;
      background: linear-gradient(to bottom, #f1f5f9, #94a3b8, #334155);
      border-radius: 10px;
    }

    .physical-page {
      background-color: #fffdf8;
      border-radius: 6px;
      width: 100%;
      height: 1123px;
      min-height: 1123px;
      position: relative;
      cursor: text;
      overflow: hidden;
      box-shadow: inset 0 0 10px rgba(0,0,0,0.03);
      transform-origin: left center;
      backface-visibility: hidden;
      transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
    }

    .page-rule-layer {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 1;
      width: 100%;
      height: 100%;
    }

    /* ==============================================================
       NEW: CUSTOMIZABLE NOTEBOOK COVER PAGE (PAGE 0)
       ============================================================== */
    .cover-page-view {
      display: none;
      width: 100%;
      height: 100%;
      border-radius: 6px;
      position: absolute;
      inset: 0;
      z-index: 20;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 60px 40px 40px;
      background: linear-gradient(135deg, #4a2e18 0%, #2b1708 100%);
      color: white;
      box-shadow: inset 0 0 50px rgba(0,0,0,0.6);
      border: 4px double rgba(255, 255, 255, 0.25);
    }

    .cover-page-view.active {
      display: flex;
    }

    .cover-theme-leather { background: linear-gradient(135deg, #4a2e18 0%, #221105 100%); }
    .cover-theme-blue { background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%); }
    .cover-theme-black { background: linear-gradient(135deg, #18181b 0%, #09090b 100%); }
    .cover-theme-green { background: linear-gradient(135deg, #064e3b 0%, #022c22 100%); }
    .cover-theme-purple { background: linear-gradient(135deg, #581c87 0%, #2e1065 100%); }

    .cover-header-title {
      font-size: 2.2rem;
      font-weight: 800;
      letter-spacing: 2px;
      text-transform: uppercase;
      text-shadow: 0 4px 10px rgba(0,0,0,0.5);
      border-bottom: 2px solid rgba(255,255,255,0.3);
      padding-bottom: 10px;
      outline: none;
      cursor: text;
    }

    /* Classmate Style Sticker Label */
    .cover-label-sticker {
      background: #ffffff;
      color: #1e293b;
      width: 85%;
      max-width: 450px;
      border-radius: 12px;
      padding: 24px 28px;
      box-shadow: 0 15px 35px rgba(0,0,0,0.4);
      border: 3px solid #2563eb;
      position: relative;
    }

    .cover-label-sticker::before {
      content: 'CLASSMATE NOTEBOOK';
      position: absolute;
      top: -12px;
      left: 50%;
      transform: translateX(-50%);
      background: #2563eb;
      color: white;
      font-size: 10px;
      font-weight: 800;
      padding: 2px 14px;
      border-radius: 10px;
      letter-spacing: 1px;
    }

    .sticker-field {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      border-bottom: 1.5px dashed #cbd5e1;
      padding-bottom: 4px;
      font-size: 0.95rem;
    }

    .sticker-label {
      font-weight: 700;
      color: #475569;
      width: 80px;
    }

    .sticker-input {
      border: none;
      outline: none;
      font-family: 'Kalam', cursive;
      font-size: 1.2rem;
      color: #0f3d8a;
      flex-grow: 1;
      background: transparent;
    }

    .cover-custom-image-box {
      width: 140px;
      height: 140px;
      border-radius: 50%;
      border: 3px dashed rgba(255,255,255,0.4);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      cursor: pointer;
      background: rgba(255,255,255,0.05);
      transition: all 0.2s;
    }

    .cover-custom-image-box:hover {
      border-color: #38bdf8;
      background: rgba(255,255,255,0.1);
    }

    .cover-custom-image-box img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .cover-bottom-quote {
      font-family: 'Kalam', cursive;
      font-size: 1.25rem;
      color: rgba(255,255,255,0.8);
      outline: none;
      cursor: text;
    }

    /* 3D FLIP */
    .physical-page.flipping-forward { transform: rotateY(-90deg) skewY(-1deg); }
    .physical-page.flipping-backward { transform: rotateY(90deg) skewY(1deg); }

    /* TEXT BOX */
    .draggable-box {
      position: absolute;
      display: inline-block;
      padding: 0;
      margin: 0;
      max-width: 680px;
      user-select: none;
      z-index: 5;
    }

    .move-mode-on .draggable-box {
      border: 1.5px dashed #7c3aed !important;
      background: rgba(245, 243, 255, 0.5) !important;
      cursor: grab !important;
    }

    .move-mode-on .draggable-box:active { cursor: grabbing !important; }
    .move-mode-on .box-content { user-select: none !important; pointer-events: none !important; }

    .box-action-bar {
      position: absolute;
      top: -26px;
      left: 0;
      display: none;
      align-items: center;
      gap: 4px;
      background: #7c3aed;
      padding: 2px 6px;
      border-radius: 10px;
      z-index: 20;
    }

    .move-mode-on .box-action-bar { display: inline-flex; }

    .mini-btn {
      background: white;
      color: #7c3aed;
      border: none;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 800;
      padding: 2px 6px;
      cursor: pointer;
    }

    .mini-btn.del-btn { background: #ef4444; color: white; }

    /* हिंदी व इंग्लिश सटीक अलाइनमेंट */
    .box-content {
      outline: none;
      font-family: 'Kalam', cursive;
      font-size: 24px;
      line-height: 38px;
      min-height: 38px;
      min-width: 40px;
      letter-spacing: 0.4px;
      cursor: text;
      user-select: text;
      white-space: pre-wrap;
      word-break: break-word;
      transition: transform 0.08s ease;
    }

    .box-content.mode-hindi { transform: translateY(-13px); }
    .box-content.mode-english { transform: translateY(9px); }

    /* TRANSFORMABLE ELEMENTS */
    .image-box, .symbol-box {
      border: 2px solid transparent;
      padding: 2px;
      border-radius: 8px;
      cursor: grab;
      display: inline-block;
      z-index: 10;
    }

    .image-box.selected { border: 2px dashed #2563eb !important; }
    .image-box img { width: 100%; height: 100%; object-fit: fill; display: block; border-radius: 6px; pointer-events: none; -webkit-user-drag: none; }
    .image-box { touch-action: none; max-width: none; }
    .image-box .delete-handle { right: -36px; }
    .rz { position: absolute; width: 14px; height: 14px; background: #2563eb; border: 2px solid #fff; border-radius: 50%; pointer-events: auto; touch-action: none; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
    .rz-n { top: -9px; left: 50%; margin-left: -7px; cursor: ns-resize; }
    .rz-s { bottom: -9px; left: 50%; margin-left: -7px; cursor: ns-resize; }
    .rz-w { left: -9px; top: 50%; margin-top: -7px; cursor: ew-resize; }
    .rz-e { right: -9px; top: 50%; margin-top: -7px; cursor: ew-resize; }
    .rz-nw { top: -9px; left: -9px; cursor: nwse-resize; }
    .rz-ne { top: -9px; right: -9px; cursor: nesw-resize; }
    .rz-sw { bottom: -9px; left: -9px; cursor: nesw-resize; }
    .rotate-handle, .resize-handle { touch-action: none; }
    .img-quick-bar { white-space: nowrap; align-items: center; }
    .rot-slider { width: 80px; height: 14px; accent-color: #38bdf8; }
    .symbol-box.selected { border: 2px dashed #f59e0b !important; }
    .symbol-render { display: inline-flex; align-items: center; justify-content: center; }

    .img-controls { display: none; position: absolute; inset: 0; pointer-events: none; }
    .image-box.selected .img-controls, .symbol-box.selected .img-controls { display: block; }

    .rotate-handle {
      position: absolute; top: -38px; left: 50%; transform: translateX(-50%);
      width: 26px; height: 26px; background: #2563eb; color: white; border-radius: 50%;
      display: flex; align-items: center; justify-content: center; cursor: grab; pointer-events: auto;
    }

    .delete-handle {
      position: absolute; top: -12px; right: -12px; width: 22px; height: 22px;
      background: #ef4444; color: white; border-radius: 50%; display: flex;
      align-items: center; justify-content: center; cursor: pointer; pointer-events: auto;
    }

    .resize-handle {
      position: absolute; bottom: -10px; right: -10px; width: 22px; height: 22px;
      background: #2563eb; color: white; border-radius: 50%; display: flex;
      align-items: center; justify-content: center; cursor: nwse-resize; pointer-events: auto;
    }

    .stretch-w-handle {
      position: absolute; top: 50%; right: -10px; transform: translateY(-50%);
      width: 18px; height: 26px; background: #f59e0b; color: white; border-radius: 4px;
      display: flex; align-items: center; justify-content: center; cursor: ew-resize; pointer-events: auto;
    }

    .stretch-h-handle {
      position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%);
      width: 26px; height: 18px; background: #10b981; color: white; border-radius: 4px;
      display: flex; align-items: center; justify-content: center; cursor: ns-resize; pointer-events: auto;
    }

    .img-quick-bar {
      position: absolute; bottom: -34px; left: 50%; transform: translateX(-50%);
      display: flex; gap: 4px; background: #1e293b; padding: 3px 8px; border-radius: 14px; pointer-events: auto;
    }

    .img-quick-bar button {
      background: #334155; color: white; border: none; padding: 2px 6px; border-radius: 6px; font-size: 11px; cursor: pointer;
    }

    /* FOOTER SECTION FOR ADSENSE */
    .site-footer {
      background: #0f172a;
      color: #94a3b8;
      padding: 40px 20px 25px;
      margin-top: 50px;
      text-align: center;
      font-size: 0.9rem;
      border-top: 4px solid #2563eb;
    }

    .footer-links {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }

    .footer-links a {
      color: #cbd5e1;
      text-decoration: none;
      font-weight: 600;
    }

    .footer-links a:hover { color: #38bdf8; text-decoration: underline; }
    .footer-copy { font-size: 0.8rem; color: #64748b; }

    /* MULTI-PAGE PRINT STYLES */
    #multiPagePrintContainer { display: none; }

    @page { size: A4 portrait; margin: 0; }

    @media print {
      * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
      html, body {
        width: 210mm !important; margin: 0 !important; padding: 0 !important; background: #fffdf8 !important;
      }
      .navbar, .header-top, .ribbon-container, #viewHome, .copy-workspace, .rainbow-line, .emoji-picker-popup, .site-footer, .pg-intro, .seo-block, .legal, #viewCopy {
        display: none !important;
      }
      #multiPagePrintContainer { display: block !important; width: 210mm !important; }
      .print-page-sheet {
        width: 210mm !important; height: 297mm !important; min-height: 297mm !important;
        page-break-after: always !important; page-break-inside: avoid !important;
        position: relative !important; background-color: #fffdf8 !important;
      }
    }
  
    /* ===== RESUME MAKER ===== */
    .rwrap{max-width:1250px;margin:18px auto;padding:0 12px;display:grid;grid-template-columns:410px 1fr;gap:16px;align-items:start}
    @media(max-width:900px){.rwrap{grid-template-columns:1fr}}
    .rform{background:#fff;color:#0f172a;border-radius:14px;padding:14px;box-shadow:0 6px 20px rgba(0,0,0,.08)}
    .rform label{font-size:.75rem;font-weight:600;color:#475569;display:block;margin:8px 0 3px}
    .rform input,.rform textarea,.rform select{width:100%;padding:7px 9px;border:1px solid #cbd5e1;border-radius:8px;font:inherit;font-size:.85rem;color:#0f172a;background:#fff}
    .rform textarea{min-height:70px;resize:vertical}
    .rform h4{margin:16px 0 6px;font-size:.92rem;color:#4338ca}
    .rchips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
    .rchip{border:2px solid #e2e8f0;background:#fff;padding:5px 9px;border-radius:20px;font-size:.75rem;cursor:pointer;font-weight:600;color:#0f172a;font-family:inherit}
    .rchip.on{border-color:#4338ca;background:#eef2ff}
    .rchip i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px}
    .rbtn{background:#4338ca;color:#fff;border:0;padding:8px 14px;border-radius:8px;font-weight:600;cursor:pointer;font-size:.8rem;font-family:inherit}
    .rbtn.red{background:#dc2626}.rbtn.gray{background:#64748b}
    .rcard{border:1px solid #e2e8f0;border-radius:10px;padding:8px;margin:8px 0;background:#f8fafc}
    .rch{display:flex;gap:4px}.rch input{font-weight:700}
    .rch button{border:0;background:#e2e8f0;border-radius:6px;cursor:pointer;padding:0 9px;color:#0f172a}
    .rent{border:1px dashed #94a3b8;border-radius:8px;padding:6px;margin-top:6px;background:#fff}
    .rrow{display:grid;grid-template-columns:1fr 1fr;gap:6px}
    #rbox{width:100%;overflow:hidden;position:relative}
    .rp{width:794px;min-height:1123px;background:#fff;color:#1f2937;transform-origin:top left;line-height:1.45;box-shadow:0 6px 24px rgba(0,0,0,.2)}
    .rp h1{font-size:2.1em;line-height:1.1;margin:0}
    .rp .rt{font-size:1.1em;color:var(--a);font-weight:600;margin-top:3px}
    .rp .rc{font-size:.85em;margin-top:6px;color:#475569}
    .rhd{display:flex;justify-content:space-between;align-items:center;padding:30px 36px 6px;gap:16px}
    .rbody{padding:10px 36px 30px}
    .rph{width:96px;height:96px;border-radius:50%;object-fit:cover;border:3px solid var(--a)}
    .rsec{margin-top:14px}
    .rsec h3{font-size:1.05em;margin:0 0 6px;color:var(--a)}
    .h-line h3{border-bottom:2px solid var(--a);padding-bottom:2px}
    .h-bar h3{border-left:5px solid var(--a);padding:2px 8px;background:color-mix(in srgb,var(--a) 12%,#fff)}
    .h-under h3:after{content:'';display:block;width:40px;height:3px;background:var(--a);margin-top:3px}
    .h-caps h3{text-transform:uppercase;letter-spacing:.15em;font-size:.95em}
    .h-center h3{text-align:center;border-top:1px solid var(--a);border-bottom:1px solid var(--a);padding:3px 0;text-transform:uppercase;letter-spacing:.1em}
    .rh{display:flex;justify-content:space-between;font-weight:700}
    .rh span{font-weight:500;color:#64748b;font-size:.9em}
    .rs{font-style:italic;color:#475569;font-size:.92em}
    .re{margin-bottom:9px}
    .rp ul{list-style:none;margin:3px 0 0;padding:0}
    .rp li{display:flex;gap:6px;margin:2px 0}
    .rp li i{font-style:normal;color:var(--a);min-width:12px;font-weight:700}
    .rp p{margin:0}
    .l-band .rhd{background:var(--a);color:#fff;padding:30px 36px}
    .l-band .rt,.l-band .rc{color:#fff}
    .l-band .rph{border-color:#fff}
    .l-side{display:flex}
    .rside{width:30%;background:var(--a);color:#fff;padding:30px 18px;min-height:1123px}
    .rside h3{color:#fff;border:0;border-bottom:1px solid rgba(255,255,255,.5);margin:14px 0 6px;font-size:.95em;text-transform:uppercase;letter-spacing:.08em;padding:0 0 2px;background:none;text-align:left}
    .rside h3:after{display:none}
    .rside .rph{display:block;margin:0 auto 10px;border-color:#fff}
    .rside li i{color:#fff}
    .rside .rcl{font-size:.82em;margin:4px 0;word-break:break-word}
    .rmain{flex:1;padding:30px 28px}
    .rmain h1{color:var(--a)}
    @media print{
      @page{size:A4;margin:0}
      body.print-resume>*{display:none!important}
      body.print-resume>#viewResume{display:block!important}
      body.print-resume .rform{display:none!important}
      body.print-resume .rwrap{display:block;margin:0;padding:0;max-width:none}
      body.print-resume #rbox{height:auto!important}
      body.print-resume .rp{transform:none!important;box-shadow:none}
      body.print-resume .rp,body.print-resume .rp *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
    }
  
    /* ===== HOME ===== */
    .hm-hero{position:relative;overflow:hidden;text-align:center;padding:60px 16px 70px;color:#fff;background:linear-gradient(120deg,#ef4444,#f97316,#eab308,#10b981,#3b82f6,#8b5cf6,#ec4899);background-size:300% 300%;animation:hmBg 12s ease infinite}
    @keyframes hmBg{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
    .hm-title{font-size:clamp(1.9rem,6vw,3.4rem);font-weight:800;text-shadow:0 4px 18px rgba(0,0,0,.25);line-height:1.15}
    .hm-title span{display:inline-block;background:#fff;color:#ec4899;border-radius:50%;width:1.3em;height:1.3em;line-height:1.3em;text-shadow:none;margin:0 .2em}
    .hm-sub{font-size:clamp(1rem,3vw,1.4rem);font-weight:600;margin:12px 0 28px;text-shadow:0 2px 8px rgba(0,0,0,.25)}
    .hm-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
    .hm-cta{color:#fff;border:3px solid #fff;padding:14px 28px;border-radius:40px;font:700 1.1rem Poppins,sans-serif;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.25);transition:.2s}
    .hm-cta:hover{transform:translateY(-4px) scale(1.04)}
    .hm-fl{position:absolute;font-size:2.4rem;opacity:.85;animation:hmFl 4s ease-in-out infinite}
    @keyframes hmFl{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-16px) rotate(8deg)}}
    .hm-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:900px;margin:-30px auto 0;padding:0 12px;position:relative}
    .hm-stats div{flex:1;min-width:100px;background:#fff;color:#64748b;border-radius:16px;padding:12px 8px;text-align:center;font-size:.8rem;font-weight:600;box-shadow:0 8px 20px rgba(0,0,0,.12)}
    .hm-stats b{display:block;font-size:1.4rem;background:linear-gradient(90deg,#ef4444,#8b5cf6);-webkit-background-clip:text;background-clip:text;color:transparent}
    .hm-sec{max-width:1000px;margin:10px auto;padding:0 14px}
    .hm-h{margin:26px 0 12px;font-size:1.4rem;font-weight:800;color:#0f172a}
    body.dark-mode .hm-h{color:#f8fafc}
    .hm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
    .hm-card{color:#fff;border-radius:20px;padding:22px 10px;text-align:center;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.15);transition:.2s;display:flex;flex-direction:column;gap:8px;align-items:center}
    .hm-card:hover{transform:translateY(-6px) rotate(-1.5deg);box-shadow:0 14px 28px rgba(0,0,0,.25)}
    .hm-ic{font-size:2.6rem;background:rgba(255,255,255,.25);border-radius:50%;width:70px;height:70px;display:flex;align-items:center;justify-content:center}
    .hm-card b{font-size:.95rem}
    .hm-foot{text-align:center;padding:30px 10px;font-weight:600;color:#64748b}
  
    /* ===== ANIMATIONS + HIGHLIGHT ===== */
    @keyframes pgIn{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
    @keyframes panIn{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
    @keyframes selPop{0%{transform:scale(.85)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
    @keyframes tabPop{0%{transform:translateY(6px) scale(.9)}100%{transform:none}}
    .page-view.active{animation:pgIn .5s cubic-bezier(.2,.8,.2,1)}
    .ribbon-content-panel.active{animation:panIn .35s ease}
    .cover-page-view.active{animation:pgIn .4s ease}
    .nav-item{position:relative;transition:background .25s,transform .15s}
    .nav-item:active{transform:scale(.93)}
    .nav-item.active{background:#dc2626;box-shadow:inset 0 -4px 0 #fde047,0 0 16px rgba(220,38,38,.7);animation:tabPop .3s ease}
    .ribbon-tab-btn{transition:all .25s ease}
    .ribbon-tab-btn:active,.tab-btn:active,.action-btn:active,.pen-item:active{transform:scale(.92)}
    .ribbon-tab-btn.active{color:#fff;background:linear-gradient(135deg,#2563eb,#7c3aed);border-color:#2563eb;border-bottom:2px solid #7c3aed;box-shadow:0 -3px 12px rgba(37,99,235,.45);animation:tabPop .3s ease}
    body.dark-mode .ribbon-tab-btn.active{color:#fff;background:linear-gradient(135deg,#2563eb,#7c3aed);border-color:#38bdf8}
    .tab-btn{transition:all .2s}
    .tab-btn.active{box-shadow:0 0 0 3px rgba(245,158,11,.5);animation:selPop .3s ease}
    .ribbon-content-panel .sel{outline:3px solid #facc15;outline-offset:2px;box-shadow:0 0 0 5px rgba(250,204,21,.35),0 4px 14px rgba(0,0,0,.25);animation:selPop .35s ease;position:relative;z-index:2}
    .hm-card:active,.hm-cta:active{transform:scale(.95)}
    @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
  
    /* ===== COVER PAGE: BEAUTIFUL + CUSTOMIZABLE ===== */
    #coverPageView{background:linear-gradient(var(--ang,135deg),var(--c1,#4a2e18),var(--c2,#221105));border:0;padding:46px 34px 34px;overflow:hidden;gap:12px}
    #coverPageView>*{position:relative;z-index:1}
    #coverPageView::before{content:'';position:absolute;inset:14px;border:4px double var(--bd,rgba(255,255,255,.55));border-radius:10px;pointer-events:none;z-index:0}
    #coverPageView::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(circle at 25% 15%,rgba(255,255,255,.28),transparent 55%)}
    #coverPageView.cv-b-gold::before{border:3px solid #fcd34d;box-shadow:0 0 0 5px rgba(252,211,77,.25),inset 0 0 0 5px rgba(252,211,77,.25)}
    #coverPageView.cv-b-dash::before{border:3px dashed var(--bd,#fff)}
    #coverPageView.cv-b-glow::before{border:2px solid var(--bd,#fff);box-shadow:0 0 22px var(--bd,#fff),inset 0 0 22px var(--bd,#fff)}
    #coverPageView.cv-b-none::before{display:none}
    #coverPageView.cv-p-dots::after{background-image:radial-gradient(rgba(255,255,255,.5) 2px,transparent 2.5px);background-size:22px 22px;opacity:.5}
    #coverPageView.cv-p-grid::after{background-image:linear-gradient(rgba(255,255,255,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.2) 1px,transparent 1px);background-size:28px 28px}
    #coverPageView.cv-p-lines::after{background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.22) 0 1px,transparent 1px 14px)}
    #coverPageView.cv-p-diag::after{background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.2) 0 2px,transparent 2px 16px)}
    #coverPageView.cv-p-stars::after{background-image:radial-gradient(circle,#fff 1px,transparent 1.6px),radial-gradient(circle,#fde68a 1.6px,transparent 2.2px);background-size:46px 46px,83px 83px;background-position:0 0,23px 31px}
    #coverPageView.cv-p-circles::after{background-image:radial-gradient(circle,transparent 17px,rgba(255,255,255,.3) 18px,rgba(255,255,255,.3) 20px,transparent 21px);background-size:44px 44px}
    #coverPageView.cv-p-none::after{background-image:none}
    #coverPageView .cover-deco{font-size:1.5rem;letter-spacing:10px;outline:none;cursor:text;text-align:center;min-height:1.6rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
    #coverPageView .cover-header-title{font-family:var(--tf,'Poppins'),sans-serif;font-size:var(--ts,2.2rem);color:var(--tc,#fff);text-align:center;line-height:1.15;border-bottom:3px solid var(--bd,rgba(255,255,255,.4));max-width:100%}
    #coverPageView .cover-custom-image-box{width:var(--ps,140px);height:var(--ps,140px);border-radius:var(--pr,50%);border:4px solid var(--bd,rgba(255,255,255,.7));box-shadow:0 0 0 6px rgba(255,255,255,.15),0 12px 30px rgba(0,0,0,.45);flex-shrink:0}
    #coverPageView .cover-label-sticker{border-color:var(--ac,#2563eb)}
    #coverPageView .cover-label-sticker::before{content:var(--tag,'CLASSMATE NOTEBOOK');background:var(--ac,#2563eb);white-space:nowrap}
    #coverPageView .sticker-input{color:var(--ac,#0f3d8a)}
    #coverPageView.cv-s-glass .cover-label-sticker{background:rgba(255,255,255,.14);backdrop-filter:blur(8px);color:#fff;border:2px solid rgba(255,255,255,.55)}
    #coverPageView.cv-s-glass .sticker-label{color:rgba(255,255,255,.85)}
    #coverPageView.cv-s-glass .sticker-input{color:#fff}
    #coverPageView.cv-s-glass .sticker-field{border-bottom-color:rgba(255,255,255,.4)}
    #coverPageView.cv-s-paper .cover-label-sticker{background:#fffbea repeating-linear-gradient(0deg,transparent 0 27px,#e7d9a8 27px 28px);border-radius:4px;transform:rotate(-1.5deg)}
    #coverPageView .cover-bottom-quote{color:var(--qc,rgba(255,255,255,.9));text-align:center;font-size:1.2rem}
    .cv-ctl{display:inline-flex;align-items:center;gap:4px;font-size:.78rem;font-weight:700;color:#475569}
    body.dark-mode .cv-ctl{color:#cbd5e1}
    .cv-ctl input[type=color]{width:32px;height:28px;padding:0;border:1px solid #cbd5e1;border-radius:6px;cursor:pointer;background:none}
    .cv-ctl input[type=range]{width:90px}
    .cv-ctl select,.cv-ctl input[type=text]{padding:4px 6px;border:1px solid #cbd5e1;border-radius:8px;font:inherit;font-size:.8rem}
  
    /* ===== LANGUAGE TOGGLE ===== */
    .lang-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.18);border:1.5px solid rgba(255,255,255,.75);color:#fff;font:700 .8rem Poppins,sans-serif;padding:5px 12px;border-radius:20px;cursor:pointer;transition:.2s;white-space:nowrap}
    .lang-toggle:hover{background:#fff;color:#4338ca}
    @media(max-width:620px){.navbar{padding-right:92px}.lang-toggle{font-size:.72rem;padding:4px 9px;right:6px}}
  
    /* ===== MULTI-PAGE SITE ===== */
    .nav-links li{display:flex}
    a.nav-item{text-decoration:none}
    a.hm-card,a.hm-cta{text-decoration:none}
    a.hm-cta{display:inline-block}
    .hm-seo{max-width:760px;margin:26px auto 0;padding:0 16px;text-align:center;color:#475569;font-size:.95rem;line-height:1.6}
    body.dark-mode .hm-seo{color:#cbd5e1}
    html[lang="en"] [data-lang="hi"]{display:none!important}
    html:not([lang="en"]) [data-lang="en"]{display:none!important}
    .pg-intro{max-width:1100px;margin:16px auto 0;padding:0 14px;text-align:center}
    .pg-intro h1{font-size:clamp(1.2rem,3.5vw,1.8rem);font-weight:800;color:#1e293b;margin:0 0 4px}
    .pg-intro p{margin:0;color:#64748b;font-size:.9rem}
    body.dark-mode .pg-intro h1{color:#f1f5f9}
    .seo-block{max-width:1000px;margin:34px auto 0;padding:22px 24px;background:#fff;color:#334155;border-radius:16px;box-shadow:0 6px 20px rgba(0,0,0,.07);line-height:1.65}
    .seo-block h2{font-size:1.15rem;margin:0 0 8px;color:#4338ca}
    .seo-block h3{font-size:1rem;margin:16px 0 6px;color:#0f172a}
    .seo-block ul,.seo-block ol{margin:6px 0 0;padding-left:22px}
    body.dark-mode .seo-block{background:#1e293b;color:#cbd5e1}
    body.dark-mode .seo-block h3{color:#f1f5f9}
    .legal{max-width:860px;margin:26px auto 0;padding:26px 28px;background:#fff;color:#334155;border-radius:16px;box-shadow:0 6px 20px rgba(0,0,0,.08);line-height:1.7}
    .legal h1{font-size:1.8rem;margin:0 0 6px;color:#1e293b}
    .legal h2{font-size:1.1rem;margin:22px 0 6px;color:#4338ca}
    .legal p,.legal li{font-size:.97rem}
    .legal .meta{color:#64748b;font-size:.85rem}
    .legal a{color:#2563eb}
    body.dark-mode .legal{background:#1e293b;color:#cbd5e1}
    body.dark-mode .legal h1{color:#f1f5f9}
    .footer-nav{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:14px;font-size:.85rem}
    .footer-nav a{color:#94a3b8;text-decoration:none}
    .footer-nav a:hover{color:#38bdf8}
    .nf{text-align:center;padding:80px 16px}
    .nf h1{font-size:4rem;margin:0}

    .save-status{font-size:12px;align-self:center;margin:0 8px;opacity:.85}

    /* ===== dototool brand ===== */
    .brand-logo{width:60px;height:60px;border:0;background:transparent;box-shadow:none;margin:0 auto 4px;overflow:visible;animation:dtFloat 4s ease-in-out infinite;transition:transform .25s}
    .brand-logo:hover{transform:scale(1.08) rotate(-3deg)}
    .brand-logo img{width:100%;height:100%;border-radius:50%;display:block;box-shadow:0 4px 14px rgba(37,99,235,.35)}
    .dt-brand{display:table;margin:0 auto 4px;text-decoration:none;font-size:2.1rem;font-weight:800;letter-spacing:.5px;line-height:1.1}
    .dt-w{display:inline-block;perspective:500px}
    .dt-w span{display:inline-block;animation:dtIn .65s cubic-bezier(.2,.9,.3,1.35) both;animation-delay:calc(var(--i)*80ms)}
    .dt-w span:nth-child(2),.dt-w span:nth-child(4),.dt-w span:nth-child(6),.dt-w span:nth-child(7){animation:dtIn .65s cubic-bezier(.2,.9,.3,1.35) both,dtSpin 2.8s linear infinite;animation-delay:calc(var(--i)*80ms),1.1s;transform-origin:50% 55%}
    .dt-w span:nth-child(1){color:#1e3a8a}.dt-w span:nth-child(2){color:#1d4ed8}.dt-w span:nth-child(3){color:#0284c7}.dt-w span:nth-child(4){color:#0d9488}
    .dt-w span:nth-child(5){color:#16a34a}.dt-w span:nth-child(6){color:#ca8a04}.dt-w span:nth-child(7){color:#ea580c}.dt-w span:nth-child(8){color:#dc2626}
    body.dark-mode .dt-w span:nth-child(1){color:#93c5fd}body.dark-mode .dt-w span:nth-child(2){color:#60a5fa}body.dark-mode .dt-w span:nth-child(3){color:#38bdf8}body.dark-mode .dt-w span:nth-child(4){color:#2dd4bf}
    body.dark-mode .dt-w span:nth-child(5){color:#4ade80}body.dark-mode .dt-w span:nth-child(6){color:#facc15}body.dark-mode .dt-w span:nth-child(7){color:#fb923c}body.dark-mode .dt-w span:nth-child(8){color:#f87171}
    .dt-brand::after{content:"";display:block;height:3px;width:0;margin:5px auto 0;border-radius:3px;background:linear-gradient(90deg,#2563eb,#8b5cf6,#f97316,#2563eb);background-size:200% 100%;animation:dtBar .9s .75s ease forwards,dtShine 3s 1.7s linear infinite}
    @keyframes dtIn{from{opacity:0;transform:translateY(16px) scale(.7)}to{opacity:1;transform:none}}
    @keyframes dtSpin{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}
    @keyframes dtBar{to{width:100%}}
    @keyframes dtShine{to{background-position:200% 0}}
    @keyframes dtFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
    @keyframes dtHop{0%,100%{transform:none;opacity:1}40%{transform:translateY(-6px);opacity:1}}
    @keyframes dtFlash{0%,100%{box-shadow:0 0 0 0 rgba(37,99,235,0)}50%{box-shadow:0 0 0 8px rgba(37,99,235,.38)}}
    .dt-flash{animation:dtFlash 1s ease 3;border-radius:10px}
    @media(prefers-reduced-motion:reduce){.dt-w span{opacity:1!important;transform:none!important}.dt-brand::after{width:100%!important}}
    @media(max-width:480px){.dt-brand{font-size:1.8rem}}

    /* ===== Full cover page view (shows the whole cover, not a thin strip) ===== */
    .cover-page-view.active{position:relative;inset:auto;height:1123px;min-height:1123px;box-sizing:border-box}
    .sticker-label[contenteditable]{outline:none;cursor:text;border-radius:3px;padding:0 2px}
    .sticker-label[contenteditable]:focus{background:rgba(255,255,255,.35);box-shadow:0 0 0 2px rgba(37,99,235,.55)}
    /* ===== Symbols behave like images (8 resize handles + rotate) ===== */
    .symbol-box{touch-action:none;max-width:none}
    .symbol-box .delete-handle{right:-36px}
    .symbol-render{position:absolute;left:0;top:0;display:block;white-space:nowrap;transform-origin:0 0;line-height:1.15;pointer-events:none}
    .symbol-box .rz{background:#f59e0b}
    /* ===== Undo / Redo ===== */
    .dt-ur{display:inline-flex;gap:6px;align-items:center;margin-right:4px}
    .btn-undo{background:#475569}
    .btn-undo.dt-off{opacity:.45}