@charset "utf-8";
/* Form Items ------------------*/

:where(.tools-app) {
    --ts-bg:color-mix(in srgb, var(--bg), white 80%); /* inherit  from main.css*/

    /* ===== 核心变量（只需改这些）===== */
    --ts-primary: #3498db;           /* 主色调 */
    --ts-primary-rgb: 52, 152, 219;  /* 主色 RGB 值（用于 rgba）*/
   
    --ts-text: #333;                 /* 主文字色 */
    --ts-border: #e1e8ed;            /* 边框色 */
    --ts-radius: 4px;                /* 圆角 */
    --ts-font-mono: 'Consolas', 'Monaco', monospace;
    
    /* ===== 派生变量（自动计算）===== */
    --ts-primary-hover: color-mix(in srgb, var(--ts-primary), black 10%);
    --ts-primary-soft: color-mix(in srgb, var(--ts-primary), white 80%);
    --ts-focus-shadow: 0 0 0 2px rgba(var(--ts-primary-rgb), 0.2);
    
    --ts-text-muted: color-mix(in srgb, var(--ts-text), white 50%);
    --ts-text-light: color-mix(in srgb, var(--ts-text), white 30%);
    --ts-placeholder: color-mix(in srgb, var(--ts-text), white 60%);
    
    --ts-border-light: color-mix(in srgb, var(--ts-border), white 50%);
    
    --ts-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --ts-shadow-hover: 0 5px 10px rgba(0, 0, 0, 0.1);
    --ts-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
    
    /* ===== 状态色（从主色逻辑派生）===== */
    --ts-success: #23a057;
    --ts-error: #e74c3c;
    --ts-warning: #b3a101;
    
    --ts-success-bg: color-mix(in srgb, var(--ts-success), white 85%);
    --ts-success-border: color-mix(in srgb, var(--ts-success), white 60%);
    
    --ts-error-bg: color-mix(in srgb, var(--ts-error), white 90%);
    --ts-error-border: color-mix(in srgb, var(--ts-error), white 60%);
    
    --ts-warning-bg: color-mix(in srgb, var(--ts-warning), white 85%);
    --ts-warning-border: color-mix(in srgb, var(--ts-warning), white 40%);
}

/* ===== 黑色主题 ===== */
@media (prefers-color-scheme: dark) {
    :where(.tools-app) {
        --ts-primary: #5dade2;
        --ts-primary-rgb: 93, 173, 226;
        --ts-bg:color-mix(in srgb, var(--bg), white 25%);
        --ts-text: #eeecec;
        --ts-border: #3a3a4e;
        
        --ts-text-muted: color-mix(in srgb, var(--ts-text), black 50%);
        --ts-text-light: color-mix(in srgb, var(--ts-text), black 30%);
        --ts-placeholder: color-mix(in srgb, var(--ts-text), black 23%);
        
        --ts-border-light: color-mix(in srgb, var(--ts-border), white 20%);
        
        --ts-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        --ts-shadow-hover: 0 5px 10px rgba(0, 0, 0, 0.3);
        --ts-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
        
        --ts-success-bg: color-mix(in srgb, var(--ts-success), black 80%);
        --ts-success-border: color-mix(in srgb, var(--ts-success), black 50%);
        
        --ts-error-bg: color-mix(in srgb, var(--ts-error), black 80%);
        --ts-error-border: color-mix(in srgb, var(--ts-error), black 50%);
        
        --ts-warning-bg: color-mix(in srgb, var(--ts-warning), black 80%);
        --ts-warning-border: color-mix(in srgb, var(--ts-warning), black 50%);
    }
}

/* ===== 表单控件 ===== */
textarea, input, select {
    width: 100%;
    padding: 16px;
    border: 1px solid var(--ts-border);
    border-radius: var(--ts-radius);
    font-size: 14px;
    font-family: var(--ts-font-mono);
    background-color: var(--ts-bg);
    color: var(--ts-text);
    transition: all 0.3s ease;
}

textarea:focus, input:focus, select:focus {
    border-color: var(--ts-primary);
    box-shadow: var(--ts-focus-shadow);
    outline: none;
}

input::placeholder,
textarea::placeholder {
    color: var(--ts-placeholder);
    font-style: italic;
    opacity: 0.8;
}

/* ===== 状态栏（去掉尺寸变量）===== */
.status {
    font-family: var(--ts-font-mono);
    padding: 8px 10px;
    font-size: 12px;
    border: dotted 1px var(--ts-border);
    line-height: 1.2;
    border-radius: var(--ts-radius);
    color: hsl(from var(--ts-text) h s l / 30%);
    cursor: default;
    user-select: none;
}

.status.success {
    background: var(--ts-success-bg);
    color: var(--ts-success);
    border-color: var(--ts-success-border);
}

.status.error {
    background: var(--ts-error-bg);
    color: var(--ts-error);
    border-color: var(--ts-error-border);
}

.status.warning {
    background: var(--ts-warning-bg);
    color: var(--ts-warning);
    border-color: var(--ts-warning-border);
}

/* ===== 按钮 ===== */
button.btn {
    background: var(--ts-primary);
    color: white;
    padding: 12px 14px;
    border: none;
    border-radius: var(--ts-radius);
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.2s ease;
    flex: 1;
    min-width: 80px;
}

button.btn:hover {
    background: var(--ts-primary-hover);
    box-shadow: var(--ts-shadow-hover);
}

button.btn:disabled {
    background: var(--ts-text-light);
    box-shadow: none;
    cursor: default;
}

/* ===== 小按钮 ===== */
.sbtn {
    display: inline-block;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--ts-border-light);
    background: var(--ts-bg);
    border-radius: 50%;
    box-shadow: var(--ts-shadow-sm);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    text-align: center;
    color: var(--ts-text-light);
    transition: all 0.1s ease;
    position: absolute;
    top: 8px;
    right: 8px;
}

.sbtn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--ts-primary), white 90%);
    transform: scale(1.1);
    color: var(--ts-primary);
}

.sbtn:disabled {
    opacity: 0.5;
    cursor: default;
    transform: none;
}

.sbtn:focus-visible {
    outline: 2px solid var(--ts-primary);
    outline-offset: 2px;
}