From 6b1f4b3e2894589300b15c584a651cf931f2c41f Mon Sep 17 00:00:00 2001
From: Bruno Charest <bruno.charest@gmail.com>
Date: Wed, 18 Feb 2026 15:52:33 -0500
Subject: [PATCH] =?UTF-8?q?feat:=20ajouter=20classes=20s=C3=A9mantiques=20?=
 =?UTF-8?q?pour=20la=20page=20d'ajout=20de=20liens=20avec=20page-add-link,?=
 =?UTF-8?q?=20page-add-actions,=20page-add-bulk-toggle,=20batch-add-card,?=
 =?UTF-8?q?=20batch-private-wrap/checkbox/label=20pour=20meilleur=20ciblag?=
 =?UTF-8?q?e=20CSS=20et=20suppression=20des=20styles=20inline?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 shaarli-pro/addlink.html        |   14 +-
 shaarli-pro/css/style.css       | 2026 +++----------------------------
 shaarli-pro/editlink.batch.html |   11 +-
 shaarli-pro/js/script.js        |  108 ++
 4 files changed, 295 insertions(+), 1864 deletions(-)
diff --git a/shaarli-pro/addlink.html b/shaarli-pro/addlink.html
index 1ad640d..f7f9a17 100644
--- a/shaarli-pro/addlink.html
+++ b/shaarli-pro/addlink.html
@@ -4,7 +4,7 @@
 {$pageName="addlink"}
 {include="includes"}
 </head>
-<body onload="document.addform.post.focus();">
+<body class="page-add-link" onload="document.addform.post.focus();">
 {include="page.header"}
 <div id="headerform" class="page-add container">
     <div class="row">
@@ -26,11 +26,11 @@
         </div>
 
         <div class="col-md-6 col-md-offset-3">
-            <div style="text-align: right; margin-bottom: 1rem;">
-                <button type="button" class="btn btn-secondary button-batch-addform"><i class="mdi mdi-playlist-plus" aria-hidden="true"></i>&nbsp;{'BULK CREATION'|t}</button>
+            <div class="page-add-actions text-right">
+                <button type="button" class="btn btn-secondary button-batch-addform page-add-bulk-toggle"><i class="mdi mdi-playlist-plus" aria-hidden="true"></i>&nbsp;{'BULK CREATION'|t}</button>
             </div>
 
-            <form class="card batch-addform hidden" method="POST" action="{$base_path}/admin/shaare-batch" name="batch-addform">
+            <form class="card batch-addform batch-add-card hidden" method="POST" action="{$base_path}/admin/shaare-batch" name="batch-addform">
                 <div class="card-header">{"Shaare multiple new links"|t}</div>
                 <div class="card-body">
                     <div class="form-group">
@@ -44,9 +44,9 @@
                     </div>
 
                     <input type="hidden" name="private" value="0">
-                    <div class="form-group checkbox-wrapper">
-                        <input type="checkbox" name="private" {if="$default_private_links"} checked="checked"{/if} id="lf_private" style="width: auto;"/>
-                        <label for="lf_private" style="margin: 0;">{'Private'|t}</label>
+                    <div class="form-group checkbox-wrapper batch-private-wrap">
+                        <input type="checkbox" name="private" {if="$default_private_links"} checked="checked"{/if} id="lf_private" class="batch-private-checkbox" />
+                        <label for="lf_private" class="batch-private-label">{'Private'|t}</label>
                     </div>
                 </div>
 
diff --git a/shaarli-pro/css/style.css b/shaarli-pro/css/style.css
index feb7a5f..d933ccd 100644
--- a/shaarli-pro/css/style.css
+++ b/shaarli-pro/css/style.css
@@ -2026,1870 +2026,59 @@ select:focus {
     color: var(--text-secondary);
 }
 
-/* ===== Tables ===== */
-.table-responsive {
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
-}
-
-.table {
-    width: 100%;
-    margin-bottom: 1rem;
-    border-collapse: collapse;
-    font-size: 0.95rem;
-}
-
-.table th,
-.table td {
-    padding: 0.75rem 1rem;
-    vertical-align: middle;
-    border-bottom: 1px solid var(--border-light);
-    text-align: left;
-}
-
-.table th {
-    font-weight: 600;
-    color: var(--text-secondary);
-    background-color: var(--bg-card);
-    border-bottom: 2px solid var(--border);
-    white-space: nowrap;
-}
-
-.table tbody tr:hover {
-    background-color: var(--bg-card-hover);
-}
-
-.text-success {
-    color: var(--success) !important;
-}
-
-.text-warning {
-    color: var(--warning) !important;
-}
-
-.text-error {
-    color: var(--danger) !important;
-}
-
-.text-muted {
-    color: var(--text-muted) !important;
-}
-
-/* ===== Responsive Tables ===== */
-@media (max-width: 1024px) {
-    .sidebar {
-        transform: translateX(-100%);
-    }
-
-    .sidebar.show {
-        transform: translateX(0);
-    }
-
-    .main-content {
-        margin-left: 0;
-    }
-
-    .mobile-menu-btn {
-        display: flex;
-    }
-
-    .bulk-actions-bar {
-        left: 0;
-    }
-
-    .header-nav-link span {
-        display: none;
-    }
-}
-
-@media (max-width: 768px) {
-    .links-list.view-grid {
-        grid-template-columns: 1fr;
-    }
-
-    .content-toolbar {
-        flex-direction: column;
-        align-items: stretch;
-    }
-
-    .toolbar-left,
-    .toolbar-right {
-        justify-content: space-between;
-    }
-
-    .header-nav {
-        display: none;
-    }
-
-    .bulk-actions-bar {
-        flex-direction: column;
-        gap: 1rem;
-        padding: 1rem;
-    }
-
-    .bulk-buttons {
-        flex-wrap: wrap;
-        justify-content: center;
-    }
-}
-
-@media (max-width: 480px) {
-    .content-container {
-        padding: 1rem;
-    }
-
-    .link-outer {
-        padding: 1rem;
-    }
-
-    .view-list .link-outer {
-        flex-direction: column;
-    }
-
-    .view-list .link-thumbnail {
-        width: 100%;
-        height: 120px;
-    }
-}
-
-/* ===== Sidebar Overlay for Mobile ===== */
-.sidebar-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: var(--overlay-bg);
-    z-index: 199;
-    display: none;
-}
-
-.sidebar-overlay.show {
-    display: block;
-}
-
-/* ===== Grid/Bootstrap Compatibility ===== */
-.container-fluid {
-    width: 100%;
-    padding-right: 15px;
-    padding-left: 15px;
-    margin-right: auto;
-    margin-left: auto;
-}
-
-.row {
-    display: flex;
-    flex-wrap: wrap;
-    margin-right: -15px;
-    margin-left: -15px;
-}
-
-[class*='col-'] {
-    position: relative;
-    width: 100%;
-    padding-right: 15px;
-    padding-left: 15px;
-}
-
-@media (min-width: 576px) {
-    .col-sm-3 {
-        flex: 0 0 25%;
-        max-width: 25%;
-    }
-
-    .col-sm-4 {
-        flex: 0 0 33.33%;
-        max-width: 33.33%;
-    }
-
-    .col-sm-8 {
-        flex: 0 0 66.66%;
-        max-width: 66.66%;
-    }
-}
-
-@media (min-width: 768px) {
-    .col-md-8 {
-        flex: 0 0 66.66%;
-        max-width: 66.66%;
-    }
-
-    .col-md-offset-2 {
-        margin-left: 16.66%;
-    }
-}
-
-@media (min-width: 992px) {
-    .col-lg-3 {
-        flex: 0 0 25%;
-        max-width: 25%;
-    }
-
-    .col-lg-6 {
-        flex: 0 0 50%;
-        max-width: 50%;
-    }
-}
-
-.col-xs-6 {
-    flex: 0 0 50%;
-    max-width: 50%;
-}
-
-.is-flex {
-    display: flex;
-}
-
-.ripple {
-    position: relative;
-    overflow: hidden;
-}
-
-.button-inverse {
-    background: var(--bg-card);
-    color: var(--text-main);
-    border: 1px solid var(--border);
-    padding: 0.5rem 1rem;
-    border-radius: 0.375rem;
-    display: inline-block;
-}
-
-.button-inverse:hover {
-    background: var(--border-light);
-}
-
-/* ===== Tag Cloud Page ===== */
-.tag-cloud {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-    justify-content: center;
-    padding: 2rem 0;
-}
-
-.tag-cloud a {
-    display: inline-block;
-    padding: 0.5rem 1rem;
-    background: var(--bg-card);
-    border: 1px solid var(--border);
-    border-radius: 2rem;
-    color: var(--text-main);
-    transition: all 0.2s ease;
-    box-shadow: var(--shadow-sm);
-    margin-bottom: 0.5rem;
-}
-
-.tag-cloud a:hover {
-    background: var(--primary);
-    border-color: var(--primary);
-    color: white;
-    transform: translateY(-2px);
-    box-shadow: var(--shadow-md);
-    text-decoration: none;
-}
-
-/* ===== Picture Wall ===== */
-
-/* Picwall Controls */
-.picwall-controls {
-    margin-bottom: 1.5rem;
-    padding: 1rem 1.25rem;
-    background: var(--bg-card);
-    border: 1px solid var(--border);
-    border-radius: 0.75rem;
-    box-shadow: var(--shadow-sm);
-}
-
-.picwall-controls-inner {
-    display: flex;
-    align-items: center;
-    gap: 1.25rem;
-    flex-wrap: wrap;
-}
-
-.picwall-controls-label {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    font-size: 0.9rem;
-    font-weight: 600;
-    color: var(--text-main);
-}
-
-.picwall-controls-label i {
-    font-size: 1.125rem;
-    color: var(--primary);
-}
-
-.picwall-size-controls {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    flex: 1;
-    max-width: 300px;
-}
-
-.picwall-size-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 32px;
-    height: 32px;
-    border-radius: 0.5rem;
-    border: 1px solid var(--border);
-    background: var(--bg-body);
-    color: var(--text-main);
-    cursor: pointer;
-    transition: all 0.2s ease;
-    flex-shrink: 0;
-}
-
-.picwall-size-btn:hover {
-    background: var(--primary);
-    border-color: var(--primary);
-    color: white;
-    transform: scale(1.05);
-}
-
-.picwall-size-btn:active {
-    transform: scale(0.95);
-}
-
-.picwall-size-btn i {
-    font-size: 1rem;
-}
-
-.picwall-size-slider {
-    flex: 1;
-    -webkit-appearance: none;
-    appearance: none;
-    height: 6px;
-    background: var(--border);
-    border-radius: 3px;
-    outline: none;
-    cursor: pointer;
-}
-
-.picwall-size-slider::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    appearance: none;
-    width: 18px;
-    height: 18px;
-    border-radius: 50%;
-    background: var(--primary);
-    cursor: pointer;
-    border: 3px solid white;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
-    transition: transform 0.15s ease, box-shadow 0.15s ease;
-}
-
-.picwall-size-slider::-webkit-slider-thumb:hover {
-    transform: scale(1.15);
-    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
-}
-
-.picwall-size-slider::-moz-range-thumb {
-    width: 18px;
-    height: 18px;
-    border-radius: 50%;
-    background: var(--primary);
-    cursor: pointer;
-    border: 3px solid white;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
-}
-
-.picwall-size-value {
-    font-size: 0.85rem;
-    font-weight: 600;
-    color: var(--text-secondary);
-    background: var(--primary-light);
-    padding: 0.375rem 0.75rem;
-    border-radius: 9999px;
-    min-width: 60px;
-    text-align: center;
-}
-
-/* Picwall Container with dynamic sizing */
-.picwall-container {
-    --picwall-item-size: 200px;
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(var(--picwall-item-size), 1fr));
-    gap: 1rem;
-    transition: grid-template-columns 0.3s ease;
-}
-
-/* Picture Frame */
-.picwall-pictureframe {
-    position: relative;
-    border-radius: 0.75rem;
-    overflow: hidden;
-    aspect-ratio: 16/10;
-    background: var(--bg-card);
-    border: 1px solid var(--border);
-    box-shadow: var(--shadow-sm);
-    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
-        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    will-change: transform;
-}
-
-.picwall-pictureframe:hover {
-    transform: translateY(-4px) scale(1.02);
-    box-shadow: var(--shadow-xl);
-    z-index: 10;
-}
-
-/* Image Link Wrapper */
-.picwall-image-link {
-    display: block;
-    width: 100%;
-    height: 100%;
-}
-
-.picwall-pictureframe img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    transition: transform 0.4s ease;
-}
-
-.picwall-pictureframe:hover img {
-    transform: scale(1.08);
-}
-
-.picwall-pictureframe .b-lazy {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-
-/* Hover Overlay */
-.picwall-overlay {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background: linear-gradient(0deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 50%, transparent 100%);
-    padding: 2.5rem 1rem 1rem 1rem;
-    transform: translateY(100%);
-    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.picwall-pictureframe:hover .picwall-overlay {
-    transform: translateY(0);
-}
-
-.picwall-link {
-    display: block;
-    text-decoration: none;
-    color: white;
-}
-
-.picwall-link:hover {
-    color: white;
-}
-
-.picwall-title {
-    font-size: 0.95rem;
-    font-weight: 600;
-    color: white;
-    line-height: 1.4;
-    margin-bottom: 0.5rem;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.picwall-url {
-    display: flex;
-    align-items: center;
-    gap: 0.375rem;
-    font-size: 0.75rem;
-    color: rgba(255, 255, 255, 0.7);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.picwall-url i {
-    flex-shrink: 0;
-    font-size: 0.875rem;
-}
-
-/* External Link Icon Indicator */
-.picwall-pictureframe::before {
-    content: '';
-    position: absolute;
-    top: 0.75rem;
-    right: 0.75rem;
-    width: 32px;
-    height: 32px;
-    background: rgba(0, 0, 0, 0.6);
-    backdrop-filter: blur(4px);
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    opacity: 0;
-    transform: scale(0.8);
-    transition: opacity 0.25s ease, transform 0.25s ease;
-    z-index: 5;
-}
-
-.picwall-pictureframe::after {
-    content: '\F03CC';
-    font-family: 'Material Design Icons';
-    position: absolute;
-    top: 0.75rem;
-    right: 0.75rem;
-    width: 32px;
-    height: 32px;
-    color: white;
-    font-size: 0.875rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    opacity: 0;
-    transform: scale(0.8);
-    transition: opacity 0.25s ease, transform 0.25s ease;
-    z-index: 6;
-}
-
-.picwall-pictureframe:hover::before,
-.picwall-pictureframe:hover::after {
-    opacity: 1;
-    transform: scale(1);
-}
-
-/* Responsive adjustments */
-@media (max-width: 768px) {
-    .picwall-controls-inner {
-        flex-direction: column;
-        align-items: stretch;
-    }
-
-    .picwall-size-controls {
-        max-width: none;
-    }
-
-    .picwall-controls-label {
-        justify-content: center;
-    }
-
-    .picwall-size-value {
-        align-self: center;
-    }
-
-    .picwall-container {
-        gap: 0.75rem;
-    }
-
-    .picwall-pictureframe:hover {
-        transform: none;
-    }
-}
-
-/* ===== Daily Page ===== */
-.daily-entry {
-    background: var(--bg-card);
-    border: 1px solid var(--border);
-    border-radius: 0.75rem;
-    margin-bottom: 2rem;
-    overflow: hidden;
-}
-
-.daily-entry-header {
-    padding: 1.25rem;
-    background: var(--primary-light);
-    border-bottom: 1px solid var(--border);
-}
-
-.daily-entry-title {
-    font-size: 1.25rem;
-    font-weight: 600;
-    color: var(--text-main);
-}
-
-.daily-entry-body {
-    padding: 1.25rem;
-}
-
-/* ===== Compact View ===== */
-.links-list.view-compact {
-    grid-template-columns: 1fr;
-    gap: 0;
-}
-
-.view-compact .link-outer {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    padding: 0.875rem 1.25rem 0.875rem 4.25rem;
-    background: var(--bg-card);
-    border: none;
-    border-bottom: 1px solid var(--border);
-    border-radius: 0;
-    margin-bottom: 0;
-    box-shadow: none;
-    transition: background 0.15s ease;
-    position: relative;
-    /* Ensure absolute positioning works */
-}
-
-.view-compact .link-outer:first-child {
-    border-top-left-radius: 0.75rem;
-    border-top-right-radius: 0.75rem;
-    border-top: 1px solid var(--border);
-}
-
-.view-compact .link-outer:last-child {
-    border-bottom-left-radius: 0.75rem;
-    border-bottom-right-radius: 0.75rem;
-}
-
-.view-compact .link-outer:hover {
-    background: var(--bg-card-hover);
-    border-color: var(--border);
-    box-shadow: none;
-}
-
-/* Compact view - Hide thumbnail */
-.view-compact .link-thumbnail {
-    display: none;
-}
-
-/* Compact view - Visibility badge inline */
-.view-compact .link-visibility-badge {
-    position: relative;
-    top: auto;
-    right: auto;
-    width: 28px;
-    height: 28px;
-    flex-shrink: 0;
-    order: -1;
-    margin-left: -1.5rem;
-    margin-right: 0.5rem;
-    align-self: flex-start;
-    /* Move to top */
-    margin-top: 0.125rem;
-}
-
-.view-compact .link-visibility-badge i {
-    font-size: 1rem;
-}
-
-/* Compact view - Content layout */
-.view-compact .link-content {
-    flex: 1;
-    min-width: 0;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 0.5rem 1rem;
-}
-
-.view-compact .link-header {
-    flex: 1;
-    min-width: 200px;
-    margin-bottom: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 0.125rem;
-}
-
-.view-compact .link-title {
-    font-size: 0.95rem;
-    margin-bottom: 0;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.view-compact .link-url {
-    font-size: 0.75rem;
-    max-width: 300px;
-}
-
-.view-compact .link-meta {
-    margin-top: 0;
-    gap: 0.5rem;
-}
-
-.view-compact .link-date {
-    font-size: 0.75rem;
-}
-
-/* Compact view - Hide description */
-.view-compact .link-description {
-    display: none;
-}
-
-/* Compact view - Tags */
-.view-compact .link-footer {
-    flex-shrink: 0;
-    margin-top: 0;
-    padding-top: 0;
-    border-top: none;
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    width: 100%;
-    /* Force width to constrain tags */
-}
-
-.view-compact .link-tag-list {
-    gap: 0.25rem;
-}
-
-.view-compact .link-tag a {
-    padding: 0.125rem 0.5rem;
-    font-size: 0.7rem;
-}
-
-/* Compact view - Actions */
-.view-compact .link-actions {
-    gap: 0.125rem;
-}
-
-.view-compact .link-actions a,
-.view-compact .link-actions button {
-    width: 32px;
-    height: 32px;
-}
-
-.view-compact .link-actions a i,
-.view-compact .link-actions button i {
-    font-size: 1.05rem;
-}
-
-/* Compact view - Hover actions */
-.view-compact .link-hover-actions {
-    display: none;
-}
-
-/* Compact view - Selection checkbox */
-.view-compact .link-select-checkbox {
-    position: absolute;
-    top: 50%;
-    left: 0.75rem;
-    transform: translateY(-50%);
-    right: auto;
-    margin: 0;
-    opacity: 0;
-    background: transparent;
-    box-shadow: none;
-    border: none;
-    width: 20px;
-    height: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 20;
-}
-
-.view-compact .link-outer:hover .link-select-checkbox,
-.view-compact .link-outer.selected .link-select-checkbox,
-.view-compact.selection-mode .link-select-checkbox {
-    opacity: 1;
-}
-
-/* Compact view - Sticky links */
-.view-compact .link-outer.is-sticky {
-    border-left: 3px solid var(--primary);
-    background: var(--primary-light);
-}
-
-/* Compact view - Responsive */
-@media (max-width: 768px) {
-    .view-compact .link-outer {
-        flex-wrap: wrap;
-        padding: 0.75rem 1rem 0.75rem 2.5rem;
-    }
-
-    .view-compact .link-content {
-        flex-direction: column;
-        align-items: flex-start;
-    }
-
-    .view-compact .link-header {
-        width: 100%;
-    }
-
-    .view-compact .link-url {
-        max-width: 100%;
-    }
-
-    .view-compact .link-footer {
-        width: 100%;
-        margin-top: 0.5rem;
-        padding-top: 0.5rem;
-        border-top: 1px solid var(--border-light);
-    }
-}
-
-@media print {
-
-    .sidebar,
-    .header-main,
-    .bulk-actions-bar,
-    .link-actions {
-        display: none !important;
-    }
-
-    .main-content {
-        margin-left: 0 !important;
-    }
-
-    .link-outer {
-        break-inside: avoid;
-        box-shadow: none;
-        border: 1px solid #ddd;
-    }
-}
-
-/* ===== Filter Active Indicator ===== */
-.header-action-btn.has-active-filter {
-    position: relative;
-    background: rgba(59, 130, 246, 0.3);
-    border: 1px solid rgba(59, 130, 246, 0.5);
-}
-
-.header-action-btn.has-active-filter:hover {
-    background: rgba(59, 130, 246, 0.4);
-}
-
-.filter-badge {
-    position: absolute;
-    top: 4px;
-    right: 4px;
-    width: 8px;
-    height: 8px;
-    background: #ef4444;
-    border-radius: 50%;
-    border: 2px solid var(--header-bg);
-    animation: pulse-badge 2s infinite;
-}
-
-@keyframes pulse-badge {
-
-    0%,
-    100% {
-        transform: scale(1);
-        opacity: 1;
-    }
-
-    50% {
-        transform: scale(1.2);
-        opacity: 0.8;
-    }
-}
-
-/* ===== Filter Info Banner ===== */
-.filter-info-banner {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 1rem;
-    padding: 0.875rem 1.25rem;
-    margin-bottom: 1rem;
-    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(99, 102, 241, 0.08));
-    border: 1px solid rgba(59, 130, 246, 0.25);
-    border-radius: 0.75rem;
-    color: var(--text-main);
-    animation: slideInBanner 0.3s ease;
-}
-
-[data-theme="dark"] .filter-info-banner {
-    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(99, 102, 241, 0.12));
-    border-color: rgba(59, 130, 246, 0.3);
-}
-
-@keyframes slideInBanner {
-    from {
-        opacity: 0;
-        transform: translateY(-10px);
-    }
-
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-.filter-info-content {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    font-size: 0.9rem;
-}
-
-.filter-info-content i {
-    font-size: 1.25rem;
-    color: #3b82f6;
-}
-
-.filter-info-content strong {
-    color: #3b82f6;
-    font-weight: 600;
-}
-
-[data-theme="dark"] .filter-info-content i,
-[data-theme="dark"] .filter-info-content strong {
-    color: #60a5fa;
-}
-
-.filter-clear-btn {
-    display: flex;
-    align-items: center;
-    gap: 0.375rem;
-    padding: 0.5rem 0.875rem;
-    background: rgba(239, 68, 68, 0.1);
-    border: 1px solid rgba(239, 68, 68, 0.25);
-    border-radius: 0.5rem;
-    color: #ef4444;
-    font-size: 0.8125rem;
-    font-weight: 500;
-    font-family: inherit;
-    text-decoration: none;
-    transition: all 0.2s ease;
-    white-space: nowrap;
-    cursor: pointer;
-}
-
-.filter-clear-btn:hover {
-    background: rgba(239, 68, 68, 0.2);
-    border-color: rgba(239, 68, 68, 0.4);
-    color: #dc2626;
-}
-
-[data-theme="dark"] .filter-clear-btn {
-    background: rgba(239, 68, 68, 0.15);
-    border-color: rgba(239, 68, 68, 0.3);
-    color: #f87171;
-}
-
-[data-theme="dark"] .filter-clear-btn:hover {
-    background: rgba(239, 68, 68, 0.25);
-    color: #fca5a5;
-}
-
-.filter-clear-btn i {
-    font-size: 1rem;
-}
-
-/* Responsive adjustments for filter banner */
-@media (max-width: 600px) {
-    .filter-info-banner {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 0.75rem;
-        padding: 0.75rem 1rem;
-    }
-
-    .filter-clear-btn {
-        align-self: flex-end;
-    }
-}
-
-/* ===== Pagination ===== */
-.paging {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 0.5rem;
-    margin: 0.5rem 0;
-    padding: 0.25rem;
-}
-
-.paging-links {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    background: var(--bg-card);
-    padding: 0.5rem 1rem;
-    border-radius: 0.5rem;
-    border: 1px solid var(--border);
-    box-shadow: var(--shadow-sm);
-}
-
-.paging-newer,
-.paging-older {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 32px;
-    height: 32px;
-    border-radius: 0.25rem;
-    color: var(--text-secondary);
-    transition: all 0.2s ease;
-    text-decoration: none;
-}
-
-.paging-newer:hover,
-.paging-older:hover {
-    background: var(--primary-light);
-    color: var(--primary);
-}
-
-.paging-current {
-    font-size: 0.9rem;
-    color: var(--text-main);
-    padding: 0 0.5rem;
-}
-
-.paging-stats {
-    font-size: 0.85rem;
-    color: var(--text-secondary);
-    background: var(--bg-card);
-    padding: 0.375rem 0.75rem;
-    border-radius: 999px;
-    border: 1px solid var(--border);
-}
-
-.paging-stats strong {
-    color: var(--primary);
-    font-weight: 600;
-}
-
-/* Search Results Header (Tags) */
-.search-results-header {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-    padding: 1rem 0;
-    margin-bottom: 1rem;
-    border-bottom: 1px solid var(--border);
-}
-
-.search-count {
-    font-weight: 600;
-    color: var(--text-main);
-    margin-right: 0.5rem;
-}
-
-.search-tag-chip {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.25rem;
-    background: var(--tag-bg);
-    color: var(--tag-text);
-    padding: 0.25rem 0.6rem;
-    border-radius: 999px;
-    font-size: 0.85rem;
-    font-weight: 500;
-}
-
-.search-tag-close {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    color: currentColor;
-    opacity: 0.7;
-    border-radius: 50%;
-    width: 16px;
-    height: 16px;
-    transition: all 0.2s;
-    text-decoration: none;
-}
-
-.search-tag-close:hover {
-    background: rgba(0, 0, 0, 0.1);
-    opacity: 1;
-}
-
-.search-tag-close i {
-    font-size: 14px;
-}
-
-
-/* ===== Plugin Zone Styling ===== */
-/* Hide readitlater "Mark as Read" button from paging area */
-.paging-plugin {
-    display: none;
-}
-
-/* Plugin zone inside link cards - inline with actions */
-.link-plugin {
-    display: contents;
-}
-
-.link-plugin a {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 36px;
-    height: 36px;
-    background: transparent;
-    border: none;
-    border-radius: 0.375rem;
-    color: var(--text-muted);
-    cursor: pointer;
-    transition: all 0.15s ease;
-    text-decoration: none;
-    padding: 0;
-    white-space: nowrap;
-    overflow: hidden;
-    font-size: 0;
-}
-
-.link-plugin a i {
-    font-size: 1.15rem;
-}
-
-.link-plugin a:hover {
-    background: var(--primary-light);
-    color: var(--primary);
-}
-
-/* QR code plugin wrapper */
-.link-plugin .linkqrcode {
-    display: contents;
-}
-
-.link-plugin a img {
-    width: 18px;
-    height: 18px;
-    opacity: 0.5;
-    transition: opacity 0.15s ease;
-    filter: var(--plugin-icon-filter, none);
-}
-
-[data-theme="dark"] .link-plugin a img {
-    filter: invert(1) brightness(0.6);
-}
-
-.link-plugin a:hover img {
-    opacity: 0.9;
-}
-
-/* ===== ReadItLater Plugin Integration ===== */
-/* The readitlater toggle link */
-.link-plugin .readitlater-toggle {
-    display: inline-flex !important;
-    align-items: center;
-    justify-content: center;
-    width: 36px;
-    height: 36px;
-    font-size: 0 !important;
-    color: var(--text-muted);
-}
-
-.link-plugin .readitlater-toggle:hover {
-    background: rgba(239, 68, 68, 0.1);
-    color: #ef4444;
-}
-
-.link-plugin .readitlater-toggle .readitlater-icon {
-    font-size: 0;
-    display: contents;
-}
-
-.link-plugin .readitlater-toggle .readitlater-icon i {
-    font-size: 1.15rem;
-}
-
-/* "To Read" badge on the card - grid/list views */
-.readitlater-badge {
-    position: absolute;
-    top: 0.75rem;
-    right: 3.25rem;
-    display: inline-flex;
-    align-items: center;
-    gap: 0.25rem;
-    padding: 0.25rem 0.5rem;
-    background: rgba(239, 68, 68, 0.12);
-    border: 1px solid rgba(239, 68, 68, 0.3);
-    border-radius: 0.375rem;
-    font-size: 0.65rem;
-    font-weight: 700;
-    color: #ef4444;
-    z-index: 11;
-    white-space: nowrap;
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
-    line-height: 1;
-}
-
-.readitlater-badge i {
-    font-size: 0.8rem;
-    line-height: 1;
-}
-
-[data-theme="dark"] .readitlater-badge {
-    background: rgba(239, 68, 68, 0.18);
-    border-color: rgba(239, 68, 68, 0.4);
-    color: #f87171;
-}
-
-/* List view - badge next to visibility badge */
-.view-list .readitlater-badge {
-    right: 4rem;
-    top: 1.25rem;
-}
-
-/* Compact view - badge absolute top-right */
-.view-compact .readitlater-badge {
-    position: absolute;
-    top: 0.5rem;
-    right: 0.5rem;
-    left: auto;
-    bottom: auto;
-    margin: 0;
-    align-self: auto;
-    order: unset;
-}
-
-/* Red accent border for unread bookmarks */
-.link-outer.readitlater-unread {
-    border-left: 3px solid #ef4444;
-}
-
-/* Unread eye icon color - red tint */
-.readitlater-unread .readitlater-toggle {
-    color: #ef4444 !important;
-}
-
-.readitlater-unread .readitlater-toggle:hover {
-    background: rgba(239, 68, 68, 0.15) !important;
-}
-
-/* Hide default QR code inline popup (we use our modal instead) */
-#permalinkQrcode {
-    display: none !important;
-}
-
-/* QR Code Modal */
-.qrcode-modal-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.75);
-    backdrop-filter: blur(4px);
-    z-index: 1100;
-    display: none;
-    align-items: center;
-    justify-content: center;
-    padding: 2rem;
-    opacity: 0;
-    transition: opacity 0.3s ease;
-}
-
-.qrcode-modal-overlay.show {
-    display: flex;
-    opacity: 1;
-}
-
-.qrcode-modal-content {
-    background: var(--bg-card);
-    padding: 2rem;
-    border-radius: 1rem;
-    box-shadow: var(--shadow-xl);
-    border: 1px solid var(--border);
-    position: relative;
-    max-width: 360px;
-    width: 100%;
-    text-align: center;
-    transform: translateY(20px) scale(0.95);
-    transition: transform 0.3s ease;
-}
-
-.qrcode-modal-overlay.show .qrcode-modal-content {
-    transform: translateY(0) scale(1);
-}
-
-.qrcode-modal-close {
-    position: absolute;
-    top: 0.75rem;
-    right: 0.75rem;
-    width: 32px;
-    height: 32px;
-    border-radius: 50%;
-    background: var(--bg-body);
-    border: 1px solid var(--border);
-    color: var(--text-main);
-    font-size: 1.25rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    transition: all 0.2s ease;
-}
-
-.qrcode-modal-close:hover {
-    background: var(--danger);
-    color: white;
-    border-color: var(--danger);
-    transform: rotate(90deg);
-}
-
-.qrcode-modal-content img {
-    display: block;
-    max-width: 280px;
-    width: 100%;
-    height: auto;
-    margin: 0 auto;
-    border-radius: 0.75rem;
-    background: white;
-    padding: 1.25rem;
-    box-sizing: border-box;
-}
-
-.qrcode-modal-title {
-    margin-top: 1rem;
-    font-size: 0.85rem;
-    color: var(--text-secondary);
-    word-break: break-all;
-}
-
-/* Single page pagination - centered stats only */
-.paging.single-page {
-    justify-content: center;
-}
-
-.paging.single-page .paging-stats {
-    margin: 0;
-}
-
-/* ===== Fullscreen Description Modal ===== */
-.modal-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.75);
-    backdrop-filter: blur(4px);
-    z-index: 1050;
-    display: none;
-    align-items: center;
-    justify-content: center;
-    padding: 2rem;
-    opacity: 0;
-    transition: opacity 0.3s ease;
-}
-
-.modal-overlay.show {
-    display: flex;
-    opacity: 1;
-}
-
-.modal-content {
-    background: var(--bg-card);
-    width: 100%;
-    max-width: 900px;
-    max-height: 90vh;
-    border-radius: 1rem;
-    box-shadow: var(--shadow-xl);
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    transform: translateY(20px);
-    transition: transform 0.3s ease;
-    border: 1px solid var(--border);
-}
-
-.modal-overlay.show .modal-content {
-    transform: translateY(0);
-}
-
-.modal-close {
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
-    background: var(--bg-body);
-    border: 1px solid var(--border);
-    color: var(--text-main);
-    font-size: 1.5rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    z-index: 10;
-    transition: all 0.2s ease;
-}
-
-.modal-close:hover {
-    background: var(--danger);
-    color: white;
-    border-color: var(--danger);
-    transform: rotate(90deg);
-}
-
-.modal-body {
-    padding: 3rem 2rem 2rem;
-    overflow-y: auto;
-    font-size: 1.1rem;
-    line-height: 1.8;
-    color: var(--text-main);
-}
-
-.modal-body h1,
-.modal-body h2,
-.modal-body h3,
-.modal-body h4,
-.modal-body h5,
-.modal-body h6 {
-    margin-top: 1.5em;
-    margin-bottom: 0.75em;
-    color: var(--text-main);
-}
-
-.modal-body p {
-    margin-bottom: 1.5em;
-}
-
-.modal-body img {
-    max-width: 100%;
-    border-radius: 0.5rem;
-    margin: 1rem 0;
-}
-
-.modal-body pre,
-.modal-body code {
-    background: var(--bg-body);
-    font-family: monospace;
-    padding: 0.2rem 0.4rem;
-    border-radius: 0.3rem;
-}
-
-.modal-body pre {
-    padding: 1rem;
-    overflow-x: auto;
-}
-
-/* Button style adjustment if needed */
-.view-desc-btn {
-    cursor: pointer;
-}
-
-/* ===== Persistent Media Player ===== */
-.media-player-bar {
-    position: fixed;
-    bottom: 0;
-    left: var(--sidebar-width);
-    right: 0;
-    background: var(--bg-card);
-    border-top: 1px solid var(--border);
-    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
-    z-index: 200;
-    transform: translateY(100%);
-    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
-    backdrop-filter: blur(12px);
-}
-
-.media-player-bar.show {
-    transform: translateY(0);
-}
-
-.media-player-inner {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    padding: 0.625rem 1.25rem;
-    max-width: 1400px;
-    margin: 0 auto;
-}
-
-/* Play/Pause Button */
-.media-player-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    background: var(--primary);
-    color: white;
-    border: none;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    flex-shrink: 0;
-}
-
-.media-player-btn:hover {
-    background: var(--primary-hover);
-    transform: scale(1.05);
-}
-
-.media-player-btn i {
-    font-size: 1.25rem;
-}
-
-.media-player-btn-sm {
-    width: 32px;
-    height: 32px;
-    background: transparent;
-    color: var(--text-muted);
-    border-radius: 0.375rem;
-}
-
-.media-player-btn-sm:hover {
-    background: var(--primary-light);
-    color: var(--primary);
-    transform: none;
-}
-
-.media-player-btn-sm i {
-    font-size: 1.1rem;
-}
-
-/* Info Section */
-.media-player-info {
-    flex: 1;
-    min-width: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-}
-
-.media-player-title {
-    font-size: 0.85rem;
-    font-weight: 500;
-    color: var(--text-main);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 400px;
-}
-
-/* Progress Bar */
-.media-player-progress-wrap {
-    width: 100%;
-}
-
-.media-player-progress {
-    -webkit-appearance: none;
-    appearance: none;
-    width: 100%;
-    height: 4px;
-    background: var(--border);
-    border-radius: 2px;
-    outline: none;
-    cursor: pointer;
-    transition: height 0.15s ease;
-}
-
-.media-player-progress:hover {
-    height: 6px;
-}
-
-.media-player-progress::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    appearance: none;
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
-    background: var(--primary);
-    cursor: pointer;
-    border: 2px solid white;
-    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
-}
-
-.media-player-progress::-moz-range-thumb {
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
-    background: var(--primary);
-    cursor: pointer;
-    border: 2px solid white;
-    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
-}
-
-/* Time Display */
-.media-player-time {
-    font-size: 0.75rem;
-    color: var(--text-muted);
-    white-space: nowrap;
-    flex-shrink: 0;
-    font-variant-numeric: tabular-nums;
-    min-width: 90px;
-    text-align: center;
-}
-
-/* Volume */
-.media-player-volume-wrap {
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-    flex-shrink: 0;
-}
-
-.media-player-volume {
-    -webkit-appearance: none;
-    appearance: none;
-    width: 80px;
-    height: 4px;
-    background: var(--border);
-    border-radius: 2px;
-    outline: none;
-    cursor: pointer;
-}
-
-.media-player-volume::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    appearance: none;
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    background: var(--primary);
-    cursor: pointer;
-}
-
-.media-player-volume::-moz-range-thumb {
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    background: var(--primary);
-    cursor: pointer;
-}
-
-/* Close Button */
-.media-player-close:hover {
-    background: rgba(239, 68, 68, 0.1) !important;
-    color: var(--danger) !important;
-}
-
-/* Play button injected into bookmark action bars */
-.media-play-action {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 36px;
-    height: 36px;
-    background: transparent;
-    border: none;
-    border-radius: 0.375rem;
-    color: var(--primary);
-    cursor: pointer;
-    transition: all 0.15s ease;
-    text-decoration: none;
-}
-
-.media-play-action:hover {
-    background: var(--primary-light);
-    color: var(--primary-hover);
-}
-
-.media-play-action i {
-    font-size: 1.15rem;
-}
-
-/* Responsive adjustments for media player */
-@media (max-width: 1024px) {
-    .media-player-bar {
-        left: 0;
-    }
-}
-
-@media (max-width: 768px) {
-    .media-player-inner {
-        gap: 0.5rem;
-        padding: 0.5rem 1rem;
-    }
-
-    .media-player-title {
-        max-width: 150px;
-    }
-
-    .media-player-volume-wrap {
-        display: none;
-    }
-
-    .media-player-time {
-        display: none;
-    }
-}
-
-/* ===== Footer ===== */
-.footer-main {
-    margin-top: 3rem;
-    padding: 2rem 0;
-    border-top: 1px solid var(--border);
-    text-align: center;
-    color: var(--text-secondary);
-    font-size: 0.9rem;
-}
-
-.footer-main a {
-    color: var(--text-main);
-    transition: color 0.2s ease;
-}
-
-.footer-main a:hover {
-    color: var(--primary);
-}
-
-.footer-feeds {
-    margin-top: 0.5rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.25rem;
-}
-
-.footer-separator {
-    margin: 0 0.5rem;
-    color: var(--text-muted);
-}
-
-.plugin-footer-text {
-    margin-top: 0.5rem;
-}
-
-/* ===== Tools Page ===== */
-.page-tools .list-sortable-handle {
-    cursor: pointer;
-    padding: 0;
-    margin-right: 1rem;
-    display: flex;
-    align-items: center;
-}
-
-.page-tools .list-sortable-handle i {
-    font-size: 1.5rem;
-    color: var(--primary);
-}
-
-.page-tools .list-group-item>i {
-    color: var(--text-muted);
-    flex-shrink: 0;
-}
-
-.bookmarklet-actions {
-    display: flex;
-    gap: 1rem;
-    justify-content: center;
-    flex-wrap: wrap;
-}
-
-.third-party-links {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: 1rem;
-    justify-content: center;
-}
-
-.third-party-links .btn i {
-    font-size: 1.2rem;
-}
-
-/* Utility */
-.text-right {
-    text-align: right;
-}
-
-/* ===== Accessibility Enhancements ===== */
-
-/* Reduced Motion - Respect user preferences */
-@media (prefers-reduced-motion: reduce) {
-    *,
-    *::before,
-    *::after {
-        animation-duration: 0.01ms !important;
-        animation-iteration-count: 1 !important;
-        transition-duration: 0.01ms !important;
-        scroll-behavior: auto !important;
-    }
-}
-
-/* High Contrast Mode */
-@media (prefers-contrast: high) {
-    :root {
-        --border: #000000;
-        --text-main: #000000;
-        --text-secondary: #000000;
-        --primary: #0000ff;
-        --primary-hover: #0000cc;
-        --bg-body: #ffffff;
-        --bg-sidebar: #ffffff;
-        --bg-card: #ffffff;
-    }
-
-    [data-theme="dark"] {
-        --border: #ffffff;
-        --text-main: #ffffff;
-        --text-secondary: #ffffff;
-        --primary: #00ffff;
-        --primary-hover: #66ffff;
-        --bg-body: #000000;
-        --bg-sidebar: #000000;
-        --bg-card: #000000;
-    }
-
-    .sidebar-link:focus,
-    .header-nav-link:focus,
-    button:focus-visible,
-    a:focus-visible {
-        outline: 3px solid currentColor;
-        outline-offset: 4px;
-    }
-}
-
-/* Focus Visible - Enhanced keyboard navigation */
-@supports not selector(:focus-visible) {
-    *:focus {
-        outline: 2px solid var(--primary);
-        outline-offset: 2px;
-    }
-}
-
-/* ===== Add/Edit Bookmark - Refined Dark UI ===== */
-.page-edit {
-    --bookmark-panel-bg: #121c30;
-    --bookmark-panel-border: #25324a;
-    --bookmark-panel-soft: #1a2640;
-    --bookmark-input-bg: #0c1528;
-    --bookmark-input-border: #334769;
-    --bookmark-input-focus: #70a0ff;
-    --bookmark-input-focus-ring: rgba(112, 160, 255, 0.25);
-    --bookmark-text-main: #eaf1ff;
-    --bookmark-text-muted: #9fb1d4;
-    --bookmark-tag-bg: #2f2f90;
-    --bookmark-tag-bg-hover: #3939a6;
-    --bookmark-tag-text: #cfdaff;
-    --bookmark-tag-remove-bg: rgba(255, 255, 255, 0.16);
-    --bookmark-tag-remove-bg-hover: rgba(255, 255, 255, 0.26);
-    --bookmark-save-bg: linear-gradient(135deg, #6fa8ff 0%, #4d82f0 100%);
-}
-
-.page-edit .editlinkform-col {
+/* ===== Bulk Bookmark Creation ===== */
+.page-add .col-md-6.col-md-offset-3 {
     width: 100%;
     max-width: 920px;
     margin: 0 auto;
     float: none;
 }
 
-.page-edit .bookmark-editor-card {
+.page-add .card,
+.page-edit-link-batch .batch-add-card {
+    border: 1px solid var(--border);
     border-radius: 16px;
-    border: 1px solid var(--bookmark-panel-border);
-    background: linear-gradient(180deg, #1a2943 0%, var(--bookmark-panel-bg) 100%);
-    box-shadow: 0 16px 42px rgba(0, 8, 22, 0.42);
+    background: var(--bg-card);
+    box-shadow: var(--shadow-md);
     overflow: hidden;
 }
 
-.page-edit .bookmark-editor-header {
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(0, 0, 0, 0) 100%);
-    border-bottom: 1px solid var(--bookmark-panel-border);
-    padding: 1.25rem 1.5rem;
+.page-add .card .card-header,
+.page-add .batch-add-card .card-header {
+    border-bottom: 1px solid var(--border);
+    color: var(--text-main);
 }
 
-.bookmark-editor-title {
-    margin: 0;
-    font-size: 1.35rem;
+.page-add .page-add-actions {
+    margin: 1.25rem 0 1rem;
     line-height: 1.2;
     color: var(--bookmark-text-main);
     letter-spacing: 0.01em;
 }
 
+.page-add .page-add-bulk-toggle {
+    min-height: 42px;
+    border-radius: 10px;
+}
+
+.page-add .batch-private-wrap {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.45rem;
+}
+
+.page-add .batch-private-checkbox {
+    width: 18px;
+    height: 18px;
+    accent-color: var(--primary);
+}
+
+.page-add .batch-private-label {
+    margin: 0;
+    color: var(--text-main);
+    font-weight: 500;
+}
+
 .bookmark-editor-meta {
     margin: 0.35rem 0 0;
     font-size: 0.8rem;
@@ -4178,15 +2367,148 @@ justify-content: stretch;
 .page-edit .bookmark-editor-footer a.btn {
 flex: 1 1 calc(50% - 0.4rem);
 }
+
 }
 
 @media (max-width: 640px) {
-.page-edit .bookmark-tags-text-input {
-min-width: 120px;
+    .page-edit .bookmark-tags-text-input {
+        min-width: 120px;
+    }
+
+    .page-edit .bookmark-editor-footer .btn,
+    .page-edit .bookmark-editor-footer a.btn {
+        flex: 1 1 100%;
+    }
 }
 
-.page-edit .bookmark-editor-footer .btn,
-.page-edit .bookmark-editor-footer a.btn {
-flex: 1 1 100%;
+/* ===== Bulk Creation + Edit (final overrides) ===== */
+.page-add .page-add-actions {
+    margin: 1.25rem 0 1rem;
+    color: var(--text-secondary);
 }
+
+.page-add .page-add-bulk-toggle {
+    min-height: 42px;
+    border-radius: 10px;
+}
+
+.page-add .batch-private-wrap {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.45rem;
+}
+
+.page-add .batch-private-checkbox {
+    width: 18px;
+    height: 18px;
+    accent-color: var(--primary);
+}
+
+.page-add .batch-private-label {
+    margin: 0;
+    color: var(--text-main);
+}
+
+.page-edit {
+    --bookmark-panel-bg: var(--bg-card);
+    --bookmark-panel-border: var(--border);
+    --bookmark-panel-soft: var(--bg-card-hover);
+    --bookmark-input-bg: var(--bg-body);
+    --bookmark-input-border: var(--border);
+    --bookmark-input-focus: var(--primary);
+    --bookmark-input-focus-ring: rgba(59, 130, 246, 0.2);
+    --bookmark-text-main: var(--text-main);
+    --bookmark-text-muted: var(--text-secondary);
+    --bookmark-tag-bg: var(--tag-bg);
+    --bookmark-tag-bg-hover: var(--primary-light);
+    --bookmark-tag-text: var(--tag-text);
+    --bookmark-tag-remove-bg: rgba(17, 24, 39, 0.1);
+    --bookmark-tag-remove-bg-hover: rgba(17, 24, 39, 0.2);
+    --bookmark-save-bg: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
+}
+
+[data-theme="dark"] .page-edit {
+    --bookmark-panel-bg: #121c30;
+    --bookmark-panel-border: #25324a;
+    --bookmark-panel-soft: #1a2640;
+    --bookmark-input-bg: #0c1528;
+    --bookmark-input-border: #334769;
+    --bookmark-input-focus: #70a0ff;
+    --bookmark-input-focus-ring: rgba(112, 160, 255, 0.25);
+    --bookmark-text-main: #eaf1ff;
+    --bookmark-text-muted: #9fb1d4;
+    --bookmark-tag-bg: #2f2f90;
+    --bookmark-tag-bg-hover: #3939a6;
+    --bookmark-tag-text: #cfdaff;
+    --bookmark-tag-remove-bg: rgba(255, 255, 255, 0.16);
+    --bookmark-tag-remove-bg-hover: rgba(255, 255, 255, 0.26);
+    --bookmark-save-bg: linear-gradient(135deg, #6fa8ff 0%, #4d82f0 100%);
+}
+
+.page-edit .bookmark-editor-card {
+    border-radius: 16px;
+    border: 1px solid var(--bookmark-panel-border);
+    background: var(--bookmark-panel-bg);
+    box-shadow: var(--shadow-lg);
+}
+
+.page-edit .bookmark-editor-header {
+    background: linear-gradient(180deg, rgba(148, 163, 184, 0.12) 0%, rgba(148, 163, 184, 0) 100%);
+}
+
+.bookmark-editor-title {
+    margin: 0;
+    font-size: 1.35rem;
+    line-height: 1.2;
+    color: var(--bookmark-text-main);
+}
+
+.page-edit .bookmark-editor-form[data-batch-mode="1"] .bookmark-markdown-editor {
+    display: none;
+}
+
+.page-edit-link-batch .batch-save-all-wrap {
+    margin: 1.5rem 0;
+}
+
+.page-edit-link-batch .batch-save-all-btn {
+    min-width: 150px;
+    min-height: 42px;
+    border-radius: 10px;
+}
+
+.page-edit-link-batch .fullscreen {
+    position: fixed;
+    inset: 0;
+    z-index: 1600;
+    background: var(--overlay-bg);
+}
+
+.page-edit-link-batch .content-fullscreen {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1.25rem;
+}
+
+.page-edit-link-batch .batch-progress-card {
+    border: 1px solid var(--border);
+    border-radius: 14px;
+    background: var(--bg-card);
+    color: var(--text-main);
+    box-shadow: var(--shadow-xl);
+    padding: 1.25rem 1.5rem;
+}
+
+.page-edit-link-batch .batch-progress-title {
+    margin: 0 0 0.6rem;
+    font-size: 1.1rem;
+    text-align: center;
+}
+
+[data-theme="dark"] .page-edit-link-batch .batch-progress-card {
+    border-color: #314564;
+    background: #122039;
+    color: #eaf2ff;
 }
\ No newline at end of file
diff --git a/shaarli-pro/editlink.batch.html b/shaarli-pro/editlink.batch.html
index 12256ac..c5e9809 100644
--- a/shaarli-pro/editlink.batch.html
+++ b/shaarli-pro/editlink.batch.html
@@ -12,7 +12,8 @@
         <div class="container">
             <div class="mbl row">
                 <div class="col-md-8 col-md-offset-2">
-                    <div class="is-inverted">
+                    <div class="is-inverted batch-progress-card">
+                        <h2 class="batch-progress-title">{'Saving bookmarks'|t}</h2>
                         <div class="progress-counter">
                             <span class="progress-current">0</span> / <span class="progress-total"></span>
                         </div>
@@ -26,8 +27,8 @@
     </div>
 </div>
 
-<div class="text-center" style="margin: 1.5rem 0;">
-    <button type="submit" name="save_edit_batch" class="btn btn-primary">{'Save all'|t}</button>
+<div class="batch-save-all-wrap text-center">
+    <button type="submit" name="save_edit_batch" class="btn btn-primary batch-save-all-btn">{'Save all'|t}</button>
 </div>
 
 {loop="$links"}
@@ -35,8 +36,8 @@
   {include="editlink"}
 {/loop}
 
-<div class="text-center" style="margin: 1.5rem 0;">
-    <button type="submit" name="save_edit_batch" class="btn btn-primary">{'Save all'|t}</button>
+<div class="batch-save-all-wrap text-center">
+    <button type="submit" name="save_edit_batch" class="btn btn-primary batch-save-all-btn">{'Save all'|t}</button>
 </div>
 
 {include="page.footer"}
diff --git a/shaarli-pro/js/script.js b/shaarli-pro/js/script.js
index fa5dddf..3d25b80 100644
--- a/shaarli-pro/js/script.js
+++ b/shaarli-pro/js/script.js
@@ -1411,7 +1411,115 @@ document.addEventListener('DOMContentLoaded', () => {
         });
     }
 
+    function initBatchCreationFlow() {
+        const batchToggleBtn = document.querySelector('.button-batch-addform');
+        const batchForm = document.querySelector('form.batch-addform');
+
+        if (batchToggleBtn && batchForm) {
+            batchToggleBtn.addEventListener('click', () => {
+                const isHidden = batchForm.classList.contains('hidden');
+                batchForm.classList.toggle('hidden');
+                batchToggleBtn.setAttribute('aria-expanded', isHidden ? 'true' : 'false');
+
+                if (isHidden) {
+                    const urlsField = batchForm.querySelector('#urls');
+                    urlsField?.focus();
+                }
+            });
+        }
+
+        const batchPage = document.querySelector('.page-edit-link-batch');
+        if (!batchPage) return;
+
+        const progressOverlay = document.getElementById('progress-overlay');
+        const progressCurrentEl = batchPage.querySelector('.progress-current');
+        const progressTotalEl = batchPage.querySelector('.progress-total');
+        const progressActualEl = batchPage.querySelector('.progress-actual');
+        const saveAllButtons = batchPage.querySelectorAll('button[name="save_edit_batch"]');
+
+        const getActiveBatchForms = () => Array.from(
+            batchPage.querySelectorAll('.bookmark-editor-form[data-batch-mode="1"]')
+        );
+
+        const updateProgress = (current, total) => {
+            if (progressCurrentEl) {
+                progressCurrentEl.textContent = String(current);
+            }
+            if (progressTotalEl) {
+                progressTotalEl.textContent = String(total);
+            }
+            if (progressActualEl) {
+                const percentage = total > 0 ? (current * 100) / total : 0;
+                progressActualEl.style.width = `${percentage}%`;
+            }
+        };
+
+        const initializeProgressTotal = () => {
+            const total = getActiveBatchForms().length;
+            updateProgress(0, total);
+        };
+
+        initializeProgressTotal();
+
+        batchPage.addEventListener('click', (event) => {
+            const cancelBtn = event.target.closest('button[name="cancel-batch-link"]');
+            if (!cancelBtn) return;
+
+            event.preventDefault();
+            const editForm = cancelBtn.closest('.editlinkform');
+            editForm?.remove();
+            initializeProgressTotal();
+        });
+
+        async function saveFormsSequentially(forms) {
+            const total = forms.length;
+            let current = 0;
+
+            updateProgress(0, total);
+            progressOverlay?.classList.remove('hidden');
+
+            for (const form of forms) {
+                const formData = new FormData(form);
+
+                try {
+                    const response = await fetch(form.action || `${shaarli.basePath}/admin/shaare`, {
+                        method: 'POST',
+                        body: formData,
+                        credentials: 'same-origin',
+                    });
+
+                    if (!response.ok) {
+                        console.error('Batch save failed with status', response.status);
+                    }
+                } catch (error) {
+                    console.error('Batch save request failed', error);
+                }
+
+                current += 1;
+                updateProgress(current, total);
+            }
+
+            window.location.href = `${shaarli.basePath}/`;
+        }
+
+        saveAllButtons.forEach((button) => {
+            button.addEventListener('click', async (event) => {
+                event.preventDefault();
+
+                const forms = getActiveBatchForms();
+                if (!forms.length) return;
+
+                saveAllButtons.forEach((btn) => {
+                    btn.disabled = true;
+                });
+
+                await saveFormsSequentially(forms);
+            });
+        });
+    }
+
     initBookmarkEditorForms();
+    initBatchCreationFlow();
 
     // ===== Persistent Media Player (Popup via Blob URL) =====
     // Audio plays in a separate popup window that survives page navigation.
