/* 全局基础 */
* { margin:0; padding:0; box-sizing:border-box; }

body {
    display:flex;
    background:radial-gradient(circle at top, #0f0f12 0%, #070708 100%);
    color:#ededed;
    font-family:'Inter',sans-serif;
    overflow-x:hidden;
    -webkit-tap-highlight-color: transparent; /* 移动端点击高亮去除 */
}

/* 左侧目录栏（PC） */
.sidebar {
    width:200px;
    height:100vh;
    position:fixed;
    left:0; top:0;
    padding:40px 22px;
    background:rgba(18,18,22,0.45);
    backdrop-filter:blur(14px);
    border-right:1px solid rgba(255,255,255,0.07);
    overflow-y:auto;
}

.nav-link {
    display:block;
    margin:12px 0;
    font-size:15px;
    color:#b8b8c8;
    text-decoration:none;
    padding-left:4px;
    transition:.25s ease;
}
.nav-link:hover { color:#fff; transform:translateX(6px); }
.nav-link.active {
    color:#a8b4ff;
    border-left:3px solid #a8b4ff;
    padding-left:10px;
    font-weight:600;
}

/* 主内容区 */
.main {
    flex:1;
    margin-left:200px;
    padding:70px 80px;
}

.main h1 {
    font-size:30px;
    margin:60px 0 26px;
}
.main h1:first-child { margin-top:0; }

/* 工具卡片布局 */
.grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    gap:26px;
}

.card {
    background:rgba(25,25,30,0.55);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:16px;
    backdrop-filter:blur(14px);
    padding:24px 22px;
    opacity:0;
    transform:translateY(20px);
    transition:.35s ease;
    cursor:pointer;
}
.card.visible { opacity:1; transform:translateY(0); }
.card:hover {
    transform:translateY(-6px);
    box-shadow:0 10px 25px rgba(0,0,0,0.4);
}

.card-title { 
    display:flex; 
    align-items:center; 
    margin-bottom:12px; 
    font-size:16px; 
}

.card-icon {
    width:34px; height:34px;
    background:rgba(255,255,255,0.08);
    border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    margin-right:14px;
}
.card-icon img { width:22px; }

/* 描述 */
.card-desc { font-size:14px; color:#bdbdcb; }

/* 右下角新增按钮 */
.add-btn {
    position:fixed;
    right:30px; bottom:30px;
    width:62px; height:62px;
    background:#6478ff;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:#fff;
    font-size:34px;
    cursor:pointer;
    transition:.25s;
    box-shadow:0 10px 25px rgba(0,0,0,.4);
    z-index:200;
}
.add-btn:hover { transform:scale(1.06); }

/* 弹窗遮罩 */
.modal-overlay {
    position:fixed; inset:0;
    display:none;
    justify-content:center; align-items:center;
    background:rgba(0,0,0,0.55);
    backdrop-filter:blur(6px);
    z-index:300;
}

/* 弹窗本体（PC） */
.modal {
    width:420px;
    padding:26px;
    background:rgba(20,20,26,0.88);
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.09);
    animation:modalIn .25s ease;
}

@keyframes modalIn {
    from { opacity:0; transform:translateY(30px); }
    to { opacity:1; transform:translateY(0); }
}

.modal h2 { font-size:20px; margin-bottom:20px; }

/* 表单组件 */
.form-group { margin-bottom:18px; }
.form-group label { display:block; margin-bottom:6px; opacity:.85; font-size:14px; }

.form-group input {
    width:100%; padding:10px 12px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.12);
    color:#fff;
    border-radius:6px;
}

/* 自定义下拉 */
.select { position:relative; width:100%; }
.select-display {
    padding:10px 12px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:6px;
    cursor:pointer;
}
.select-display::after { content:"▾"; float:right; opacity:.8; }

.select-options {
    position:absolute;
    left:0; top:110%;
    width:100%;
    background:rgba(30,30,36,.9);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:8px;
    opacity:0;
    pointer-events:none;
    transform:translateY(10px);
    transition:.25s;
    z-index:50;
}

.select.open .select-options {
    opacity:1;
    pointer-events:auto;
    transform:translateY(0);
}

.select-option {
    padding:12px 14px;
    cursor:pointer;
    color:#eee;
}
.select-option:hover { background:rgba(255,255,255,0.15); }
.select-option.selected {
    background:rgba(100,100,255,0.35);
    color:#fff;
}

/* 弹窗按钮 */
.modal-actions {
    display:flex; justify-content:flex-end;
    gap:14px; margin-top:20px;
}
.modal-actions button {
    padding:8px 16px;
    border:none;
    border-radius:6px;
    color:white;
    cursor:pointer;
    transition:.25s;
}

#btn-cancel { background:rgba(255,255,255,0.14); }
#btn-save { background:#647aff; }
.modal-actions button:hover { transform:translateY(-2px); }

/* 右键菜单 */
.context-menu {
    position:fixed;
    display:none;
    background:rgba(25,25,30,0.9);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:8px;
    min-width:140px;
    z-index:400;
}
.context-item {
    padding:12px 15px;
    cursor:pointer;
    color:#eee;
}
.context-item:hover { background:rgba(255,255,255,0.12); }

/* 全局提示 */
.toast-container {
    position:fixed;
    right:20px; top:20px;
    z-index:999;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.toast {
    padding:12px 20px;
    border-radius:8px;
    color:#fff;
    animation:toastIn .25s ease forwards;
    font-size:14px;
    backdrop-filter:blur(8px);
}
@keyframes toastIn {
    from { opacity:0; transform:translateX(30px); }
    to { opacity:1; transform:translateX(0); }
}

.toast.success { background:rgba(80,180,120,0.9); }
.toast.error { background:rgba(220,80,80,0.9); }




/* ==========================================================
   移动端适配（≤900px）
========================================================== */
@media(max-width:900px){
    /* 左侧目录改成顶部导航 */
    .sidebar {
        width:100%;
        height:auto;
        position:fixed;
        top:0; left:0;
        display:flex;
        flex-wrap:nowrap;
        overflow-x:auto;
        gap:18px;
        padding:16px 20px;
        white-space:nowrap;
        border-bottom:1px solid rgba(255,255,255,0.1);
        backdrop-filter:blur(14px);
        z-index:10;
    }

    .nav-link {
        margin:0;
        padding:6px 12px;
        font-size:14px;
        border-left:none !important;
    }
    .nav-link.active {
        padding-left:12px;
        border-left:none;
        background:rgba(120,120,255,0.22);
        border-radius:8px;
    }

    .main {
        margin-left:0;
        padding:110px 20px 50px;
    }

    /* 卡片单列 */
    .grid { grid-template-columns:1fr; gap:22px; }
    .card { padding:20px; }
}

/* ==========================================================
   超小屏（≤600px）
========================================================== */
@media(max-width:600px){
    .main h1 { font-size:24px; margin:40px 0 20px; }

    .card-title { font-size:15px; }
    .card-desc { font-size:13px; }

    .add-btn {
        width:54px; height:54px;
        font-size:30px;
    }

    /* 弹窗全屏 */
    .modal {
        width:92%;
        height:auto;
        padding:20px;
        border-radius:12px;
    }
}

/* ==========================================================
   极小屏（≤420px）
========================================================== */
@media(max-width:420px){
    body { font-size:14px; }

    .sidebar {
        padding:12px 16px;
        gap:10px;
    }

    .nav-link { font-size:13px; }

    .modal { width:96%; padding:18px; }

    .form-group input { font-size:13px; }

    .select-display,
    .select-option { font-size:13px; padding:10px 12px; }

    .toast {
        font-size:13px;
        padding:10px 16px;
    }
}