:root {
    --color-success-text: #270;
    --color-success-bg: #dff2bf;
    --color-success-border: #270;
    --color-error-text: #d8000c;
    --color-error-bg: #ffd2d2;
    --color-error-border: #d8000c;
    --color-warning-text: #856404;
    --color-warning-bg: #fff8dc;
    --color-warning-border: #ffeeba;
    --color-key-loaded-bg: #f1f8ee;
    --color-key-loaded-text: #3c763d;
    --color-key-loaded-border: #b4d8a1;
    --color-key-not-loaded-border: #f44336;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: var(--bg-color);
    color: var(--text-main);
    line-height: 1.6;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    background-color: var(--bg-card);
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
}

h1 {
    color: var(--accent);
    border-bottom: 2px solid var(--accent);
    padding-bottom: 10px;
    margin-top: 0;
}

h2,
.step-title { /* .step-title 沿用 h2 樣式 */
    font-size: 1.3em;
    color: var(--accent);
    background-color: var(--bg-header);
    padding: 8px 12px;
    border-left: 5px solid var(--accent);
    border-radius: 4px;
    margin-top: 30px;
}

textarea,
input[type="text"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-size: 1em;
    box-sizing: border-box;
}

button {
    background-color: var(--accent-button); /* Line 綠 */
    color: white;
    border: none;
    border-radius: 5px;
    padding: 16px 20px;
    font-size: 1.1em;
    cursor: pointer;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: var(--accent-button-hover); /* 深一點綠 */
}

button:active {
    transform: translateY(1px);
}

code {
    background-color: var(--bg-header);
    padding: 3px 6px;
    border-radius: 4px;
    font-family: 'Courier New', Courier, monospace;
    word-break: break-all;
    display: block;
    white-space: pre-wrap;
    margin-bottom: 10px;
}

.key-display {
    font-size: 0.9em;
    margin-bottom: 15px;
}

.section { /* 此 class 目前在 HTML 中未使用，但保留樣式以備將來擴充 */
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px dashed var(--border-secondary);
}

.section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.status {
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 5px;
    font-weight: bold;
}

.success {
    color: var(--color-success-text);
    background-color: var(--color-success-bg);
    border: 1px solid var(--color-success-border);
}

.error {
    color: var(--color-error-text);
    background-color: var(--color-error-bg);
    border: 1px solid var(--color-error-border);
}

.info {
    color: var(--accent);
    background-color: var(--bg-header);
    border: 1px solid var(--accent);
}

.link-display {
    background-color: var(--bg-header);
    padding: 10px;
    border-radius: 5px;
    border: 1px solid var(--border-color);
    word-break: break-all;
}

.inline-button {
    width: auto;
    display: inline-block;
}

.decrypted-message-box {
    min-height: 100px;
    padding: 16px;
    border-radius: 6px;
    font-size: 1em;
    white-space: pre-wrap; /* 保留換行和空格 */
    margin-bottom: 15px;
    color: var(--text-main);
    background-color: var(--bg-header);
    border: 1px dashed var(--border-secondary);
}

.decrypted-message-box.no-message {
    background-color: var(--color-warning-bg); /* 米黃色背景，用於提示無訊息 */
    color: var(--color-warning-text);
    border: 1px solid var(--color-warning-border);
}

details {
    border: 1px solid var(--border-color);
    border-radius: 5px;
    margin-bottom: 20px;
    background-color: var(--bg-card);
}

summary {
    padding: 10px 15px;
    cursor: pointer;
    font-weight: bold;
    background-color: var(--bg-header);
    border-bottom: 1px solid var(--border-color); /* 預設 summary 底部邊框 */
    border-radius: 5px 5px 0 0; /* 僅頂部圓角 */
    list-style: revert; /* 某些瀏覽器會隱藏箭頭，這裡嘗試恢復 */
}

summary:hover {
    background-color: var(--bg-card);
}

details[open] > summary { /* 當 details 展開時，summary 的底部邊框 */
    border-bottom: 1px solid var(--border-color);
}

details > div { /* details 內容區域 */
    padding: 15px;
    background-color: var(--bg-card);
    border-radius: 0 0 5px 5px; /* 僅底部圓角 */
}

.details-h2 { /* 用於 summary 內的 h2 標題 */
    display: inline-block;
    font-size: 1.5em;
    color: var(--accent);
    margin: 0;
    padding: 0;
    border-bottom: none; /* 移除 h2 預設邊框 */
}

.details-summary-minor { /* 用於較次要的 summary 標題 */
    font-size: 1em;
    color: var(--text-main);
}

/* stylelint-disable-next-line selector-id-pattern */
#myKeySectionDetails > summary.keys-loaded {
    background-color: var(--color-key-loaded-bg); /* 淺綠色背景表示金鑰已載入 */
    color: var(--color-key-loaded-text);
    border-left: 3px solid var(--color-key-loaded-border);
}

/* stylelint-disable-next-line selector-id-pattern */
#myKeySectionDetails > summary.keys-not-loaded {
    border-left: 5px solid var(--color-key-not-loaded-border); /* 紅色左邊框表示金鑰未載入 */
}

/* 使用更高特定性來避免 !important */
/* stylelint-disable-next-line selector-id-pattern */
code#myPublicKeyDisplay.key-not-generated-error {
    background-color: var(--color-error-bg); /* 紅色背景，用於提示金鑰未生成 */
    color: var(--color-error-text); /* 深紅色文字 */
    border: 1px solid var(--color-error-border);
    padding: 5px;
}

/* stylelint-disable-next-line selector-id-pattern */
#universalShareBtn { /* 主分享按鈕的特定樣式 */
    --accent-button: #006A00; /* Line 綠 (WCAG AA compliant) */
    --accent-button-hover: #005C00; /* 深一點綠 (WCAG AA compliant) */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loader { /* 載入中動畫 */
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--accent); /* 藍色邊框 */
    border-top: 2px solid transparent; /* 頂部透明以形成旋轉效果 */
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 8px;
    vertical-align: text-bottom;
}

@keyframes glow { /* 強調動畫 */
    0%, 100% { box-shadow: 0 0 0 rgb(255 255 0 / 0%); }
    50% { box-shadow: 0 0 10px rgb(255 255 0 / 80%); } /* 黃色光暈 */
}

.highlight-once { /* 一次性強調動畫的 class */
    animation: glow 2s ease-in-out 1;
    border-radius: 6px; /* 配合光暈效果 */
}

/* 外層高階設定 group 外觀 */
details.nested-group {
    border: 2px dashed var(--border-secondary);
    background-color: var(--bg-card);
}

/* 外層 summary 樣式 */
details.nested-group > summary {
    background-color: var(--bg-header);
    color: var(--text-main);
    font-size: 1.1em;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    padding: 12px 18px;
    margin-bottom: 8px; /* summary 和內容之間的間隔 */
}

/* 若展開則加強內層區塊區隔 */
details.nested-group[open] > div {
    padding-top: 5px;
    border-top: 1px dashed var(--border-secondary);
}


@media (width <= 768px) { /* 平板裝置的響應式調整 */
    .container {
        padding: 15px;
    }

    h1 {
        font-size: 1.8em;
    }

    h2,
    .step-title {
        font-size: 1.1em;
    }
}

@media (width <= 600px) { /* 手機裝置的響應式調整 */
    /* stylelint-disable-next-line selector-id-pattern */
    #universalShareBtn {
        font-size: 1.2em;
        padding-top: 18px;
        padding-bottom: 18px;
    }
}

.ad-section {
    margin: 20px 0;
    text-align: center;
}