/**
 * themes/notepad/assets/style.css — Notepad 主题
 *
 * ⚠️ 本文件是 demo.html 的「严格移植」。
 * demo.html 是 React 预渲染快照，只保留了 Tailwind 的 class 名，没有样式表，
 * 因此这里把 demo.html 实际用到的 Tailwind 工具类逐条实现，
 * 每条规则上方都用注释标注对应的原始类名，便于逐条比对（可 grep "←" 查阅）。
 *
 * 色板 = Tailwind v3 默认调色板；尺寸 = Tailwind 默认间距刻度。
 * 本文件在 app.css 之后加载，同名同优先级规则后者生效。
 */

/* ============================================================
   1. 设计令牌（Tailwind 默认调色板子集）
   ============================================================ */

:root {
    --np-indigo-50:  #eef2ff;
    --np-indigo-100: #e0e7ff;
    --np-indigo-200: #c7d2fe;
    --np-indigo-300: #a5b4fc;
    --np-indigo-600: #4f46e5;
    --np-indigo-900: #312e81;
    --np-purple-50:  #faf5ff;
    --np-purple-600: #9333ea;
    --np-gray-50:    #f9fafb;
    --np-gray-100:   #f3f4f6;
    --np-gray-200:   #e5e7eb;
    --np-gray-300:   #d1d5db;
    --np-gray-400:   #9ca3af;
    --np-gray-500:   #6b7280;
    --np-gray-600:   #4b5563;
    --np-gray-800:   #1f2937;
    --np-green-500:  #22c55e;
    --np-red-50:     #fef2f2;
    --np-red-400:    #f87171;
    --np-red-500:    #ef4444;

    /* 渐变色（可由主题选项覆盖：--np-accent-from / --np-accent-to） */
    --np-accent-from: #4f46e5;   /* from-indigo-600 */
    --np-accent-to:   #9333ea;   /* to-purple-600 */

    /* Tailwind 阴影刻度 */
    --np-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);
    --np-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
    --np-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
    --np-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
    --np-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25);

    --np-maxw: 672px;   /* max-w-2xl */
}

/* ============================================================
   2. 基础 / 背景
   ============================================================ */

/* body: bg-gray-100 antialiased selection:bg-indigo-200 selection:text-indigo-900 */
.np-body {
    margin: 0;
    background: var(--np-gray-100);
    color: var(--np-gray-800);
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB",
                 "Microsoft YaHei", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 16px;
    line-height: 1.5;
}
.np-body ::selection { background: var(--np-indigo-200); color: var(--np-indigo-900); }

/* min-h-screen relative bg-gray-50 text-gray-800 */
/* 注：demo 的 wrapper 有 overflow-hidden，但那会破坏 sticky，
   这里改用 overflow-x: clip 达到同样的「不出现横向滚动」效果。 */
.np-canvas {
    min-height: 100vh;
    background: var(--np-gray-50);
    color: var(--np-gray-800);
    overflow-x: clip;
}

/* fixed inset-0 -z-10 */
.np-bg-layer { position: fixed; inset: 0; z-index: -10; pointer-events: none; }
/* absolute inset-0 bg-gradient-to-br from-indigo-50/80 via-white to-purple-50/80 */
.np-bg-gradient {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to bottom right,
        rgb(238 242 255 / .8),   /* from-indigo-50/80 */
        #ffffff,                 /* via-white */
        rgb(250 245 255 / .8));  /* to-purple-50/80 */
}

/* container mx-auto px-4 pt-6 pb-28 max-w-2xl relative z-10 */
.np-shell {
    max-width: var(--np-maxw);
    margin: 0 auto;
    padding: 24px 16px 112px;
    position: relative;
    z-index: 10;
}

/* 内页（文章详情等）复用的 .container 收进窄栏，保持 App 观感 */
.np-shell .container { max-width: 100%; width: auto; padding-left: 0; padding-right: 0; }

/* 后台 / 编辑器 / 媒体库 / 安装页：放开窄栏（唯一一处有意的偏离） */
.np-shell.np-wide { max-width: 1060px; }

.np-i { display: inline-block; vertical-align: middle; flex: 0 0 auto; }
.np-inline-form { display: inline-flex; margin: 0; }

/* ============================================================
   3. 粘性头部
   ============================================================ */

/* mb-6 sticky top-0 z-20 bg-gray-50/95 backdrop-blur-sm py-2 -mx-4 px-4 shadow-sm */
.np-header {
    margin: 0 -16px 24px;
    padding: 8px 16px;
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgb(249 250 251 / .95);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    box-shadow: var(--np-shadow-sm);
}

/* flex justify-between items-center mb-4 */
.np-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

/* text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-purple-600 */
.np-brand {
    margin: 0;
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    letter-spacing: -0.01em;
    background-image: linear-gradient(to right, var(--np-accent-from), var(--np-accent-to));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ml-2 text-sm font-normal text-gray-500 */
.np-brand-user {
    margin-left: 8px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: var(--np-gray-500);
    -webkit-text-fill-color: var(--np-gray-500);
    white-space: nowrap;
}

/* flex gap-2 */
.np-actions { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; }

/* px-3 py-1.5 rounded-full bg-white border border-gray-200 text-gray-500 text-xs
   hover:bg-red-50 hover:text-red-500 transition-colors */
.np-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 9999px;
    background: #fff;
    border: 1px solid var(--np-gray-200);
    color: var(--np-gray-500);
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s, color .15s, border-color .15s;
}
.np-chip:hover { background: var(--np-red-50); color: var(--np-red-500); }

/* px-3 py-1.5 rounded-full text-xs font-medium flex items-center gap-1
   bg-gray-200 text-gray-600 hover:bg-gray-300 */
.np-chip-gray {
    background: var(--np-gray-200);
    border-color: transparent;
    color: var(--np-gray-600);
}
.np-chip-gray:hover { background: var(--np-gray-300); color: var(--np-gray-600); }

/* relative mb-4 */
.np-search { position: relative; margin-bottom: 16px; }
/* i.fas.fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 */
.np-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--np-gray-400);
    display: inline-flex;
    pointer-events: none;
}
.np-search-icon .np-i { width: 14px; height: 14px; }

/* w-full pl-10 pr-4 py-2.5 rounded-xl border border-gray-200 shadow-sm bg-white
   focus:ring-2 focus:ring-indigo-100 outline-none */
.np-search input,
.np-search input[type="search"] {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 16px 10px 40px;
    border-radius: 12px;
    border: 1px solid var(--np-gray-200);
    background: #fff;
    box-shadow: var(--np-shadow-sm);
    color: var(--np-gray-800);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.4;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.np-search input::placeholder { color: var(--np-gray-400); }
.np-search input:focus {
    border-color: var(--np-indigo-300);
    box-shadow: var(--np-shadow-sm), 0 0 0 2px var(--np-indigo-100);
}

/* flex gap-2 overflow-x-auto no-scrollbar pb-1 items-center h-10 */
.np-filters {
    display: flex;
    gap: 8px;
    align-items: center;
    height: 40px;
    padding-bottom: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.np-filters::-webkit-scrollbar { display: none; }

/* px-3 py-1.5 rounded-full text-xs font-medium whitespace-nowrap transition-colors
   bg-white text-gray-600 hover:bg-indigo-50 border border-gray-100 */
.np-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 9999px;
    border: 1px solid var(--np-gray-100);
    background: #fff;
    color: var(--np-gray-600);
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    flex: 0 0 auto;
    transition: background-color .15s, color .15s, border-color .15s;
}
.np-pill:hover { background: var(--np-indigo-50); }

/* bg-indigo-600 text-white shadow-md（激活态） */
.np-pill.is-active {
    background: var(--np-accent-from);
    border-color: var(--np-accent-from);
    color: #fff;
    box-shadow: var(--np-shadow-md);
}
.np-pill.is-active:hover { background: var(--np-accent-from); color: #fff; }

/* px-2.5 py-1.5 rounded-full text-xs font-medium whitespace-nowrap
   bg-white text-indigo-600 border border-dashed border-indigo-300 hover:bg-indigo-50 */
.np-pill-add {
    padding-left: 10px;
    padding-right: 10px;
    background: #fff;
    border: 1px dashed var(--np-indigo-300);
    color: var(--np-indigo-600);
}

/* ============================================================
   4. 分组 / 列表
   ============================================================ */

/* mb-6 animate-[fadeIn_0.3s] */
@keyframes npFadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes npScaleIn { from { transform: scale(.95); opacity: 0 } to { transform: scale(1); opacity: 1 } }
@keyframes npSlideUp {
    from { transform: translateY(100%); opacity: 0 }
    to   { transform: translateY(0);    opacity: 1 }
}

.np-group { margin-bottom: 24px; animation: npFadeIn .3s ease-out; }

/* text-xs font-bold text-gray-400 uppercase tracking-wider mb-3 ml-1 */
.np-group-title {
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    color: var(--np-gray-400);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0 0 12px 4px;
}
/* font-normal opacity-50 */
.np-group-count { font-weight: 400; opacity: .5; }

/* space-y-3 */
.np-list { display: flex; flex-direction: column; gap: 12px; }

/* ============================================================
   5. 卡片
   ============================================================ */

/* relative rounded-xl shadow-sm transition-all duration-200 overflow-hidden mb-3
   border border-gray-200/60 bg-white hover:shadow-md active:scale-[0.98] cursor-pointer */
.np-card {
    position: relative;
    border-radius: 12px;
    border: 1px solid rgb(229 231 235 / .6);
    background: #fff;
    box-shadow: var(--np-shadow-sm);
    overflow: hidden;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all .2s;
}
.np-card:hover { box-shadow: var(--np-shadow-md); }
.np-card:active { transform: scale(.98); }

/* 整卡可点：平铺覆盖层（对应 demo 卡片的 cursor-pointer + 点击跳转） */
.np-card-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 12px;
    text-decoration: none;
}

/* flex */
.np-card-flex { display: flex; }

/* w-24 bg-gray-100 flex-shrink-0 relative overflow-hidden（h-auto → 拉伸到卡片高度） */
.np-thumb {
    width: 96px;
    flex: 0 0 96px;
    background: var(--np-gray-100);
    position: relative;
    overflow: hidden;
    align-self: stretch;
}
/* img.absolute inset-0 w-full h-full object-cover */
.np-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* 无封面时的占位：标题首字 + 淡紫渐变 */
.np-thumb-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 26px;
    font-weight: 700;
    color: rgb(79 70 229 / .45);
    background-image: linear-gradient(135deg, rgb(238 242 255 / .9), rgb(250 245 255 / .9));
}

/* p-4 flex-1 min-w-0 */
.np-card-body { padding: 16px; flex: 1 1 0%; min-width: 0; }

/* flex justify-between items-start mb-2 gap-2 */
.np-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}

/* font-bold text-lg truncate flex-1 */
.np-card-title {
    flex: 1 1 0%;
    min-width: 0;
    margin: 0;
    font-size: 18px;
    line-height: 28px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--np-gray-800);
}
.np-card-title a { color: inherit; text-decoration: none; }
.np-card:hover .np-card-title,
.np-card:hover .np-card-title a { color: var(--np-accent-from); }

/* flex flex-col items-end gap-1 */
.np-card-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex: 0 0 auto;
}

/* text-[10px] px-2 py-0.5 rounded-full bg-indigo-50 text-indigo-600 border border-indigo-100 whitespace-nowrap */
.np-badge {
    display: inline-block;
    font-size: 10px;
    line-height: 14px;
    padding: 2px 8px;
    border-radius: 9999px;
    background: var(--np-indigo-50);
    color: var(--np-indigo-600);
    border: 1px solid var(--np-indigo-100);
    white-space: nowrap;
    text-decoration: none;
}
a.np-badge:hover { background: var(--np-indigo-100); }

/* text-xs text-gray-400 */
.np-vis { font-size: 12px; line-height: 16px; color: var(--np-gray-400); display: flex; }
.np-vis .np-i { width: 12px; height: 12px; }
/* i.fas.fa-globe text-green-500 */
.np-vis-public { color: var(--np-green-500); }

/* text-sm opacity-70 line-clamp-2 mb-3 leading-relaxed min-h-[1.5em] */
.np-excerpt {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.625;
    opacity: .7;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 1.5em;
    word-break: break-word;
}

/* flex justify-between items-center text-xs opacity-50 pt-2 border-t border-gray-100 */
.np-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    line-height: 16px;
    opacity: .5;
    padding-top: 8px;
    border-top: 1px solid var(--np-gray-100);
}

/* flex flex-col gap-0.5 */
.np-meta-times { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.np-meta-times span { white-space: nowrap; }

/* flex items-center gap-2 */
.np-meta-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

/* flex gap-2 ml-1 border-l pl-2 border-gray-300 */
.np-meta-stats {
    display: flex;
    gap: 8px;
    margin-left: 4px;
    padding-left: 8px;
    border-left: 1px solid var(--np-gray-300);
}

/* flex items-center gap-0.5 */
.np-stat { display: inline-flex; align-items: center; gap: 2px; }
.np-stat .np-i { width: 10px; height: 10px; }
.np-stat-like .np-i { color: var(--np-red-500); }

/* flex items-center gap-3 -mr-2 -mb-2 */
.np-card-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-right: -8px;
    margin-bottom: -8px;
    flex: 0 0 auto;
}

/* w-8 h-8 flex items-center justify-center rounded-full text-gray-400
   hover:bg-gray-100 hover:text-red-400 transition-colors */
.np-icon-btn {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 9999px;
    border: 0;
    background: transparent;
    color: var(--np-gray-400);
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    transition: background-color .15s, color .15s;
}
.np-icon-btn .np-i { width: 16px; height: 16px; }
.np-icon-btn:hover { background: var(--np-gray-100); color: var(--np-red-400); }

/* 卡片内的交互元素必须压过 .np-card-link 覆盖层 */
.np-del, .np-card-actions { position: relative; z-index: 2; }

/* ============================================================
   6. 空状态 / 分页 / 页脚
   ============================================================ */

/* text-center mt-4 pb-4 opacity-60 */
.np-empty {
    text-align: center;
    padding: 56px 16px;
    opacity: .6;
}
.np-empty-ico { margin-bottom: 12px; color: var(--np-gray-400); }
.np-empty p { margin: 0 0 4px; font-size: 14px; color: var(--np-gray-500); }

/* 分页：沿用 demo 的胶囊语言（原文无分页，此处保持同风格） */
.np-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 28px 0 4px;
}
.np-pager a, .np-pager span {
    min-width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border-radius: 9999px;
    border: 1px solid var(--np-gray-200);
    background: #fff;
    color: var(--np-gray-600);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    box-shadow: var(--np-shadow-sm);
    transition: background-color .15s, color .15s, border-color .15s;
}
.np-pager a:hover { background: var(--np-indigo-50); color: var(--np-indigo-600); }
.np-pager .is-active {
    background: var(--np-accent-from);
    border-color: var(--np-accent-from);
    color: #fff;
    box-shadow: var(--np-shadow-md);
}
.np-pager .np-gap { border-color: transparent; background: transparent; box-shadow: none; }

/* text-center mt-4 pb-4 opacity-60 hover:opacity-100 */
.np-footer {
    text-align: center;
    margin-top: 16px;
    padding-bottom: 16px;
    opacity: .6;
    transition: opacity .15s;
    font-size: 12px;
    line-height: 20px;
    color: var(--np-gray-400);
}
.np-footer:hover { opacity: 1; }
.np-footer a { color: inherit; text-decoration: none; margin: 0 6px; }
.np-footer a:hover { color: var(--np-red-400); }

/* ============================================================
   7. 右下浮动按钮
   ============================================================ */

/* fixed bottom-6 right-6 flex flex-col items-center gap-4 z-40 animate-[slideUp_0.3s_ease-out] */
.np-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    z-index: 40;
    animation: npSlideUp .3s ease-out;
}
/* w-12 h-12 rounded-full bg-white text-gray-600 shadow-lg hover:shadow-xl
   flex items-center justify-center border border-gray-100 active:scale-90 */
.np-fab-mini {
    width: 48px;
    height: 48px;
    border-radius: 9999px;
    background: #fff;
    color: var(--np-gray-600);
    border: 1px solid var(--np-gray-100);
    box-shadow: var(--np-shadow-lg);
    display: grid;
    place-items: center;
    cursor: pointer;
    text-decoration: none;
    transition: all .2s;
}
.np-fab-mini .np-i { width: 20px; height: 20px; }
.np-fab-mini:hover { box-shadow: var(--np-shadow-xl); color: var(--np-indigo-600); }
.np-fab-mini:active { transform: scale(.9); }

/* w-16 h-16 rounded-full bg-gradient-to-r from-indigo-600 to-purple-600 text-white
   shadow-xl hover:shadow-2xl hover:scale-105 active:scale-95 transition-all
   flex items-center justify-center ring-4 ring-white/50 */
.np-fab-main {
    width: 64px;
    height: 64px;
    border-radius: 9999px;
    background-image: linear-gradient(to right, var(--np-accent-from), var(--np-accent-to));
    color: #fff;
    border: 0;
    display: grid;
    place-items: center;
    cursor: pointer;
    text-decoration: none;
    box-shadow: var(--np-shadow-xl), 0 0 0 4px rgb(255 255 255 / .5);
    transition: all .2s;
}
.np-fab-main .np-i { width: 26px; height: 26px; stroke-width: 2.4; }
.np-fab-main:hover { box-shadow: var(--np-shadow-2xl), 0 0 0 4px rgb(255 255 255 / .5); transform: scale(1.05); }
.np-fab-main:active { transform: scale(.95); }

/* ============================================================
   8. 闪信 / 内页微调
   ============================================================ */

.np-flash {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}
.np-flash-item {
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 20px;
    border: 1px solid var(--np-indigo-100);
    background: var(--np-indigo-50);
    color: var(--np-indigo-900);
    box-shadow: var(--np-shadow-sm);
}
.np-flash-item.is-error { background: var(--np-red-50); border-color: #fecaca; color: #991b1b; }
.np-flash-item.is-success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }

/* 内页（文章详情等）留在窄栏里，避免 app.css 的 960px 撑破 App 观感 */
.np-shell .article-detail,
.np-shell .auth-page { max-width: 100%; }

/* 无障碍：尊重减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
    .np-group, .np-fab { animation: none; }
    .np-card, .np-card:hover, .np-card:active { transition: none; transform: none; }
}