.container{max-width:500px;margin:0 auto;padding:24px}form{display:grid;gap:12px}@media (max-width: 600px){.container{padding:16px}form{gap:8px}}.error{background:var(--error-bg);border:1px solid var(--error-border);color:var(--error-text);padding:8px;border-radius:4px}.layout{display:flex;flex-direction:column;min-height:100vh}.layout-header,.layout-footer{width:100%;background:var(--btn-bg);color:var(--btn-color);border-bottom:1px solid var(--btn-border)}.layout-footer{border-top:1px solid var(--btn-border);border-bottom:none}.layout-header>.layout-inner,.layout-footer>.layout-inner{max-width:960px;margin:0 auto;padding:12px 20px;display:flex;justify-content:space-between;align-items:center}.layout-logo{font-weight:700;text-decoration:none;color:inherit;font-size:18px}.layout-logo:hover{text-decoration:underline}.layout-title{margin:0;font-size:20px;font-weight:400}.layout-content{flex:1;width:100%}.layout-content>.layout-inner{max-width:500px;margin:0 auto;padding:20px}@media (max-width: 600px){.layout-header>.layout-inner{flex-direction:column;align-items:flex-start;gap:8px}}.note-textarea{width:100%;height:300px;padding:12px;box-sizing:border-box;border-radius:6px;font-size:14px;resize:vertical}@media (max-width: 600px){.note-textarea{height:200px;font-size:13px}}@media (prefers-color-scheme: dark){.note-textarea{background:#222;color:#fff;border:1px solid #555}}.note{color:var(--card-fg, var(--page-text, inherit));border:1px solid var(--card-border, color-mix(in oklab, CanvasText, Canvas 80%));border-radius:6px;padding:14px;box-shadow:0 1px 2px #0000000f,0 6px 18px #0000000a}.note-asset{display:inline-flex;align-items:center;flex-wrap:wrap;margin:6px auto}.note-download-btn{padding:8px 12px;border-radius:8px;border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--btn-color);font-size:14px;transition:transform .06s ease,background .15s ease,border .15s ease}.file-input{display:flex;flex-direction:column;gap:6px}.file-dropzone{border:2px dashed #ccc;padding:20px;text-align:center;cursor:pointer;border-radius:6px;transition:border-color .2s}.file-dropzone.drag-over{border-color:#1976d2}.hidden-input{display:none}.file-list{list-style:none;padding:0;margin-top:10px;display:flex;flex-direction:column;gap:8px;text-align:left}.file-list-item{border:1px solid #ccc;padding:6px 10px;border-radius:4px;background:#fafafa;display:flex;justify-content:space-between;align-items:center}.file-list-item-name{font-size:14px}.remove-btn{background:transparent;border:none;cursor:pointer;font-size:16px;color:#c62828}@media (prefers-color-scheme: dark){.file-dropzone{border-color:#666;background:#222;color:#eee}.file-dropzone.drag-over{border-color:#90caf9}}.password-field{display:flex;flex-direction:column;gap:6px}.password-input-row{display:flex;gap:4px}.password-input{flex:1;padding:8px;box-sizing:border-box}.password-btn{min-width:36px;min-height:36px;display:inline-flex;align-items:center;justify-content:center;padding:6px 8px;font-size:16px;background:var(--btn-bg);color:var(--btn-color);border:1px solid var(--btn-border);border-radius:4px}:root{--btn-bg: #f5f5f5;--btn-color: #222;--btn-border: #ccc}@media (prefers-color-scheme: dark){:root{--btn-bg: #333;--btn-color: #fff;--btn-border: #555}}@media (max-width: 600px){.password-btn{min-width:32px;min-height:32px;font-size:14px}}.ttl-selector{display:flex;flex-direction:column;gap:6px}.ttl-selector-list-label{margin-bottom:5px}.ttl-selector-list{display:flex;gap:6px;flex-wrap:wrap}.ttl-btn{padding:6px 10px;border:1px solid var(--btn-border);border-radius:4px;background:var(--btn-bg);color:var(--btn-color)}.ttl-btn-flex{flex:1}.ttl-btn.active{border-color:#1976d2;background:#1976d2;color:#fff}@media (prefers-color-scheme: dark){.ttl-btn.active{background:#90caf9;border-color:#90caf9;color:#222}}.create-form{display:flex;flex-direction:column;gap:12px}.error-msg{background:#ffebee;border:1px solid #c62828;color:#b71c1c;padding:8px;border-radius:4px;font-size:14px}.submit-btn{padding:10px;border-radius:4px;border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--btn-color);font-size:16px}@media (max-width: 600px){.submit-btn{font-size:14px;padding:8px}}@media (prefers-color-scheme: dark){.error-msg{background:#402020;border-color:#ef5350;color:#ffcdd2}}.share-link{display:flex;gap:4px}.share-input{flex:1;padding:8px;border:1px solid var(--btn-border);border-radius:4px}.share-btn{padding:8px;border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--btn-color);border-radius:4px}@media (prefers-color-scheme: dark){.share-input{background:#222;color:#fff;border:1px solid #555}}.create-result{display:flex;flex-direction:column;gap:16px;text-align:center}.result-section{margin-top:8px}h2{margin:0;font-size:20px}@media (max-width: 600px){h2{font-size:18px}}@media (prefers-color-scheme: dark){.create-result{color:var(--page-text)}}.decrypt-form{display:flex;gap:6px}.decrypt-form:has(>.decrypt-btn:only-child){justify-content:center}.decrypt-input{flex:1;padding:8px;border:1px solid var(--btn-border);border-radius:4px}.decrypt-btn{padding:8px 12px;border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--btn-color);border-radius:4px}@media (max-width: 600px){.decrypt-form{flex-direction:column}}@media (prefers-color-scheme: dark){.decrypt-input{background:#222;color:#fff;border:1px solid #555}}:root{--btn-bg: #f5f5f5;--btn-color: #222;--btn-border: #ccc;--page-bg: #fff;--page-text: #000;--success-bg: #e8f5e9;--success-border: #2e7d32;--success-text: #1b5e20;--error-bg: #ffebee;--error-border: #c62828;--error-text: #b71c1c;--card-bg: #ffffff;--card-fg: #222222;--card-border: #dddddd}@media (prefers-color-scheme: dark){:root{--btn-bg: #333;--btn-color: #fff;--btn-border: #555;--page-bg: #121212;--page-text: #eee;--success-bg: #1b4020;--success-border: #4caf50;--success-text: #a5d6a7;--error-bg: #402020;--error-border: #ef5350;--error-text: #ffcdd2;--card-bg: #1c1c1c;--card-fg: #eeeeee;--card-border: #333333}}body{background:var(--page-bg);color:var(--page-text);margin:0;font-family:system-ui,sans-serif}button,input,textarea{font-family:inherit}
